Live Server を使ってみよう
Visual Studio CodeのLive Serverを使ってHTMLをローカルサーバーで表示し、編集内容をブラウザへ自動反映する方法を解説します。
続きを読む →BuildBooks
HTML / CSSの記事
Web制作を初めて学ぶ方のための記事を、基礎から順番にまとめています。
Chrome DevTools を使ってみよう
Chrome DevToolsのElementsとStylesを使い、WebページのHTML構造やCSSを確認し、その場で表示を試しに変更する方法を解説します。
続きを読む →display と Flexbox を使ってみよう
CSSのdisplayプロパティとFlexboxを使って要素を横並びにし、gapやalign-itemsで間隔と位置を整える基本を解説します。
続きを読む →レスポンシブデザインを体験してみよう
CSSのメディアクエリを使い、PCの横並びレイアウトをスマートフォンでは縦並びへ切り替えるレスポンシブ対応を解説します。
続きを読む →hover と transition を使ってみよう
CSSのhoverとtransitionを使い、マウスを乗せたときにボタンの色や見た目を滑らかに変化させる方法を解説します。
続きを読む →Google Fonts とは？
Google FontsからWebフォントを読み込み、CSSのfont-familyで適用する基本手順と、読みやすいフォントを選ぶときのポイントを解説します。
続きを読む →フォントサイズを変える
CSSのfont-size、line-height、letter-spacingを使って文字サイズ、行間、字間を調整し、文章を読みやすく整える方法を解説します。
続きを読む →色を使ってサイトの印象を変えてみよう
CSSのcolorとbackground-colorを使って文字色や背景色を変更し、まとまりのある配色でWebサイトの印象を整える方法を解説します。
続きを読む →box-shadow と border で立体感を出してみよう
CSSのbox-shadowとborderを使ってカードに影や境界線を付け、RGBAによる透明度も利用して自然な立体感を作る方法を解説します。
続きを読む →Flexbox を使って横並びレイアウトを作ってみよう
CSSのFlexboxで要素を横並びにし、gap、justify-content、align-itemsを使って間隔や配置を調整する方法を解説します。
続きを読む →Flexbox の縦並びとレスポンシブ切り替えを学ぼう
Flexboxのflex-directionで縦横の並びを変更し、メディアクエリと組み合わせて画面幅に応じたレイアウトを作る方法を解説します。
続きを読む →中央寄せレイアウトを作ってみよう
CSSのmax-width、margin、paddingを使い、画面幅に柔軟に対応しながらコンテンツを中央へ配置する基本レイアウトを解説します。
続きを読む →
全 35 件
（2 / 3 ページ）