Webサイト作成をとおして学ぶHTML/CSS

メニューテキストの文字サイズを親要素の横方向の大きさを基準に変化させる、コンテナクエリーの使い方を解説します。clamp()関数と組み合わせると、文字サイズをうまくコントロールできるようになります。

共通なスタイルをひとつにまとめてCSSのスタイルを整理します。そのあと、a要素の範囲を調整しましょう。a要素は、そのままでは幅や高さを変更できないので、displayプロパティを変更します。

CSS Gridによって、レイアウトされているスキル名と、その習熟度を表すグラフのレイアウトを調整します。まず、背景から飛び出してしまっている棒グラフを調整し、さらにFlexboxを使って、狭い幅ではスキル名と習熟度グラフが縦に並ぶようにします。

CSS Gridを使って、メインコンテンツのレイアウトをします。列の幅の取り方や、列の間隔の調整を覚えます。また、カラム落ちした際の要素間の余白を整える方法も解説します。

どうもグリコさんが指定したとおりに表示されてくれないヒーローエリアの画像。CSSの背景画像の指定を細かく調整します。最後には2つの背景画像を組み合わせて表示する方法を選択することに。なんとか理想の表示に近づきました。

CSSセレクターの種類をまとめながら、どのような指定手法があるのか、またスタイルの優先度の決定方法も学びます。さらにサイトトップにある背景画像をCSSでどのようにコントロールするかについても解説します。

今回からいよいよCSSでスタイリングを行います。まずはHTML文書の全体に関わるベースとなるCSSの指定からチェックしていきます。

Markdownで表せる意味以外の要素がHTMLとしては必要です。それらの要素を加え、HTML文書を仕上げます。さらに、代替テキストを吟味しましょう。

目下、UIデザイナーとなるべく研鑽を積んでいるグリコさんが、エンジニアの先生のもと、HTML/CSSの基本の習得を目指します。第1回目はMarkdownによる情報整理と、簡単なHTMLへの置き換えにチャレンジ！