第16回：HTML&CSS講座本編0「そもそもHTMLとかCSSとかって何？」
どうも、シノです。
突然ですが、新しく講座を始めます。あ、決して前書きで書くことがなくなったとかではないですよ？
今回から、HTMLとCSSについて、解説していこうと思います。
なんでこんなことを書き始めたかですが、きっかけはこの一つ前に投稿した以下の記事です。
この記事の内容ですが、一応HTMLとかCSSとかを知らない人でも使えるようにしたつもりです。ですが、知っている方が、より幅広いカスタムができるようになるんですね。
なので、折角なら色々カスタマイズできるようになろう！というのが目的です。しかし、ただはてなブログでカスタムできるようになるのではなく、しっかりとHTMLやCSSが書けるようにしていきます。その方が、知識もより広い範囲で使える形になりますからね。
で、今回は前書きのようなもの。そもそもHTMLとかCSSって何？ということを書いていきます。
というわけで、今回の目次です。
0.この記事内で使用する枠の凡例
先に、この記事内で色々な枠の色を使います。ここは使い分けたいので、先に何色だったらどういう意味かを決めてしまいます。
用語：赤
サンプルコード：緑
表示例：黄
まとめ：青
1.HTML
HTMLとは、「HyperText Markup Language」の略、この中の「HyperText」は、複数の文章を、文章の枠を超えて繋ぐ仕組みのこと、「Markup Language」(マークアップ言語)は文章のデザイン、レイアウト等を意味づける言語です。なので、日本語に訳すと「ハイパーテキストをレイアウトしたり意味づけしたりするための記述方式」でしょうか。
で、実態はこの記述方式に則って記載された文字列、あるいはその文字列が保存されたファイルのことをHTMLといいます。
まあ、言葉の意味はわからなくても大丈夫です。重要なのは書き方なので、そちらを見ていきましょう。
このHTMLは、主に「タグ」とその「要素」で構成されます。
- タグ：内容に意味を与えるもの。
ここでの意味は、見出し等の単純な文章の意味だけでなく、太字、色付け、下線等のスタイルや、その文章全体のタイトル等の属性も含む。 - 要素：タグによって意味づけされた、コンテンツそのもの。
具体例で言うと、ある文字列を「太字にしたい」という場合に、その文字列をstrongというタグを使って太字だよという意味をつけてあげる、ということです。
基本的な書き方は、以下の通りです。
<タグ名 [オプション]>要素</タグ名>
オプションに大括弧がついているのは、指定しない場合は省略ができるからです。このように、ここ以降は記載方法で大括弧をつけたものは省略できるものとします。
では、実際に太字にしてみましょう。以下の文章を太字にしたいとします。
これを太字にしたい！！！
なんでもいいので、テキストを開いてください。そこに、上の文字列を入力し、名前をつけて保存します。このとき、拡張子を「html」に変更してください。
そして、そのファイルをダブルクリックで開いてみてください。特に設定を変えていない場合は、これでブラウザが立ち上がります。開かない方は、右クリックから「プログラムから開く」内にあるブラウザを選択してください。一切タグはついていませんが、しっかりと入力した文字列が表示されるはずです。そう、意味をつけるのがタグなので、タグなしでも一応表示はできます。ただし、これではただのテキストと何も変わりありませんね。
では、先ほどのファイルを、今度はテキストエディタで開きなおしましょう。入力した文字の前に、「<strong>」を、あとに「</strong>」を入力して、上書き保存します。
<strong>これを太字にしたい！！！</strong>
そして、再度ダブルクリックか右クリックメニューからブラウザで開いてみてください。文字が太字になっているはずです。なっていない方は、スペルミスや後ろのタグにスラッシュ忘れ等ないか確認してください。
こうやって、文字列に意味を足していってあげることで、昨今皆さんが見ているウェブページが作られているんですね。
ちなみに、あるタグの中に、別のタグを入れてあげることもできます。が、このときは別のタグを、開始から終了まで全て入れてあげる必要があります。
これについては、前回の中でちょこっと解説をしています。センタリングの項目ですね。よかったらそちらも参照してください。
あまり長くなってもいけないので、いったんこのくらいで。次はCSSです。
2.CSS
CSSとは、「Cascading Style Sheets」の略です。単語の意味を調べてみたんですが、「cascade」が滝のように落ちる、という意味だそうで…なんでこの単語が使われているんでしょう？
と、とにかく、スタイルシートとある通り、CSSはHTMLのスタイルの決め事をまとめたものになります。
これ、今すぐ書き方の説明はできないので、そういうものなんだという認識だけしておいてください。ちなみに、このCSSはHTML内に書くことも、別ファイルに書いてHTMLから見させることもできます。これも、実際に使い方を解説するときに。
はてなブログでは、デザインの設定でこのCSSを書いておき、全記事に適用させることもできます。この方法も、いずれ紹介しようと思います。
まとめ
いかがだったでしょうか。今回は、HTMLとCSSとはそもそも何なのかについて解説をしてきました。
簡単にまとめると、以下の通りです。
- HTMLは、主にウェブページを構成している、コンテンツに意味を付加するための記述方式、あるいはその記述方式で記載された文章
- CSSは、HTMLのスタイルの法則をまとめた記述、あるいはその記述が保存されたファイル
次回は、実際にHTMLを細かく書いていきます。今回の内容がわからなくても、次回以降の内容が分かってもらえれば書けるようになるので、焦らないようにしてください。
次回以降の内容を更新したら、Twitterにて呟きます。よかったら、こちらもフォローをお願いします！！！
次回：HTMLを書いてみよう(2019/1/7更新しました！！！)
それでは。
