タイトルを複数の方法で表示する(HTMLとCSS)

はじめに タイトルを2つのパターンで表示
以下に、事例1と事例2でタイトルに使える方法を紹介します。
事例1と事例2は同じに見えます。見え方は実際に同じはずですが、ソースは異なります。
以下の部分で、各事例のソースを見ながら説明します。

※以下に登場する事例のテキスト部分はわざと少しづつ変えてあります。


第1部 事例1CSSと事例2HTMLの2つの方法を比較
事例1はCSSを使って表現したものです。
事例2はHTMLを使って表現したものです。

事例1 まず、CSSでスタイルを記述すると

事例1 CSSで記述(h2.blue3)ここにテキストが入る



 へーなるほどね!

事例2 事例1と同じものをCSSを使わずに、HTMLだけで記述すると

事例2 HTMLで記述(div style=" ")ここにタイトルが入る


 面白そうね! で、何が違うの?

html-1832991_1920.png
BoskampiによるPixabayからの画像


第2部 事例1と事例2の違い
事例1と事例2の背景色を取り払うと、上のタイトル「事例1と事例2の違い」と全く同じデザインになります。
これは私がいつも使用しているタイトルのスタイルになります。

事例1の方は、ブログのページのどこかに1か所に<style>~</style>の内容を書いておくだけで、何度でも使えます。
事例2の方は、ブログで複数回使う場合はその都度<div>~</div>の内容を書く必要があります。

私はもっぱら、事例2の方法でタイトル(見出し)を書いています。
コピーするだけなので手間はかかりませんが原始的な方法です。背景色もなしにしています。


第3部 事例1のソースは・・・
ソースは以下のとおりです。
注意:ここに表示するために、ソースのタグの左側の「<」は大文字で記述していますが、実際に使用する際は小文字です。注釈も書いておきますが不要な部分です。
特に説明を省略していますが、以下で登場するソース部分は全て同様です。
<!-- このような部分が注釈の部分です。 -->

<HTML>の部分(この部分を記述するだけで何度でも使える)
<h2 class="blue3">事例1 CSSで記述(h2.blue3)ここにテキストが入る</h2>

<CSS>の部分(どこかに1か所記述するだけ)
<style>
h2.blue3   <!-- h2に「.blue3 」のスタイルを適用。 -->
{
padding-left: 10px;  <!-- 左側に10ピクセルの余白を取る。 -->
font-weight: bold;  <!-- 文字を太字にする。 -->
font-size: 130%; color: #000000;  <!-- 文字サイズを130%にし、色は黒。 -->
background: #e5e5e5;  <!-- 背景色を明るいグレイに。 -->
border-bottom: solid 2px #4c6cb3;  <!-- 下側に2ピクセルの実線を引く、色は青系。 -->
border-left: 10px solid #4c6cb3;  <!-- 左側に10ピクセルの実線を引く、色は青系。 -->
}
</style>


事例1のソースでは「h2」に「.blue3」というスタイルを適用させていますが、直接<div>に「.blue3」というスタイルを適用させる方が簡単かもしれません。
この場合は、
<CSS>の方は、「h2.blue3」 → 「div.blue3」に変え、
<HTML>の方では「<h2 class="blue3">」 → 「<div class="blue3">」に、「</h2>」→ 「</div>」に変えます。

そうすると、以下のようになりますが、・・・同じですね。
事例3 divバージョン/ここにテキスト/




第4部 CSSシートファイルに記述する場合
また、別の独立したCSSシートファイルに記述する場合は、上記のスタイルの中身の
.blue3   /* .blue3という名のスタイル。 */
{
padding-left: 10px;  /* 以下は上と同じ内容です。 */
font-weight: bold;
font-size: 130%; color: #000000;
background: #e5e5e5;
border-bottom: solid 2px #4c6cb3;
border-left: 10px solid #4c6cb3;
}
をスタイルシートファイルのどこかに記述(コピーペ)すればOKのはずです。(実際に試していません)

これをHTMLで使用する際は、「<div class="blue3">テキスト</div>」とか「<h2 class="blue3">テキスト</h2>」と、タグの中にclass="blue3"を記述してスタイルを呼び出して使用します。


第5部 ということは・・・
別の独立したスタイルシートファイルに「.blue3 」以下を記述すれば、OKということは、
ブログのページに記述する場合も同様なことが言えるはずです。

つまり、<style>~</style>の間に記述するときも、「.blue3 」以下を記述すればOKということになるはずです。
実際にやってみましょう。
事例4 blue4バージョンCSSで記述★ここはテキスト★

あ、大丈夫ですね。
スタイル名は「.blue4」と3 → 4に変えてあります。
HTMLは<div class="blue4">事例4 blueバージョンCSSで記述★ここはテキスト★</div>です。

このソースは、
<style>
.blue4   <!-- この部分を「div.blue3 」から → 単に「.blue4 」に変えた。 -->
{
padding-left: 10px;  <!-- 以下は変更なし。 -->
font-weight: bold;
font-size: 130%; color: #000000;
background: #e5e5e5;
border-bottom: solid 2px #4c6cb3;
border-left: 10px solid #4c6cb3;
}
</style>

このようにすることで、<div>とか<p>や<h1>など色々なタグの中で「class="スタイル名"」(スタイル名はblue4などのこと)を記述してスタイルを適用させればOKということになって、使い道が広がりますね。
「div.blue3 」とか「h2.blue3」というスタイル名にすると、使用範囲が前者は<div>専用に、後者は<h2>専用に狭まってしまいますね。

では<div>に変えて<p>でもやってみましょう

事例6 pバージョンCSSで記述・ここはテキストの部分です

ちゃんと同じように表示されました。
このHTMLは
<p class="blue4">事例6 pバージョンCSSで記述・ここはテキストの部分です</p>です。

もちろんh1でもOKのはずです。

事例7 h1バージョンCSSで記述~ここにテキストが入る

ちゃんと同じように表示されました。
このHTMLは
<h1 class="blue4">事例7 h1バージョンCSSで記述~ここにテキストが入る</h1>です。


本来なら、途中経過の話は飛ばして結論だけ書けばよいのかもしれませんが、わざと途中経過を入れたのは、このように工夫することで色々変化させて、合理的な方法を見つけられることが出来る・・・ということを知っていただくためには、途中経過もあった方がいいと思ったからです。さらに、同じ内容を表示させるのに手段(記述方法)は1つだけではない、ということも分かるかと思います。


第6部 事例2のソースは・・・
すっかり寄り道してしまいましたが、事例2のソースです。

<div style="padding-left: 10px;
font-weight: bold;
font-size: 130%; color: #000000;
background: #e5e5e5;
border-bottom: solid 2px #4c6cb3;
border-left: 10px solid #4c6cb3;
">事例2 HTMLで記述(div style=" ")ここにタイトルが入る</div>

分かりやすいように数行に分解して記述しましたが、実際には以下のように続けて記述しています。
<div style="padding-left: 10px;font-weight: bold;font-size: 130%; color: #000000;background: #e5e5e5;border-bottom: solid 2px #4c6cb3;border-left: 10px solid #4c6cb3;">事例2 HTMLで記述(div style=" ")ここにタイトルが入る</div>
padding-left: 以下の記述内容は、今まで紹介した内容と同じですが、その前の「<div style="」の部分と、最後の「">事例2 HTMLで記述 ここにタイトルが入る</div>」の部分が事例1と異なっています。

事例1ではHTMLとCSSの部分に分かれていましたが、事例2ではHTMLしかない(HTMLとCSSとを合体してHTMLの中にCSS部分を記述している)ということになります。


さいごに
今回のブログのテーマ「タイトルを複数の方法で表示する(HTMLとCSS)」の説明は以上です。
予期しませんでしたが長文になってしまいました。
記事を書きながら途中何度も中断(犬の散歩、食事、風呂、休憩など)したので、あれっ、今どこの部分を書いていたんだっけ?などと自分でも場所が分からなくなり、皆様にはどのように伝わるのか分かりませんが、参考になればと思います。

最後までお読みいただきありがとうございます。

ブログ気持玉

クリックして気持ちを伝えよう!

ログインしてクリックすれば、自分のブログへのリンクが付きます。

→ログインへ

なるほど(納得、参考になった、ヘー)
驚いた
面白い
ナイス
ガッツ(がんばれ!)
かわいい

気持玉数 : 0

この記事へのコメント

  • ゆの

    わけい様
    こんにちは(*‘ω‘ *)
    データベース化しておくと(大変な手間ですが)
    あとの検索が楽ですよね
    わけい様はプログラム関連のお仕事をされているのですか
    私はdivになじみがあります~
    2019年09月12日 17:56
  • わけい

    ゆのさんへ
    コメントどうもありがとうございます。
    昔、コンピュータがやっと職場に導入されたころ、仕事ではないですが無料奉仕で仕事の手抜きをするために、私の担当の事務をコンピュータでやらせました。
    仕事が変わってもそのようなことをよくやりました。おかげで、定時には帰ることが出来ました。
    その内に、色々なプログラムが販売されるようになってからは、自分でプログラムを作らなくても利用すればいいようになったので、プログラム作りはやめました。
    ただその後も、自主的に市販のプログラムを使った事務のデータベース化や事務計算処理などに活用したので、残業とは無縁でした。
    HTMLとかCSSなどはない時代でしたが、おそらくその頃の経験がある程度何らかの形で役に立っているのかもしれませんね。

    ※職場にコンピュータが無い時代に自費で購入して、本を読んで勉強しました。仕事ではなく遊びです。なので、職場に導入されたときに、使える人は私しかいなかったので、独占状態で使えました。
    昭和の時代ですが、職場で私が自主的に講師になって、コンピュータの仕組みや、データがどのようにしてどの場所に保存されるのか、コンピュータはそのデータをどのようにしてメモリのどの場所に読み込むのかなどを資料を作って話しましたが、おそらく理解できた人はいなかったと思います。

    2019年09月12日 19:18
  • yasuhiko

    なるほど…と知ったかぶりして、
    コメント書こうと思ったんですが、無理しても
    後が続きません。とりあえず、記事が書ければ
    それでいいかなと思ってます。
    2019年09月12日 21:17
  • わけい

    yasuhikoさんへ
    コメントどうもありがとうございます。
    私のブログは、以前は写真主体でしたが容量をオーバーしたせいかどうかは定かではないですが、古い記事の写真が削除されてしまいました。
    (写真が削除された残った記事は削除しました。)
    それ以降は、容量を増やさないように基本的に写真は1枚に留めて、文章に力を入れました。
    しかし文章だけでは、変化に乏しいので少しずつ工夫するようにしています。
    今回は、HTMLやCSSを色々使ってみたいけど、いまいち本やネットを見ても分からないところがある・・・と感じている人向けに、自分で実際に感じた疑問点を踏まえた上で、参考になればと書きました。
    2019年09月12日 21:48
  • tor

    こんばんは。
    今回は本文を読んだ後
    コメントの返信に反応してしまいました。
    なるほどなと思いました。
    利用できるものはどんどん使って
    楽をしたいものですね。
    私も同感です。
    2019年09月12日 22:45
  • winga

    おはようございます。
    参考になり、私には大変助けになります。
    そう思う方はたくさんおられますから、皆さんにとって師匠ですね。
    もちろん私には大師匠です。
    保存しなきや❗
    2019年09月13日 09:18
  • わけい

    torさんへ
    コメントどうもありがとうございます。
    つい先ほどまで、Wi-Fiに繋がらず困っていました。8月末からのWindows10アップデート後に3回連続で同じ状況です。
    一応、過去2回の対応状況はメモっておいたのですが、同じことをやっても回復せず、その度に少しずつ対応が異なっており、アップデートのシステムがWi-Fiの接続を消しているのではないかと思っているのですが、ネットで調べても同様な状況の方の情報がないないため、現在アップデート恐怖症になっています。
    ところで、本文読んでいただいてありがとうございます。
    おそらく分かりにくい説明かと思います。
    自分で読んでも改善の余地があると感じています。
    でも今は別なことに取り組んでいるので、少し時間を置いてから書き直そうと思っています。
    どの部分に反応されたかは分かりませんが、おそらく「仕事の手抜き」などの楽をして定時には帰るなどの記述に関してかと思います。
    残業すると手取りは増えますが、自分の趣味が犠牲になってしまいます。
    ほどほどの生活できる程度の給料があれば、それ以上は望まずに自分の時間を大切にしたいと、昔から思っていました。
    しかし楽をするためには、工夫しないと楽は出来ません。成果を出さずに単に楽だけするとそれはサボり・怠慢などになるので、人よりも成果を出してしかも楽をするためにその陰では最初に苦労をする、しかし全体として「楽する+苦労する=成果を出す+楽になる」になるように常に考えていました。
    「仕事人間」「仕事一筋」などの言葉は嫌いでした。
    あっ、それからtorさんのコメントを一か所修正してみます。
    「こんばんは。」の前に絵文字を入れてみます。これで修正が出来ることを見ていただきます。ウェブリブログ改善されたんですね。

    2019年09月13日 11:11
  • わけい

    wingaさんへ
    コメントどうもありがとうございます。
    応援いただき、さらに保存までしていただき恐縮です。
    これからも応援していただけるよう精進します。

    ※なお、wingaさんの名前にリンクが付いていると訪問する際にとても楽なのですが、ぜひとも「ホームーページアドレス」欄の入力をお願いします。
    2019年09月13日 11:22