スタイルシートをホームページやブログに適用するためにはデザインを考えてページに組み込むことが必要です。
文字サイズや文字の背景色、ページ全体の背景色・画像などページ全体にスタイルを適用するものと部分的に適用するものとで使用するタグ要素が異なります。
そのタグや要素の記述方法について基本をしっかり習得しておくことが大事だと思います。種類がたくさんありますので覚えるのが大変ですが、基本的な数種類を覚えておくだけでもサイトを構築するために役立ちますし効率化が図れます。
慣れてくれば徐々に身に付いてくると思うので心配はいりません。完璧性を求めていてはサイト構築は程遠く先の先になってしまいます。マニュアルを見ながらでも先に進めていくことをお勧めします。
スタイルシートの基礎編 メニュー
- スタイルシートの基礎「文字の大きさを変える」「文字の色を変える」記述方法‐HTML・CSSを学ぶ
- スタイルシートの基礎「文字の太さを変える」「文字の種類を変える」記述方法‐HTML・CSSを学ぶ
- スタイルシートの基礎「文字の背景色を変える」「文字を斜体に変える」記述方法‐HTML・CSSを学ぶ
- スタイルシートの基礎「文字を囲む枠線を使用する」「枠線と文字の間に余白を設ける」記述方法‐HTML・CSSを学ぶ
- スタイルシートの基礎「文字に下線を引く」「下線にスタイルを適用する」記述方法‐HTML・CSSを学ぶ
- スタイルシートの基礎「リストを作成する」「リストにスタイルを適用する」記述方法‐HTML・CSSを学ぶ
- スタイルシートの基礎「画像を挿入する」記述方法‐HTML・CSSを学ぶ
- スタイルシートの基礎「挿入した画像の位置を決める、文字を回り込ませる」記述方法‐HTML・CSSを学ぶ
説明でプロパティと値については次のページで説明しています。
リストを作成する
構成文の項目をリスト表示したいときに「list-style-typeプロパティ」を使用します。リストの先頭に黒丸●や白丸◯、数字などの基本的な表示からリストマークにスタイルを適用して色や形、数字の種類など様々なデザインを適用する方法があります。
ul要素とol要素の違い
下記に出てくるul要素とol要素の違いは、リストマークの違いで、ul要素は黒丸●や白丸◯などの記号を表す時に使用し、ol要素は数字やアルファベットを表す時に使用します。
リストを使用した基本的なHTMLソース
基本的なリストマークは黒丸●です。
<html>
<head>
<title>ここにタイトルを入力します</title>
</head>
<body>
<ul> /*基本的なリストマーク*/
<li>リスト項目を入力します1</li>
<li>リスト項目を入力します2</li>
<li>リスト項目を入力します3</li>
</ul>
<ol> /*数字リストマーク*/
<li>リスト項目を入力します1</li>
<li>リスト項目を入力します2</li>
<li>リスト項目を入力します3</li>
</ol>
</body>
</html>
リストマークにスタイルを適用する
リストマークにスタイルを適用して四角□・■や白丸◯、アルファベットの大文字・小文字、数字の種類、リストマークなしなどに変更できます。
リストマークにスタイルを適用した基本的なHTMLソース
スタイルを適用する場合、スタイルCSSをHTMLに直接記述する方法とスタイルCSSを<head>～</head>の間に記述してそのスタイルシートをHTMLに読み込んで適用する場合に分けて説明します。プロパティと値の部分になります。
HTMLの要素に直接スタイルを記述する基本的なHTMLソース
<ul type:"disk"> /*基本的なリストマーク*/
<li>リスト項目を入力します1</li>
<li>リスト項目を入力します2</li>
<li>リスト項目を入力します3</li>
</ul>
<ol type:"decimal"> /*数字リストマーク*/
<li>リスト項目を入力します1</li>
<li>リスト項目を入力します2</li>
<li>リスト項目を入力します3</li>
</ol>
スタイルシートCSSを<head>～</head>内から読み込んでスタイルを適用する基本的なHTMLソース
<html>
<head>
<title>ここにタイトルを入力します</title>
<!--ここにスタイルを記入します-->
ul.lk1 li {
list-style-type: circle; /*リストマークを白丸◯にする*/
color: blue; /*リストマークの色を指定*/
}
ol.ln1 li {
list-style-type: decimal; /*リストマークを数字にする*/
color: blue; /*リストマークの数字の色を指定*/
}
<!--ここでスタイルを終了します-->
</head>
<body>
<ul class="lk1"> /*リストマークにスタイルを適用*/
<li>リスト項目を入力します1</li>
<li>リスト項目を入力します2</li>
<li>リスト項目を入力します3</li>
</ul>
<ol class="ln1"> /*数字リストマークにスタイルを適用*/
<li>リスト項目を入力します1</li>
<li>リスト項目を入力します2</li>
<li>リスト項目を入力します3</li>
</ol>
</body>
</html>
リストマークの種類
list-style-typeプロパティの値の部分になります。
list-style-type: none /*リストマークなし*/
ul要素（記号）
list-style-type: disk; /*黒丸●*/
list-style-type: circle; /*白丸◯*/
list-style-type: square; /*四角□*/
ol要素（数字）
list-style-type: lower-alpha; /*アルファベット小文字*/
list-style-type: upper-alpha; /*アルファベット大文字*/
list-style-type: decimal; /*数字１０進数*/
ブロガーBloggerでは構成文の項目をリスト表示するためのツールが用意されています。リストマークへのスタイルは適用できませんのでスタイルシートCSSで適用してください。
ブロガーBloggerのツールを使用し構成文の項目をリスト表示する方法
文章の中で構成文の項目をリスト表示する部分にカーソルを持っていきます。
ブロガーBloggerのツールバーで「その他のオプション」をクリックします。
さらにツールバーが表示されるので、通常の箇条書き（リストマークは黒丸●）で表示したいときは「箇条書き」を選択してクリックします。
通常の文章とは一段下がった位置で黒丸●が表示されるのでその後にリストを入力していきます。キーボードの「エンターEnter」で次の黒丸●が表示され続けてリストを入力していきます。
- 「リスト項目文字を入力します」
（改行しました）
リスト内で改行したいときは、キーボードの「シフトshift」キーを押した状態で「エンターEnter」キーを押すと改行されます。
番号リストで表示させたいときは「番号付きリスト」を選択してクリックします。入力方法は上記「箇条書き」と同じです。
- 「リスト項目文字を入力します」
（改行しました） - 「リスト項目文字を入力します」
0 件のコメント:
コメントを投稿