CodeGrid 12th Event Site

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

全9回

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

第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への置き換えにチャレンジ!