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】「word-spacing」プロパティ - 単語間の隙間を指定
【CSS】
「word-spacing」プロパティ - 単語間の隙間を指定
「word-spacing」プロパティ - 単語間の隙間を指定
word-spacing - 単語間の隙間を指定
サンプルコード
word-spacing: normal;
word-spacing: 2em;
word-spacing: 200%;
word-spacing・letter-spacingの値一覧
| normal | 自動調整。 |
| length | 数値で指定。 |
| percentage | 通常空白の幅を 100% としたパーセントで指定。 |
Back
letter-spacing - 文字間の隙間を指定
text-justify - 文章右端空白にならないように、単語間・文字間のスペースを調整
サンプルコード
text-justify: auto;
text-justify: none;
text-justify: inter-word;
text-justifyの値一覧
| auto | 自動調整。(C3/e5.5) |
| none | 調整なし。(C3) |
| inter-word | 単語間のみで調整。 |
| inter-ideograph | 単語間と文字間で調整。日本語 |
| inter-cluster | 単語間と文字間で調整。アジア圏 |
| kashida | 単語間と文字間で調整。アラビア語など |
| newspaper | 単語間と文字間で調整。英語圏など。 |
| distribute | 単語間と文字間(筆記体で繋がった文字を除く)で調整。タイ語など |
| distribute-all-lines | 単語間と文字間で調整。段落の最後の行も調整。 |
| distribute-center-last |
Back
text-autospace - 表意文字（漢字）と非表意文字（半角英数字）の隙間を指定
サンプルコード
text-autospace: none;
text-autospace: ideograph-alpha;
text-autospace: ideograph-numeric;
text-autospace: ideograph-parenthesis;
text-autospace: ideograph-space;
text-autospace: ideograph-space ideograph-numeric ideograph-parenthesis ideograph-space;
text-autospaceの値一覧
| none | 隙間なし。 |
| ideograph-alpha | 表意文字とアルファベットの間に隙間を作成。 |
| ideograph-numeric | 表意文字と数字の間に隙間を作成。 |
| ideograph-parenthesis | 表意文字と括弧の間に隙間を作成。 |
| ideograph-space | 表意文字と表意文字の間の隙間を広く。 |
Back
text-kashida-space - アラビア語などのテキスト配置を最善化
word-wrap - テキストの自動改行の設定をする
writing-mode - 縦書きを設定
サンプルコード
writing-mode: lr-tb;
writing-mode: tb-rl;
writing-mode: horizontal-tb;
writing-mode: vertical-rl;
writing-mode: vertical-lr;
writing-modeの値一覧
| lr-tb | 横書き(左→右)で上→下に改行します。left to right, top to bottom。 |
| tb-rl | 縦書き(上→下)で右→左に改行します。top to bottom, right to left。 |
| horizontal-tb | 横書きで上→下に改行します。 |
| vertical-rl | 縦書きで右→左に改行します。 |
| vertical-lr | 縦書きで左→右に改行します。 |
Back
direction - 文章の方向を設定
サンプルコード
direction: ltr;
direction: rtl;
directionの値一覧
| ltr | left to right の略。左から右。英語、日本語など。 |
| rtl | right to left の略。右から左。アラビア語など。 |
Back
unicode-bidi - 単語の並びを設定
サンプルコード
unicode-bidi: normal;
direction: rtl;
unicode-bidi: embed;
direction: rtl;
unicode-bidi: bidi-override;
unicode-bidiの値一覧
| normal | 何も指定しないのと同様の動作。 |
| embed | 単語の並びを direction の方向に並び替え。ただし、単語中の文字は適用外。 |
| bidi-override | 単語の並び、単語中の文字の並びを direction の方向に並び替え。 |
| isolate | 未稿。 |
| plaintext | 未稿。 |
Back
