はじめてのCSS INDEX
最終更新日：2023年12月20日 （初回投稿日：2010年08月31日）
はじめてのCSS
まずは、とっても大切な基本的な決まり事から
- 【1】CSSってどんなもの？ カスケーディングって何？
- 【2】CSSはどうやって使うの？（基本構造とCSSを置く場所について）
- 【3】id とか classって何？（セレクタの「種類」を知っておこう）
- 【4】CSSの優先度のルール（ブラウザが混乱しないためのルールだよ）
- 【5】CSSの値の継承（Inheritance）のルール
- 【6】CSSって具体的に何ができる？（プロパティについてざっくりと）
- 【7-1】CSSのサイズの単位について（em, %, px, rem の使い分け）
- 【7-2】CSS3の新しい単位 vw, vh, vmin, vimax について
- 【8】CSSの「色」と「透明度」の指定
- （ちょっとメモ）CSS3とは？ CSSのモジュールやレベルについて
しっかり押さえておきたい、インライン・ブロックレベル・ボックス構造
- 【9】HTML要素の インラインレベル・ブロックレベル について
- 【10】ボックスモデル（margin, padding, border を使いこなそう）
- 【11-1】marginと marginのショートハンド
- 【11-2】marginの auto という値の「？」を解決しておこう
- 【11-3】はみ出て便利♪ ネガティブ・マージン（Negative Margin）
- 【11-4】marginの相殺（margin collapsing）
- 【12】paddingと paddingのショートハンド
- 【13-1】borderと borderのショートハンド
- 【13-2】border-imageと border-imageのショートハンド
- 【14】borderとよく似た outlineはレイアウトを崩さない
- 【15-1】background関連のプロパティ（1/4）
- 【15-2】background関連のプロパティ（2/4 background-position）
- 【15-3】background関連のプロパティ（3/4 background-size）
- 【15-4】background関連のプロパティ（4/4 clip と origin）
- 【15-5】backgroundのショートハンド まとめ
- （ちょっとメモ）スマホでbackground-attachment: fixed が効かない時
- 【16-1】幅の width、高さの heightプロパティ
- 【16-2】下限の min-width, min-height 上限の max-width, max-height
- 【17-1】displayプロパティでボックスの表示形式を自由に変えよう
- 【17-2-1】display:list-itemでリスト関連じゃない要素をリストっぽく
- 【17-2-2】リスト関連の要素のためのCSSプロパティ
- 【17-3-1】display:tableでテーブル関連じゃない要素をテーブルっぽく
- 【17-3-2】テーブル関連の要素のためのCSSプロパティ
- 【17-4-1】display:rubyでルビ関連じゃない要素をルビテキストに
- 【17-4-2】ルビ関連の要素のためのCSSプロパティ
- 【18-1】Flexbox を使おう！（display:flexでFlexboxを作る）
- 【18-2】Flexbox内のボックスの配置方法を指定しよう
- 【18-3】Flexbox内の縦（垂直）方向を揃えよう
- 【18-4】Flexboxの orderプロパティで表示順を自由に変えよう
- （ちょっとメモ）Flexbox をシミュレーションできるサイト2件
- 【18-5】Flexboxの古い仕様とベンダープレフィックスまとめ
- 【19】visibility で表示か非表示かを指定しよう
- 【20】overflowで、あふれた中身の表示方法を指定しよう
- 【21】floatプロパティと clearプロパティ。そして Clearfixについて
- （ちょっとメモ）Web開発ツールでCSSがどう効いているか確認しよう
要素のポジションのためのCSS
クリッピングのためのCSS
フォントのためのCSS
- 【26-1】font-familyプロパティでフォント（書体）を指定しよう
- 【26-2】font-sizeプロパティでフォントのサイズを指定しよう
- 【26-3】font-weightでフォントのウェイト（太さ）を指定しよう
- 【26-4】font-stretch で condensed などの文字幅を選択しよう
- 【26-5】font-styleプロパティでフォントを斜体に指定しよう
- 【26-6】line-heightプロパティで 行間（行の高さ）を指定しよう
- 【26-7】フォントをまとめて指定する fontショートハンドプロパティ
- （ちょっとメモ）@font-face で Webフォントを使おう
- （ちょっとメモ）CSS3とは？ CSSのモジュールやレベルについて
- 【27】フォントサイズを調整する font-size-adjustプロパティ
- 【28】ボールドやイタリックを合成するか決める font-synthesis
- 【29】文字間を自動調整してくれる font-kerningプロパティ
- 【30-1】スモールキャップなどを指定する font-variant-caps
- 【30-2】上付き・下付き文字を指定する font-variant-position
- 【30-3】リガチャ（合字）を指定する font-variant-ligatures
- 【30-4】数字の表示方法を指定する font-variant-numeric
- 【30-5】文字の代替えを指定する font-variant-alternates
- 【30-6】漢字や仮名のための font-variant-east-asian
- 【30-7】ショートハンドプロパティになった font-variant
- 【31】OpenType機能を直接指定できる font-feature-settings
インラインレベル要素とテーブルセルの整列のためのCSS
テキストのためのCSS
- 【33】テキストの整列や両端揃えを指定する text-alignプロパティ
- 【34】単語の途中で折り返させる overflow-wrap（word-wrap）
- 【35】改行の禁則処理を解除するか決める word-breakプロパティ
- 【36】単語の途中で改行するとき自動でハイフンを付ける hyphens
- 【37】空白を詰めるかどうか決める white-spaceプロパティ
- 【38】インデント（字下げ）を指定する text-indentプロパティ
- 【39】単語間の間隔を指定する word-spacingプロパティ
- 【40】文字間の間隔を指定する letter-spacingプロパティ
- 【41】句読点などが行頭に来るかどうか決める line-break
- 【42】句読点などをボックス外にぶら下がらせる hanging-punctuation
- 【43】テキストを大文字・小文字に変換する text-transform
- 【44】タブ文字の幅を決める tab-sizeプロパティ
ライティングモード
テキスト デコレーション
- 【47-1】テキストのライン装飾の種類を決める text-decoration-line
- 【47-2】テキストのライン装飾の色を決める text-decoration-color
- 【47-3】テキストのライン装飾を波線にもできる text-decoration-style
- 【47-4】text-decorationショートハンドプロパティでまとめて指定
- 【48-1】ライン装飾をしない対象を決める text-decoration-skip
- 【48-2】ライン装飾が文字を横切るかを決める text-decoration-skip-ink
- 【49】アンダーラインの位置を決める text-underline-position
- 【50-1】テキストの強調マークの種類を決める text-emphasis-style
- 【50-2】テキストの強調マークの色を決める text-emphasis-color
- 【50-3】テキスト強調マークの種類と色のショートハンド text-emphasis
- 【51】テキストの強調マークの位置を決める text-emphasis-position
ユーザーインターフェイス（UI）のためのCSS
マルチカラムのためのCSS
- 【57-1】マルチカラムのカラム数を決める column-countプロパティ
- 【57-2】マルチカラムのカラム幅を決める column-widthプロパティ
- 【57-3】カラム数と幅をまとめて指定する columnsショートハンド
- 【58】各カラムの間隔を指定する column-gapプロパティ
- 【59-1】カラム間の罫線のスタイルを指定する column-rule-style
- 【59-2】カラム間の罫線の幅を指定する column-rule-width
- 【59-3】カラム間の罫線の色を指定する column-rule-colorプロパティ
- 【59-4】カラム間の罫線をまとめて指定する column-rule
- 【60】マルチカラム内で段抜きができる column-spanプロパティ
- 【61】各カラムの埋め方を決める column-fillプロパティ
- （ちょっとメモ）ブラウザはどうやって カラムの幅を決めるか
グリッドレイアウトのためのCSS
- 【62-1】Grid Layout の grid-template-rows, grid-template-columns
- （ちょっとメモ）サイズ指定で使う値について (min-content, repeat( ) )
- 【62-2】エリアに名前をつけて配置する grid-template-areasプロパティ
- 【62-3】セルやエリアを一括指定する grid-templateショートハンド
- 【62-4】アイテム側で位置指定をする grid-row, grid-columnプロパティ
- 【62-5】アイテム側の位置指定を一括する grid-areaショートハンド
- 【62-6】Gridアイテムを自動配置する grid-auto-flowプロパティ
- 【62-7】暗黙的トラックを指定する grid-auto-rows, grid-auto-columns
- 【62-8】gridショートハンドで Gridコンテナ側の指定を一括にまとめる
- 【62-9】Grid Layout での order, position-absolute, z-index, margin
- （ちょっとメモ）IE10〜Edge15 では Grid Layout の仕様が違う
アイテムを配置・分布するためのCSS
- 【63】アイテム間の空きを指定する gap（row-gap, column-gap）
- 【64-1】ボックス配置の全体的なルール（9コのプロパティまとめ）
- 【64-2】ボックス配置の「整列キーワード」まとめ
- 【64-3】アイテムの配置・分布を指定する justify-content（主軸方向）
- 【64-4】アイテムの配置・分布を指定する align-content（交差軸方向）
- 【64-5】アイテムの配置・分布を指定するショートハンド place-content
- 【64-6】アイテム個別の配置を指定する justify-self (主軸方向)
- 【64-7】アイテム個別の配置を指定する align-self (交差軸方向)
- 【64-8】アイテム個別の配置を一括指定する place-selfショートハンド
- 【64-9】アイテムの個別配置を一度に指定する justify-items (主軸方向)
- 【64-10】アイテムの個別配置を一度に指定する align-items (交差軸方向)
- 【64-11】アイテム配置を一括指定する place-itemsショートハンド
CSSのセレクター（Selectors）の種類と使い方
- 【65】CSSのセレクターを整理しよう（セレクター 一覧）
- 【65-1】エレメンタルセレクター（要素名で指定するセレクター）
- （ちょっとメモ）「,」で区切る「セレクターリスト」
- 【65-2】結合子を使うセレクター（E F, E > F, E + F, E ~ F）
- 【65-3】属性セレクター [att] [att="val"] [att~="val"] [att|="en"]
- 【65-3】属性セレクター [att^="val"] [att$="val"] [att*="val"]
- 【65-3】属性セレクター [att="val" i] [att="val" s]
- 【65-3】クラスセレクター（.）と IDセレクター（#）
- （ちょっとメモ）名前空間（ネームスペース）とCSSセレクター
- 【66】擬似クラスと疑似要素（2つの違いとそれぞれの特徴）
- 【66-1】ロケーション擬似クラス :link :visited :any-link
- 【66-1】ロケーション擬似クラス :target :target-within :local-link
- 【66-2】ユーザーアクション擬似クラス :active :hover
- （ちょっとメモ）書き順は、:link → :visited → :hover → :active
- 【66-2】ユーザーアクション擬似クラス :focus :focus-visible :focus-within
- 【66-3】ツリー構造擬似クラス :root :empty
- 【66-3】ツリー構造擬似クラス :nth-child( )
- 【66-3】ツリー構造擬似クラス :nth-last-child( )
- 【66-3】ツリー構造擬似クラス :first-child
- 【66-3】ツリー構造擬似クラス :last-child
- 【66-3】ツリー構造擬似クラス :only-child
「はじめてのHTML」からピックアップ
「はじめてのHTML」でも CSS について、いろいろメモっています。
基本的な使いどころや、リスト、テーブル、フォームをCSSで整えたり、CSS3 の新しいプロパティでグラデーションを作ったり、ボックスを角丸にしたり。どうぞご参考に。
HTML要素ではできないレイアウトのための指定はCSSでします。
- [6] テキストに段落 <p> を作って、ちょっとCSSを使ってみよう
- [7] <div>や<span>で特定の範囲を指定しよう ＊div や span の文字色をCSSで変更しています。
- [9-2] 画像にテキストを回り込ませよう（CSS使用）＊float で画像とテキストを横に並べます。
- [11-2] リンクの文字の色を変えよう（CSS使用）＊リンク部分のロールオーバー時の指定など
- [11-5] 画像にリンクを貼ろう ＊画像のまわりの枠（border）をCSSで無くします。
- [11-6] ボタン画像をロールオーバ時に変化させてみよう（CSS使用）
- [12-1] CSSを外部ファイルにしよう ＊CSSファイルを作ってHTMLファイルに読み込みます。
- [12-2] なんでHTMLとCSSはセットなの？
サイトの背景にCSSで色や画像をつけます
- [13-1] サイトの背景に色をつけてみよう（CSS使用）＊body要素に背景色をつけます。
- [13-2] サイトの背景に画像を表示しよう（CSS使用）＊body要素の背景に画像を使います。
- [13-3] サイト背景にCSS3で線形グラデーションをつけよう (CSS使用) ＊CSS3の線形グラデ
- [14-4] 色指定について（16進数、色名、10進数、パーセント）
リストのビジュアルをCSSで整えたり、リスト要素でナビゲーションを作ります
- [15-1] リストを作ってみよう <ul><li> (番号無しリスト) ＊リストの記号をCSSで変更します。
- [15-2] 番号付きリストを作ろう <ol><li> ＊リストの数字をCSSで変更します。
- [15-4-1] リストでナビゲーション（ その1 : ul要素で ） ＊縦並びのナビにCSSで矢印をつけます。
- [15-4-2] リストでナビゲーション（ その2 : ナビを横に並べる) ＊floatを使用
- [15-4-2-2] リストでナビゲーション（ その2 : ナビを横に並べる_追加記事） ＊display使用
- [15-4-3] リストでナビゲーション（ その3 : dl要素で） ＊子メニューのあるナビを作ります。
テーブル（表組）のビジュアルをCSSで整えます
- [16-1] table（表）を作ろう（まずは基本の要素） ＊tableの見た目をCSSで整えます。
- [16-2] table にタイトルをつけよう <caption> ＊captionもCSSで指定します。
- [16-4] table のセルの枠線を非表示にしよう（CSS使用）＊empty-cells : hide で非表示に。
- [16-5] table横列グループ化 <thead><tbody><tfoot> ＊CSSでグループを色分けします。
- [16-6] table縦列グループ化 <colgroup><col> ＊CSSでグループを色分けします。
CSS の新プロパティでレイアウト
- [18-1] 要素を角丸にしよう（border-radius）
- [18-2] 要素にシャドウをつけよう（box-shadow）
- [18-3] テキストにシャドウをつけよう（text-shadow）
- [18-4] 円形（放射）グラデーションを作ろう (radial-gradient)
- [18-5] 水玉、ボーダー、チェック柄を作ろう（background-size）
- （ちょっとメモ）CSS3の「ベンダープレフィックス」について
テキストに関連するCSS
- [31-2] <pre>要素と同じ効果のCSS「white-space : pre」（CSS使用）
- [33-2] 単語の途中でも改行しちゃうCSS「word-wrap: break-word」（CSS使用）
<hr>や<figure><figcaption>をCSSで整えます
- [35] 内容の区切りを示す<hr>要素 ＊hr要素をCSSで装飾して飾り罫にします。
- [36] コンテンツをまとめる<figure>と、そのキャプション<figcaption>
HTMLの「メタデータ・コンテンツ」でCSSに関連するモノ
- [42-1] <link>で 外部CSSファイルの読み込み、グループ化をしよう
- [42-2] link media=" " で 外部CSSをメディア別に切り替えよう
- （ちょっとメモ）<link>よりスマートな CSSの @import と @media
- [43] <style>で CSS を HTML内に書いてみよう
フォームをCSSで整えます
やる気を保つためにランキングに参加しています。
応援してくださると すっごいやる気を出します！ (笑)
初心者にも使いやすい（と思う）レンタルサーバー
「初心者ですがレンタルサーバーはどこがいい？」というご質問をよくいただきます。
自由にファイルをアップロードできる自分のサーバがあると便利ですよね。ローカル環境じゃなくサーバ上で試してみたい時がありますからね。
私が使っているのは、
スターサーバー
や ロリポップ！
です。どちらも管理画面がわかりやすく、マニュアルも充実していて、料金も安い。どちらもライトプラン以上で WordPress が使えます。
初心者が始めやすいサーバだと思います。
ちょっと料金は高いけど、さくらのレンタルサーバ
や、エックスサーバー
は、やはり老舗なのでおすすめです。
両方とも高スペックでコスパが良く、老舗でユーザーが多いので、質問する場がたくさんあります。初心者だけど仕事でサーバが欲しい場合は、安心なのではないかと思います。
スポンサーリンク
