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

全13回

UIデザイナーを目指すピクセルグリコさんが、エンジニアの先生にHTML/CSSの書き方を教えてもらいます。Webサイトを作る基本を学んでみましょう。

最終回 Lighthouseで最終チェック

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

第12回 記述の順番を見直してわかりやすくする

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

第11回 見通しのよいCSSにする

一通り意図どおりのスタイルを書くことができたグリコさん。コードも複雑で少し見通しが悪くなってきました。それを、擬似クラスやCSSのネスティングを使って、よりわかりやすいコードに仕立てます。

第10回 区切り線を幅に合わせて調整する

今回は主に、ページの幅が広い時と狭い時の調整を行います。まず、メインコンテンツ部分、次にフッター部分を調整します。メディアクエリーやコンテナクエリーを用いて、スタイルをどのように書いていくかがポイントです。

第9回 要素の幅を基準に文字サイズを決める

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

第8回 リンクの範囲を広げる

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

第7回 スキルコンテンツの列調整

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

第6回 メインコンテンツの列調整

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

第5回 ヒーローエリア画像の調整

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

第4回 スタイルの優先度、背景画像の配置

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

第3回 ベースとなるCSS指定

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

第2回 HTMLを整え、代替テキストを考える

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

第1回 情報を整理して簡単なHTMLを書く

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