background-image

WEB制作

• background-image, box-shadow, CSS, flex-direction, flexbox,

実践！HTMLとCSS！コンテンツ作成の効率化と左右逆レイアウト

今回は以前作成したコンテンツである左に画像、右にテキストに配置したレイアウトを簡単に右に画像、左にテキストとレイアウトを変えていく方法を初心者向けに解説していきま […]

続きを読む

WEB制作

• :hover, <div>タグ, <h2>タグ, <section>タグ, <span>タグ,

実践！HTMLとCSS！ボタン付きリンクと画像入りコンテンツの制作

今回は上の写真にあるような画像とリンクボタンのついたコンテンツの作成方法を初心者向けに解説していきます。 単に画像を入れると言っても、ブラウザの大きさや画面の大き […]

続きを読む

WEB制作

• <h1>要素, <header>要素, align-items, align-items: center;, background-image,

実践！HTMLとCSS！サイトの顔！ヒーローイメージを作る

ヒーローイメージとは、ウェブサイトのヘッダー部分に表示される画像を示します。 すなわち、サイト訪問者が一番最初に目にするデザインとなります。 この様にヒーローイメ […]

続きを読む