HTML+CSSによるレイアウトの進め方 レイアウト１：フレックスボックスを使ったレイアウト フォルダ：layout_sample_01 【準備】 ①[HTML] HTMLに必須のコードを記述します Visual Stu […]
資料
CSS 擬似要素（::before/::after）
::before/::after フォルダ：css_sample_08 擬似要素とは 選択された要素の特定の部分にスタイル付けするときに使います。主に装飾に使用します。例えば、::beforeは、要素の前、::after […]
CSS トランジション（transition）
transition フォルダ：css_sample_07 トランジションを使うとCSSプロパティが変化する際にアニメーション効果をつけることができます。 【準備】 ▼style.cssへの追記 上記の例では、ナビゲーシ […]
CSS 擬似クラス
:link/:visited/:hover/:active フォルダ：css_sample_06 擬似クラスとは セレクターに付加するキーワードで、特定の状態に対するスタイル付けをするときに使います。例えば、マウスカーソ […]
CSS ボックス（width/height/margin/padding/border）
幅・高さ width/height、余白 margin/padding、境界線 border、角丸 border-radius ボックスのサイズの規定、余白、境界線などの設定に関するCSSプロパティです。 CSSボックス […]
抽象イメージの造形化
抽象とは 「あたたかい/つめたい」を例にすると ▶言葉から考える ▶色から考える ▶形を考える 形：角張っている、丸みがある、直線的、曲線的、… 配置：ぎゅっと集まっている、散っている・離れている、規則正しくならんでいる […]
CSS リスト（list-style）
リストの装飾 list-style リスト（箇条書き）の設定を行うCSSプロパティです。 【はじめる前に】 ▼index.htmlへの追記 ▼style.cssへの追記（一番下に追加） リストに関するプロパティ list […]
CSS テキスト・フォント
test-align/font-size/font-weight/font-family/line-height/letter-spacing テキストに関する設定を行うCSSプロパティです。 【はじめる前に】 ▼ind […]