2021年4月12日月曜日

スタイルシートの基礎「文字の背景色を変える」「文字を斜体に変える」記述方法‐HTML・CSSを学ぶ

  スタイルシートをホームページやブログに適用するためにはデザインを考えてページに組み込むことが必要です。


文字サイズや文字の背景色、ページ全体の背景色・画像などページ全体にスタイルを適用するものと部分的に適用するものとで使用するタグ要素が異なります。


そのタグや要素の記述方法について基本をしっかり習得しておくことが大事だと思います。種類がたくさんありますので覚えるのが大変ですが、基本的な数種類を覚えておくだけでもサイトを構築するために役立ちますし効率化が図れます。


慣れてくれば徐々に身に付いてくると思うので心配はいりません。完璧性を求めていてはサイト構築は程遠く先の先になってしまいます。マニュアルを見ながらでも先に進めていくことをお勧めします。


説明でプロパティと値については次のページで説明しています。

  1. スタイルシートの記述「セレクタ、クラス名、プロパティ、値」の記述方法‐HTML・CSSを学ぶ

  2. セレクタを省略「セレクタ、クラス名、プロパティ、値」の記述方法‐HTML・CSSを学ぶ


文字の背景色を変える


文字の背景色を変えると強調したり目立たせることができます。プロパティと値の部分になります。

background-coloe: yellow; 、background-coloe: lime; など


ブロガーBloggerでは文字の背景色を変えるためのツールが用意されています。


ブロガーBloggerのツールを使用して文字の背景色を変える方法


文章の中で文字の背景色を変えたい部分の文字を選択します。


「文字を入力します。」で説明します。


「文字を入力します」の先頭部分からマウスを左クリックして、クリックしたまま最後の「します。」までカーソルを移動させると文字を選択できます。


選択した個所は青く色付けされています。

文字を選択します

文字を選択した状態でツールバーの鉛筆マーク「テキストの背景色」をクリックします。


色の選択画面が表示されるので文字色に合った好みの背景色を選択します。文字が引き立つように選択すると良いと思います。

テキストの背景色


文字を入力します。」  「色の選択」でyellowを選択。

「色の選択」でyellowを選択


文字を斜体に変える


文字を斜体に変えるとサイトの持つイメージが変わってくると思います。


一部分に適用させる場合や全体に適用させる場合が考えられますが手紙ならともかく、ホームページやブログでは一部分のみの適用に留めておきましょう。


プロパティと値の部分になります。


font-style: italic;


ブロガーBloggerでは文字を斜体に変えるためのツールが用意されています。


ブロガーBloggerのツールを使用して文字を斜体に変える方法


文章の中で文字を斜体に変えたい部分の文字を選択します。


「文字を入力します。」で説明します。


「文字を入力します」の先頭部分からマウスを左クリックして、クリックしたまま最後の「します。」までカーソルを移動させると文字を選択できます。


選択した個所は青く色付けされています。

文字を選択します

文字を選択した状態でツールバーの「I斜体」をクリックします。クリックすると文字が斜体表示になります。

「I斜体」をクリック


「文字を入力します。」


残念ながら文字の表示は変わりませんでした(´;ω;`)。


文字の種類変更でも同じような状態でしたが、これはブログのテーマで基本的なスタイルが定められていて、文字が標準に指定されていると思われます。


調べてみればいいのですが、そこまでの余裕がないので次回に検証してみたいと思います。


0 件のコメント:

コメントを投稿

おすすめドリンク

楽天
 
Amazon

私にとって記念すべきブログ投稿となります

記念すべきブログ投稿 ブログ記事を書いている時、なぜか「思えば、遠くへきたもんだ~♪」と昔懐かしい歌の歌詞を口ずさんでいました。現在では、「海援隊」と言うグループ名は知らなくとも「武田鉄矢」ならご存じですよね。 武田鉄矢さんが確か3人でユニットを組んで活動しておられた時の歌なので...