ITメモ
CSS
「CSS」の「Topics」
「印刷用CSS」を「コンテンツ」に適用する方法「表示サイズ別」に「CSS」を適用する方法「スマートフォン」に「CSS」を適用する方法「コンテンツ」の「縦位置」を「真ん中」に配置する方法「コンテンツ」の「横位置」を「真ん中」に配置する方法「ベージ表示」を「フワッ」とした「フェードイン」で表示する方法「CSS」で「スクロールバー」を表示・設定する方法背景・背景画像関連
背景画像のスライドショーを作成する方法背景画像を表示場所に自動フィットさせる設定背景画像を表示位置を調整する方法「背景色」に「透明度」を加える方法 「背景色」を「グラデーション」にする方法画像関連
画像の下にできる空白を消す方法背景や画像に透明感を加える方法画像の横に文字を回り込ませる方法「CSS」で画像を変更する方法「CSS」の基礎知識
「CSS」のファイル書式「CSS」のヘッダー書式「CSS」のコード書式「CSS」を「HTML」ファイルに記述する方法「CSS」外部ファイルをHTMLファイルとリンクさせる方法「CSS」でコメントを使う方法「CSS」で利用する単位「CSS」でテキストを編集する方法「CSS」での「セレクタ」優先順位「CSS」の命名規則「BEM」とはCSSプロパティ【レイアウト関連】
【 width 】「横幅」を指定する方法【 height 】「高さ」を指定する方法【 margin 】「枠線外側」の「余白」を指定する方法【 padding 】「枠線内側」の「余白」を指定する方法【 border 】「枠線（ボーダー）」を付ける方法【 outline 】「枠線（ボーダー）」を付ける方法【 border-radius 】要素の四隅に丸みを付ける【 transform 】コンテンツに「2D変形」「3D変形」を適用【 display 】「ブロック要素」「インライン要素」に変換【 position 】コンテンツの配置指定【 float 】コンテンツを片側に寄せる方法CSSプロパティ【コンテンツ関連】
【 content 】コンテンツの追加CSSプロパティ【背景関連】
【 background 】背景を設定する方法CSSプロパティ【文字・テキスト関連】
【 color 】文字の色を設定する【 font 】フォントを設定を一括指定する方法【 font-size 】フォントサイズを変更する方法【 font-family 】フォントの変更をする方法【 font-style 】フォントのスタイルを指定する方法【 font-weight 】文字を太字にする方法【 font-stretch 】文字を横幅（フェイス）を指定する方法【 font-size-adjust 】小文字の大きさを設定する方法【 line-height 】テキストラインの高さを設定する【 text-indent 】テキストインデントを設定する【 text-align 】テキストの配置位置を設定する【 text-decoration 】テキストに加えるで装飾を設定する【 text-underline-position 】テキストのアンダーライン位置を設定する【 text-shadow 】テキストのシャドー位置を設定する【 text-transform 】テキストの文字形態を設定する【 white-space 】要素内のホワイトスペースを設定する【 word-break 】テキストの自動改行の設定をする【 word-spacing 】単語間の隙間を指定【 letter-spacing 】文字間の隙間を指定【 text-justify 】文章右端空白にならないように、単語間・文字間のスペースを調整【 text-autospace 】表意文字（漢字）と非表意文字（半角英数字）の隙間を指定【 word-wrap 】テキストの自動改行の設定をする【 writing-mode 】縦書きを設定【 direction 】文章の方向を設定【 unicode-bidi 】単語の並びを設定【擬似要素】「:before」 - 文字の先頭にマークを表示する方法CSSプロパティ【カラー関連】
【linear-gradient】二色以上でグラデーションを作るカラー設定CSSプロパティ【アニメーション関連】
【 animation 】アニメーション操作をする方法【 transition 】変化をスムーズにスムーズにする方法【 opacity 】要素の透明度を設定する
【CSS】【 border 】「枠線（ボーダー）」を付ける方法
【CSS】
【 border 】プロパティ
「枠線（ボーダー）」を付ける方法
【 border 】プロパティ
「枠線（ボーダー）」を付ける方法
「CSS」で「枠線」を付けるには、
「border」関連のプロパティを使用する。
「border」プロパティは、
「枠線」の設定を一度にできるプロパティです。
「border」プロパティと「outline」プロパティの違いは、
・「border」プロパティは、線幅の分、要素の「幅」に影響を与える（線幅分＋要素の横幅）。
・「border」プロパティは、「上下左右」を個別に指定設定ができる。
という違いがある。
「border」プロパティと「outline」プロパティの違い
| border | outline | |
|---|---|---|
| 横幅 | 要素の横幅＋枠線幅 | 要素の横幅（枠線幅含む） |
| 上下左右の個別設定 | 可能 | 不可 |
INDEX
「CSS」で「枠線」を付ける「プロパティ」の種類
「CSS」で「枠線」を設定するプロパティは、
・border
・border-top
・border-bottom
・border-left
・border-right
・border-color
・border-color
・border-style
・border-width
・outline
・outline-color
・outline-style
・outline-width
などがあります。
「border」プロパティと「outline」プロパティの違いは、
・「outline」プロパティは、要素の「幅」に影響を与えない
・「outline」プロパティは、「上下左右」を個別に指定設定ができない
という違いがある。
「border」プロパティと「outline」プロパティの違い
| border | outline | |
|---|---|---|
| 横幅 | 要素の横幅＋枠線幅 | 要素の横幅（枠線幅含む） |
| 上下左右の個別設定 | 可能 | 不可 |
Back
「border」プロパティの使い方
「border」関連プロパティは、
「枠線」を指定するプロパティで、
上下左右を個別に指定するプロパティや、
同時に一括指定できるプロパティなどが用意されている。
一つ一つの設定値を個別に指定するプロパティもある。
「border」関連のプロパティは、
・border
・border-top
・border-bottom
・border-left
・border-right
・border-color
・border-style
・border-width
などがあり、
「border」プロパティは、
・border-color
・border-style
・border-width
の一括指定プロパティになる。
「border」関連プロパティの種類
| プロパティ | 説明 |
|---|---|
| border |
上下左右の枠線を一括指定するプロパティ。 枠線の「太さ」「線種類」「カラー」を一括指定できる。 |
| border-top |
枠線の上部部分だけを指定する一括指定プロパティ。 枠線の「太さ」「線種類」「カラー」を一括指定する。 |
| border-bottom | 枠線の下部分だけを指定するプロパティ。 |
| border-left |
枠線の左側部分だけを指定するプロパティ 枠線の「太さ」「線種類」「カラー」を一括指定する。 |
| border-right |
枠線の右側部分だけを指定するプロパティ 枠線の「太さ」「線種類」「カラー」を一括指定する。 |
| border-color |
枠線の「カラー」を指定する個別指定プロパティ。 |
| border-style |
枠線の「線種」を指定する個別指定プロパティ。 |
| border-width |
枠線の「太さ」を指定する個別指定プロパティ。 |
「border」関連プロパティの書式
「線種（border-style）」のデフォルト値は、「none」なので、
「線種（border-style）」を指定しないと、
枠線は表示されない。
border: 線種 太さ カラー;
border-top: 線種 太さ カラー;
border-bottom: 線種 太さ カラー;
border-left: 線種 太さ カラー;
border-right: 線種 太さ カラー;
border-color: カラー;
border-top-color: カラー;
border-right-color: カラー;
border-bottom-color: カラー;
border-left-color: カラー;
border-style: 線種;
border-top-style: 線種;
border-right-style: 線種;
border-bottom-style: 線種;
border-left-style: 線種;
border-width: 太さ;
border-top-width: 太さ;
border-right-width: 太さ;
border-bottom-width: 太さ;
border-left-width: 太さ;
グローバル値
border: inherit;border: initial;
border: unset;
「border」関連プロパティの値
| 値 | 説明 |
|---|---|
| 太さ（line-width） |
境界線の「太さ」を設定する。 指定がない場合は、既定値の「medium」になる。 border-width を参照してください。 |
| 線の種類（line-style） |
境界線の「線種」を設定する。 指定がない場合の既定値は、「none」になる。 |
| 線の色（color） |
境界線の「色（カラー）」を設定する。 指定がない場合のデフォルト値は、要素の「color」プロパティ値。 |
Back
