スタイルシートをホームページやブログに適用するためにはデザインを考えてページに組み込むことが必要です。
文字サイズや文字の背景色、ページ全体の背景色・画像などページ全体にスタイルを適用するものと部分的に適用するものとで使用するタグ要素が異なります。
そのタグや要素の記述方法について基本をしっかり習得しておくことが大事だと思います。種類がたくさんありますので覚えるのが大変ですが、基本的な数種類を覚えておくだけでもサイトを構築するために役立ちますし効率化が図れます。
慣れてくれば徐々に身に付いてくると思うので心配はいりません。完璧性を求めていてはサイト構築は程遠く先の先になってしまいます。マニュアルを見ながらでも先に進めていくことをお勧めします。
スタイルシートの基礎編 メニュー
- スタイルシートの基礎「文字の大きさを変える」「文字の色を変える」記述方法‐HTML・CSSを学ぶ
- スタイルシートの基礎「文字の太さを変える」「文字の種類を変える」記述方法‐HTML・CSSを学ぶ
- スタイルシートの基礎「文字の背景色を変える」「文字を斜体に変える」記述方法‐HTML・CSSを学ぶ
- スタイルシートの基礎「文字を囲む枠線を使用する」「枠線と文字の間に余白を設ける」記述方法‐HTML・CSSを学ぶ
- スタイルシートの基礎「文字に下線を引く」「下線にスタイルを適用する」記述方法‐HTML・CSSを学ぶ
- スタイルシートの基礎「リストを作成する」「リストにスタイルを適用する」記述方法‐HTML・CSSを学ぶ
- スタイルシートの基礎「画像を挿入する」記述方法‐HTML・CSSを学ぶ
- スタイルシートの基礎「挿入した画像の位置を決める、文字を回り込ませる」記述方法‐HTML・CSSを学ぶ
説明でプロパティと値については次のページで説明しています。
文字に下線を引く
構成文の重要な文字に下線を引くことでその文字を目立たせる効果があります。プロパティと値の部分になります。
text-decoration: underline; 、または border-bottom: solid;
「border-bottom: solid;」の方が使い勝手が良いので通常はこちらを使用しています。
p要素に直接スタイルを記述する
<p style="text-decoration: underline;">文字を入力します。</p>
文字を入力します。
ブロガーBloggerでは文字に下線を引くためのツールが用意されています。
ブロガーBloggerのツールを使用して文字に下線を引く方法
文章の中で文字に下線を引く部分の文字を選択します。
「文字を入力します。」で説明します。
「文字を入力します」の先頭部分からマウスを左クリックして、クリックしたまま最後の「します。」までカーソルを移動させると文字を選択できます。
選択した個所は青く色付けされています。
文字を選択した状態でツールバーのUマーク「下線」をクリックします。クリックするだけで文字に下線を引くことができます。
「文字を入力します。」
文字の下線にスタイルを適用する
下線を太くしたり、破線にしたり、二重線にしたり、色を変えたりすることでイメージが変わり、さらに強調することができると思います。
プロパティと値の部分になります。
文字の下線を太くする
border-width:2px;
文字の下線を破線にする
border-bottom：dotted;
文字の下線を二重線にする
border-bottom: double;
文字の下線の色を変える
text-decoration-color：red; 、text-decoration-color: blue; など
下線に色々なスタイルを適用する
- <p style="text-decoration: underline; text-decoration-color：red;">文字を入力します。</p>
文字を入力します。
- <p style="border-bottom: double; border-color: blue;">文字を入力します。</p>
- <div><span style="border-bottom: solid; border-color: blue;">文字を入力します。</span>さらに文字が続きます。</div>文字を入力します。さらに文字が続きます。
<p style="border-bottom: double; border-color: blue;">文字を入力します。</p>
文字を入力します。
- <p style="border-bottom: solid; border-color: red; border-width: 2px;">文字を入力します。</p>
文字を入力します。
- <p style="border-bottom: solid; border-bottom: dotted; border-color: red; border-width: 2px;">文字を入力します。</p>
文字を入力します。
文字を入力します。
0 件のコメント:
コメントを投稿