ブログカスタマイズ

HTMLとCSSについて、絶対に知っておくべき最低限のこと

code

絶対に知っておくべき最低限のこと

ブログ記事の作成や、ブログの改造をする上で、最初に押さえておくと、あとで必ずラクになるような、最低限の基本の話をします。

HTMLとは

HTMLというのは、基本的に、「入れ子構造」です。
いろんな内容を別々に入れるための「タグ」が、次々に並んでいますが、それぞれのタグには、ほとんど「中身」があって、入れ子入れ子になっているわけです。
領域を区切るためのタグというのは、<>で始まって、</>で終わるというのが、約束ごとです。
ゆえに、要素の閉じタグである</>を、どこに置くかということは、非常に重要で、それによって、どれが入れ子の中になるのか、ということが、決まります。
ある要素を囲んでいる要素を、その要素に対する「親要素」と言い、ある要素が入れ子として抱え込んでいる要素のことは、「子要素」と言います。
そして、同じ「位」のタグを、兄弟要素と言います。
「入れ子構造」の中で、同じなんらかの要素の中に入っていて、そして上下の位置が、互いを入れ込んでいない、並列になっている要素どうしは、優劣がなく、兄弟です。
そして、基本的には、下に書かれているものほど、優先しますが、それはなぜかというと、HTMLというのは、上から下に読むからです。

「重なりの順番」は重要

HTMLというのは、「重なりの順番」というのが、重要です。
書かれている順番に、上から下へ読むという原則と共に、入れ子なために、「重なり」がある、ということになります。
ということは、重なりの順番からして、上になるもののほうが、ブラウザ上では、優先的に見せられる、ということです。
例えば、bodyになんらかの背景色を指定しておいたとしても、その内側にあるなんらかの要素に、別の背景色をつけてやれば、内側の要素につけた背景色は、bodyにつけた背景色よりも、優先的に、ブラウザ上で表示されます。
ただし、意図的に、重なりの順番を変えるようなスタイル指定も、可能ですので、「絶対にHTMLに書かれている重なりの順番どおりに見えている」とは、限りません。

HTMLだけでは、非常に見づらい

タグを並べ、それぞれに入れ子の要素を書き込んで、HTMLができあがりますが、それだけでは、見づらいので、内容をどういうふうに見せるかということを指定する必要があり、それが、CSSと呼ばれるものです。
スタイル指定、CSSの書き方の中で、必ず覚えておいてほしいのは、以下です。

最初に必ず覚えておくこと

  1. セレクタ名を書き、その右側に{}を書き、その中に、スタイル指定の内容を書く。
  2. 基本的な文法について
    • CSSでは、classなら、ピリオド「.」を、セレクタ名の直前につける。
    • id名なら、「#」を、セレクタ名の直前につける。
    • id名は、ひとつのページに、同じものが複数あってはならない。1つだけになるようにする。
    • 要素名をそのまま指定する場合には、ピリオドやシャープはつかない場合もある→例えばheaderとかfooterとかdivとかaとか。
    • class名か要素名で指定する場合に、その指定内容を、ページ内の別の要素または、別のページの同じ名前の要素にまで関係させたくない場合には、上位の親要素を使って、「切り分け」をするか、その要素の「属性」を使って、切り分けたり、その要素の直前の兄弟要素との「関係性」から、指定することも可能。
      親要素は、子要素よりも左側に書き、子要素との間に、半角英数を空ける。
      くっつけてしまったという場合には、親子関係ではなく、「~であり、同時に~である」という意味になってしまう。逆に、あえてそういう指定をしたい場合には、そうすることもある。
    • 「直前の親子関係(入れ子構造の間にほかの要素が入らない親子関係のこと。兄弟要素は入ってもいい)」を、あえて強調して指定しておきたい場合には、半角英数を空ける代わりに、「>」を入れる。
  3. CSSも、下に書いたものほど優先する。
    上に書いてあるものを打ち消すようなコードを、それよりも下に書けば、そちらが反映される(!important指定があるものを除く)。
    なぜかというと、上から下に読むから。
  4. 複数の要素に、同じスタイル指定をする場合には、セレクタ名をカンマで区切り、最後のセレクタには、カンマをつけないようにする。

空白や改行が少ないほうが、読み込みが速くなる

そして、スタイル指定のコーディングをする場合には、なるべく文字数が少なく、そして無駄がなく効率的な書き方をするほうが、よいとされています。
が、なかなか、理想的な書き方ができる場合ばかりではないので、ここらへんは、悩みのタネです。
特に、セレクタ名の指定の仕方は、要素をピンポイントで指定できるような書き方のほうが、よいとされていますがそれは、CSSは、右から左に読まれるのですが、「要素の把握の幅」が広いと、それだけ、処理に時間がかかるからです。
例えばですが、「a」に対し、なんらかのスタイル指定をした場合には、そのページ内のすべてのaがいったん対象になります。
そして、右から左に読むわけですから、ページ内のaを全部押さえたあとに、その左側に、親要素のセレクタ名が書いてあったという場合には、その親要素の範囲内に、再度絞り込むわけです。
だから、「親要素名 a」というような書き方は、本当は、あまりよくないのですが、場合によっては、仕方がないので、ときには必要になります。

ヒトの目でどう見えているかは、本当は関係ない

また、拙テンプレートでは、CSSは、半分圧縮したような形にしていますが、これは、完全な圧縮ではないのですが、詰めたほうが、少しでも読み込みが速くできるから、です。
ゆえに、「詰めてもいい空白や改行」については、なるべく詰めてあります。
ヒトの目で見て、見やすいかどうかは、機械が読み込む際には、関係はありません。
そして、不要な空白(必要な空白もある↑セレクタ指定で親要素と子要素を区切る場合)や改行がなるべく少ないほうが、読み込みの負担が、小さくなり、逆も真なりです。
完全に圧縮することも、できますが、それをすると、あとから改造をすることが、かなり困難になりますので、こういう形にしています。
見た目は、美しくはありませんが、実用性のほうを、重視しました。
関連記事
ブログカスタマイズHTMLCSS

12 Comments

管理人のみ閲覧できます

  

2019-10-10 09:49

このコメントは管理人のみ閲覧できます

編集  返信     
Janedoe1471
To -さん

Janedoe1471  

2019-10-10 14:33

そうですか、無理をすることはないと思いますので、それぞれの方のブログの目的に必要な範囲を押さえておけば、それでいいと思います。

編集  返信     
管理人のみ閲覧できます

  

2019-10-10 22:07

このコメントは管理人のみ閲覧できます

編集  返信     
Janedoe1471
To -さん

Janedoe1471  

2019-10-10 22:50

はい、今、そちらのブログのほうに、コメントでお知らせいたしました。
よろしくお願いいたします。

編集  返信     
管理人のみ閲覧できます

  

2019-10-11 06:46

このコメントは管理人のみ閲覧できます

編集  返信     
Janedoe1471
To -さん

Janedoe1471  

2019-10-11 16:35

貴ブログの非公開コメントのほうを、ご確認くださるようお願いします。
さきほど、もうひとつコメントをさせていただきました。

編集  返信     
No title

hige  

2019-10-11 20:49

 大昔にBASICというインタープリタと云う言語があったのですが、この時にも速度が問題になってました。
 その後PCも速くなってVisualBasicではソースの可読性とかメンテのし易から行分けや行頭にタブを設けたり、既定の数値(定数)をわざわざ意味のわかる変数に代入する方が良いという方に進んでいったと思います。例えば黒色の定数は0なのですが、BLACK=0 (BASICでは基本大文字)と代入して、色指定にはBLACKという変数を利用。これは処理的には遅くなる。当時のMPUは8ビットやし。
 HTMLやCSSのスペースや改行のない書き方にはなんとなく抵抗があるなぁ。5Gとか6Gとか技術が発達していけば将来的には可読性やメンテナンス性が優先されていく様な気がしますね。というじじいの感想。

 HTML/CSSに少しでも関心を持ってくれる方が増えれば良いですね。まぁ判る人は判ってねと、私はそんな感じでHTMLの記事を書いてます。なので易しく手取り足取りの記事は書きません。?なのかな

 とまぁ いつもの 感想です。
 

編集  返信     
Janedoe1471
To higeさん

Janedoe1471  

2019-10-11 20:57

そうですか、一度、Akiraさんのソースを、ご覧になると、よろしいかと思います^^
理想は、ああやって、極限まで空白や改行を詰めることと、そして、そのページに最低限必要なものだけを読ますこと、なんです。
さらに、外部読み込みを減らす、ということですね。
つまり、CSSやjsを、外部ファイルで読ませるということは、最低限にしたほうが、いいということで、そうなれば、ベタ書きをする、ということです。
ベストなのは、styleはhead内に圧縮でベタ書き、jsは下の方に、scriptで囲んでベタ張りです。
そして、CSSは、ページタイプごとに分けると、それがベストです。
私は、部分的に、これをやっていますが、それは、自分の個別ページ用のCSSが、ものすごい量になっていて、しかしこれ以上断捨離できないので、分けています。
が、ヒトの目できれいに見えたほうがいいという場合は、それはそれで、いいと思います。個人ブログの場合は、本来は、それほどマニアックに、スピードを追求する必要は、なく、私のように、CSSが重くなっているということは、普通は、ないはずですので^^

編集  返信     
手法は

hige  

2019-10-12 18:11

 もちろんHTMLやCSSのべた書き?のテクニックがあるということは知った上です。
 私のブログの場合は画像が一杯なのでその方が問題ですよね。画像の容量を100KB以下に圧縮の方が二の足を踏みます。
 私はJanedoe1471さんやAkira氏のように第三者を気にしなくていいので気楽です。
 お一人、タイトルの背景画像が重たい方がおられたので、ちょっとお節介をしてきました。ほかにも画像の縦横サイズ(px)と画像の容量(KB)の違いがわからない方がおられて、この辺は理解するのが難しいかも知れません。それはそうでしょうねぇ。全ての人が理解されている訳がないので。

編集  返信     
Janedoe1471
To higeさん

Janedoe1471  

2019-10-12 21:41

そうですか、お疲れさまでした。

編集  返信     
管理人のみ閲覧できます

  

2019-10-14 21:37

このコメントは管理人のみ閲覧できます

編集  返信     
Janedoe1471
To -さん

Janedoe1471  

2019-10-15 00:10

申し訳ありませんでした、さきほど、貴ブログのほうで、再度ご報告させていただきました。

編集  返信     

コメント投稿

【お願い】FC2ブログの方は、必ず、ご自分のブログURLを入力してください。
お名前
コメントの題名
投稿者様のサイトアドレス(例:https://janedoe1471.blog.fc2.com/)
コメント本文