HTML本文にCSSを書く

CSSを記述する場所は
スタイルシート(CSS)は、通常の記述方法は以下の3つあります。

① HTMLファイル中のhead部分にstyle要素をまとめて記述する
② 別のスタイルシートファイルにまとめて記述する
③ HTMLタグの中にstyle属性を使って直接記述する
①は現在ウェブリブログでは出来ません(そのページだけに反映)
②はウェブリブログの基本的な方法です(1箇所に記述することでブログの全てのページに反映)
③はウェブリブログで使用できます。(そのページの使用部分に反映)

※スタイルシートのCSSは「Cascading Style Sheets」の略です。

今回ご紹介したいと考えているのは、本来なら①or②に記述すべきCSSを直接HTMLファイル中のbody部分にstyleタグを使って記述してしまう方法で、③のstyle属性とも異なる(style属性でなくstyleタグそのもの)という試みです。
③の拡張版(の④の方法)とも言えると思います。(そのページだけに反映)

notepad-3299127_1920.jpg
DarkWorkXによるPixabayからの画像

実例です、2019/08/23に公開した記事ですが、CSSは本文(body部分)に記述しています。
では、その実例(該当部分のみ)を以下で見てみましょう。

(実例見本)下書きを新しいファイル名で公開する方法

  •  1 「下書き」をコピーする(旧記事)
  •  2 「記事を書く」をクリック(新記事)
  •  3 そこ(新記事)に貼り付けて、新記事を完成させる
  •  4 「保存」(=公開)する


  • 上のソースは
    小見出し「下書きを新しいファイル名で公開する方法」の下に記述されているHTMLとCSSのソースは、次のようになっています。

    ※以下がソースです。
    ソースが表示されるようにタグの左側の「<」は全角にしてありますが、実際に使用する場合は半角です。

    <div class="box_w">
    <li> 1 「下書き」をコピーする(旧記事)</li>
    <li> 2 「記事を書く」をクリック(新記事)</li>
    <li> 3 そこ(新記事)に貼り付けて、新記事を完成させる</li>
    <li> 4 「保存」(=公開)する</li>
    </div>

    <style>
    .box_w{ padding: 8px 19px; margin: 2em 0; color: #2b2b2b; background: #cde7ff; border-top: solid 5px #5889df; border-bottom: solid 5px #5889df; }
    .box_w p { margin: 0; padding: 0; }
    </style>


    上部の<div>~</div>の部分がHTMLの部分です。
    下部の<style>~</style>の部分がCSSの部分で、独立したスタイルシートにそのまま記述してもOKな内容です。

    いかがでしたか?

    色は、文字色「#2b2b2b」、背景色「#cde7ff」、上下線色「#5889cf」に設定していますが、この部分を16進法の6桁の数値(#000000~#FFFFFFの範囲)で書き直すと、いろいろな色になります。
    ※参照:「画像の持つ色情報

    またCSSスタイルの名前を「box_w」としましたが、線の太さや色などを変えたときに、例えば「box7」「box_b」「boxblue」など任意の名前に変更できます。ただし単に「box」とするのは、すでに別に記述されているCSSで使用されている可能性があり、予期しない場所が変更される可能性がありますので避けたほうが良さそうです。


    この方法は、ブログのそのページにしか適用されないため、ブログの他のページには影響しません。 しかし、うまくいく場合もありますがレイアウトが崩れる場合があります。
    したがって、ブログで使用しているテンプレートデザインのレイアウトに依存するのだと思います。

    また、この方法はウェブリブログ以外のブログでも共通で使えます(orレイアウトが崩れる場合あり)。

    以上、参考になればと思い掲載しました。

    ブログ気持玉

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

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

    →ログインへ

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

    気持玉数 : 0

    この記事へのコメント

    • ゆの

      わけい様
      こんにちは(*^-^*)

      CSS編集・・・難しいアルファベットの並びで
      いつも(。´・ω・)?です~
      スタイルシート?使いこなせたら便利なのかなぁ
      と思いつつ
      アナログ人間、ちんまり進んでいます
      わけい様の記事は
      永久保存版の取説です(*‘ω‘ *)
      2019年09月05日 17:57
    • わけい

      ゆのさんへ
      コメントどうもありがとうございます。
      「CSS」という言葉は分からなくても、試しに小見出し「このソースは」の青い細線の囲みの部分をコピーして、ゆのさんのブログの本文にコピーして貼り付けてみてください。
      もちろん①<div>~</div>の間の部分はゆのさんの言葉に置き換えてです(こんにちわ!などの短い文でOKです)、②「< >」の左側の「<」の部分は全角で入力してありますので、半角にしてください。(半角にした途端にソースの記述は表示されなくなります。もし変な表示になったとすると、どこかに半角にしそこなった箇所があるはずです。)
      ③ ①と②以外の部分はわけが分からなくてもそのままでOKです。
      朝顔の栽培より簡単だと思います。

      2019年09月05日 18:22
    • わけい

      ポジティブオーラさんへ
      コメントどうもありがとうございます。
      参考になればよいのですが・・・
      2019年09月05日 18:48
    • tor

      こんばんは。
      あまり意識したことはなかったのですが
      なるほどです。
      2019年09月05日 19:35
    • わけい

      torさんへ
      コメントどうもありがとうございます。
      ブログは意識しないでも書けるように作られているので、気にしないでも済みます。
      刺身のツマのようなもの、レストランのテーブルクロスのようなもの、など目的の料理が一番重要ですが、それをほんの少し引き立てる役割なのかと思います。

      ホームページを作る際には料理の一品ぐらいに重要性が高まります。
      多数のページが統一性がなくバラバラだと、カレー屋だかラーメン屋だか寿司屋だかそば屋だかごちゃごちゃして・・・という感じにCSSはデザインの幅を広げる一方で統一性を保つ役割を果たしている気がします。

      ブログには、ちゃんと既成のCSSが用意されているので統一感は図れます。
      その場合は、利用者のほとんどが同じようなユニフォームを着ている感じになります。
      このユニフォーム(男女兼用でサイズも同じです)で気にならないか、あるいはちょっと変えてみようかなってぐらいの差かもしれませんね。

      私のブログは、こりすぎない程度にCSSやHTMLタグにも注意を払って、アクセント代わりに使用しています。これで多少は記事の内容をごまかすことが出来ると思いますが、torさんには通用しないかも知れません。
      2019年09月05日 22:06
    • miyo

      こんばんは~
      私のブログ始める前は、息子が大学で習ったフォーム作った自己流でHP作ってました。(ランクル80の大冒険)
      今はHP制作出来た物が主流ですが、私のHPはシンプル手作りですがタグ打ちで大変です!名前付けてHTMLで保存など。。
      本文もbrで改行などなど。。色も#FF数字などですね!
      写真も貼り付け作業が多く、アーカイヤ変換が1枚づつ手間かかり、途中こうちゃんからmiyoが引き受けたのですが、今でも理解難しくて、ブログが簡単で主流なりました。
      年1度位HPを更新させてますが。。。
      2019年09月05日 23:36
    • わけい

      miyoさんへ
      コメントどうもありがとうございます。
      miyoさんには、HPとブログが2つもあるんですね。
      そこにランクルの説明があったので、やっと意味が分かりました。
      65万キロぐらい走行されたようで、日本の車は丈夫ですね。
      (整備・維持管理費も大変でしょうが)
      HPやってると嫌でも色々覚えないといけないので、勉強になりますね。
      その点ブログは、楽チンですね。
      私も昔、HPを持っていたのですが光回線を変更した際に自動的にプロバイダーも変更されたため、そのHPは閉鎖されてしまいました。
      そのデータは長期間PCのハードディスクで眠っています。
      2019年09月06日 09:53
    • 空蝉

      こんにちは。
      あぁ、HTMLとCSSはこんな感じに成り立っているのですね。
      ウェブリブログ改変のお陰で、全く何も知らないまま行き当たりバッタリでCSSを弄ったりしましたが、お陰様で何となく分かって来ました。ありがとうございます。
      2019年09月08日 16:28
    • わけい

      空蝉さんへ
      コメントどうもありがとうございます。
      別ファイルになっているCSSの方を書き換えるのは、非常に長文でありどこの部分に書き加えたり、書き直したらよいか、ハードルが高いかと思います。なにしろブログの全体に影響しますので。
      ブログのページの本体に書く方法なら、失敗しても影響はそのページだけなので、気楽にチャレンジできます。
      いくらか参考になったようで良かったです。
      2019年09月08日 17:57
    • てくてく

      HTMLフムフム。CSSなるほど・・・と説明、読んだときは、納得するんですが、すぐ、忘れてしまいます。
      なので、わけいさんの様に、分りやすく解説されるの、凄い事だと思います。
      参考になります。
      2019年09月09日 14:45
    • わけい

      てくてくさんへ
      コメントどうもありがとうございます。
      知っていることとできることは、似ているようで異なることが多いと思います。
      知っているつもりでも、いざやってみると思うようにできない・・・なんてことはよくあります。
      知っていることを実際にアウトプットしてみると、あっ知らなかったんだ何てことに気付くと思います。
      実際に私は、アウトプットしてみて、実に知らないことが多いということに気付きます。
      そこで、それを補うためにまた調べて、再アウトプットしてみて・・・これを何度も繰り返しの連続です。
      2019年09月09日 18:42