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

長かったサイト制作もこの回でおしまいです。最後はChromeのLighthouse機能を使い、サイトの品質をチェックします。これまで気づかなかった改善点が見つかります。そして、授業の最後、デザイナーとエンジニアの関係性について、グリコさんと先生が話しています。

これまで心のままに（？）書いてきたCSSを、のちの自分や、他人が見やすいように整理します。整理の方法にも、統一したほうがいいルールがあります。整理する上での、コードの書き直しのポイントもわかります。

一通り意図どおりのスタイルを書くことができたグリコさん。コードも複雑で少し見通しが悪くなってきました。それを、擬似クラスや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への置き換えにチャレンジ！