スタイルシートをホームページやブログに適用するためにはデザインを考えてページに組み込むことが必要です。
文字サイズや文字の背景色、ページ全体の背景色・画像などページ全体にスタイルを適用するものと部分的に適用するものとで使用するタグ要素が異なります。
そのタグや要素の記述方法について基本をしっかり習得しておくことが大事だと思います。種類がたくさんありますので覚えるのが大変ですが、基本的な数種類を覚えておくだけでもサイトを構築するために役立ちますし効率化が図れます。
慣れてくれば徐々に身に付いてくると思うので心配はいりません。完璧性を求めていてはサイト構築は程遠く先の先になってしまいます。マニュアルを見ながらでも先に進めていくことをお勧めします。
スタイルシートの基礎編 メニュー
- スタイルシートの基礎「文字の大きさを変える」「文字の色を変える」記述方法‐HTML・CSSを学ぶ
- スタイルシートの基礎「文字の太さを変える」「文字の種類を変える」記述方法‐HTML・CSSを学ぶ
- スタイルシートの基礎「文字の背景色を変える」「文字を斜体に変える」記述方法‐HTML・CSSを学ぶ
- スタイルシートの基礎「文字を囲む枠線を使用する」「枠線と文字の間に余白を設ける」記述方法‐HTML・CSSを学ぶ
- スタイルシートの基礎「文字に下線を引く」「下線にスタイルを適用する」記述方法‐HTML・CSSを学ぶ
- スタイルシートの基礎「リストを作成する」「リストにスタイルを適用する」記述方法‐HTML・CSSを学ぶ
- スタイルシートの基礎「画像を挿入する」記述方法‐HTML・CSSを学ぶ
- スタイルシートの基礎「挿入した画像の位置を決める、文字を回り込ませる」記述方法‐HTML・CSSを学ぶ
説明でプロパティと値については次のページで説明しています。
文字の大きさを変える
文字のサイズを大きくしたり、小さくしたりします。
font-size: 120%; 、font-size: 80%; など
ブロガーBloggerでは文字の大きさを変えるためのツールが用意されています。
ブロガーBloggerのツールを使用して文字の大きさを変える方法
- 文章の中で文字の大きさを変えたい部分の文字を選択します。
「文字を入力します。」で説明します。
「文字を入力します」の先頭部分からマウスを左クリックして、クリックしたまま最後の「します。」までカーソルを移動させると文字を選択できます。
選択した個所は青く色付けされています。
- 文字を選択した状態でツールバーの「フォントサイズ」をクリックします。文字サイズ「小」と文字サイズ「大」で変更しています。
「文字を入力します。」、「文字を入力します。」
文字の色を変える
文字に色を付けます。他の文字と区別できます。
color: blue; 、color: red;など
文字色を色コードで指定する。詳細な色が指定できます。
color: #ffccff; 、color: #ffccff; 、#99ccff など
主なカラーコードは以下
black＝#000000、gray＝#808080、silver＝#c0c0c0、white＝#ffffff、blue＝#0000ff、navy＝#000080、teal＝#008080、green＝#008000、lime＝#00ff00、aqua＝#00ffff、yellow＝#ffff00、red＝#ff0000、fuchsia＝#ff00ff、olive＝#808000、purple＝#800080、maroon＝#800000
ネット上で色検索・選択ができます。
文字のカラーコードを選択できます。スライダーを移動させ好みの色を選択します。こちら
ブロガーBloggerでは文字の色を変えるためのツールが用意されています。
ブロガーBloggerのツールを使用して文字の色を変える方法
- 文章の中で文字の色を変えたい部分の文字を選択します。
「文字を入力します。」で説明します。
「文字を入力します」の先頭部分からマウスを左クリックして、クリックしたまま最後の「します。」までカーソルを移動させると文字を選択できます。
選択した個所は青く色付けされています。 - 文字を選択した状態でツールバーの「テキストの色」をクリックします。テキストの色の選択画面になりますので好みの色を選択します。blueとredで変更しています。
「文字を入力します。」、「文字を入力します。」
0 件のコメント:
コメントを投稿