勘とハッタリで答えに辿り着くウェブ屋講座01

勘とハッタリで答えに辿り着くウェブ屋講座01

あい。4~5ヶ月ぶりですね。月日が流れるのは早いもんだ(現実逃避)。更新しようという気持ちはあったんですが、行動が伴わなかったのでご覧の有様です。

今回からはしばらく初心者・初学者向けのシリーズ記事でもやっていこうかなと思っています。

「え? なぜ今更初心者向けの解説を?」
「いよいよネタ切れか!?」
「PV数稼ぎか!? おのれアフィブロガーめ!」

やかましいわ(PV稼ぎたいならこんなに放置するわけないよネ…)。まあ環境の変化ってやつでしてね。マニアックなネタばかりでなくこういうこともやっていけというムーブメントがあったので書いているまでよ。

What’s this?

以下のような悩みを抱えている方に向けて書いていきます。

  • 「JSとかはまだ分かるけどHTML/CSS混沌すぎて気が狂いそう」(悩めるPGタイプ)
  • 「右も左も分からないのにパイセンから『ドットインストール見て覚えて。後は適当にヨロシク』と丸投げされてしまった」(†闇†の新卒タイプ)
  • 「『HTMLぐらい簡単っしょw』とイキっていたら思いの外難しいオーダーがきて正直焦っている」(インターネット老人会系ウェブ担当者タイプ)

あとは、ポートフォリオ的なものを作らなければならない専門学生・友達がおらず学校と家を行き来するだけという暇で暇で仕方ない大学生にもオススメかもです。

ただ、さすがに「RGBっていうのは赤と緑と青の度合いを数値化したもので~」「変数っていうのは値を入れられる箱で~」というようなレベルの話から説明していると執筆に100年ほどかかってしまいますのでその辺は流石に割愛します。

え? なになに…

ドットインストールやらProgateやら書籍やらがあるのに、今更初心者向けの当たり前の話なんか書く必要なくない?

Exactly.(そのとおりでございます)

…確かにそうっちゃそうだけども。意図や真意について書くと長くなるから今回は省きます。。。

HTMLに関する思考

最終的に皆さんにはやりたい放題ウェブサイトを作れるようになってもらいたいと思います。そのために今回は皆さんにHTMLについてお教えしようかなと。と言ってもHTML要素を全種類紹介するとかではなく、使い分けの勘所やHTMLを組み立てる上での考え方をですね……って、え? なになに…

HTMLなんて簡単じゃん! 教わるようなことなんてないね! 全部<p>とか<div>とかでよくね?

なァ~~~~にィ!? あっ、茶番挟むと文量増えるから今回はあんまボケんとこ。

HTMLを書くことは(プログラミング言語のコーディングに比べれば)確かに簡単です。簡単ですが、簡単であるが故にかえって危険性があるということをまずご理解いただきたく存じ上げます。HTML文書の作成を軽んじることはウェブ制作そのものを軽んじていると言っても過言ではないです。

「簡単すぎるとかえって難しい」問題

HTMLってソースコードが汚くても動くんですよ。まあこれはプログラミングでも同じですよね。恐ろしいのは、記述に誤りがあっても動くんですよ。HTMLの基本構造については後で説明しますが、HTMLには基本的に<p></p>のように一対のタグと呼ばれるもので記述していく決まりがあるのですね。

これはCSSBattleといって、少ない文字数でお題のデザインを実現するという一風変わったゲームのスクリーンショットです。文字数を減らせればどんな手を使ってもいいというルールなので上記のような荒業も良しとされています。69文字までは行けると思いますが56文字の解法がノーヒントで浮かんだらマークアップ廃人ですね…。

閉じタグがない! CSSも閉じ括弧も忘れている!? でも望んだ結果が画面に表示されてしまうという…。閉じタグを書き忘れたりタグの入れ子を間違えたりしてもエラーメッセージなど表示されることなく動いてしまうんですよ(最近はブラウザの検証ツールが優秀なので明らかにおかしかったらアラートを出してくれるようにはなりましたが)。

「初心者や知識のない人でも触れる」のがHTMLの長所。しかし、そうであるがゆえに多くの人間が携わる可能性も高いです。そうなると脳死コピペによるソースコードの肥大化および難読化、不要な記述の重複や必要な記述の削除などが発生し、現場は燃えるというわけです(適切な運用やノウハウ共有が成されていればいいのですが、中小ベンチャー企業にそこまで盤石な体制があることは稀です)。

また、HTMLが滅茶苦茶で困ることはそれだけではありません。汚いソースというのはデザインの一部を差し替えるといった小規模改修でも毎度毎度負債として付き纏うことになりますし、検索エンジン対策やユーザーアクセシビリティ的な観点でも不利に働く恐れがあります。


HTMLの書き方に「こうすれば絶対上手くいく」という答えはありません。ですが、「このように書けば事故が起きにくい」「普通は皆こんなふうに書いている」といった指標を学ぶことはできます。そうした基本を修めておくことで、未来に起こり得る破局を避けるべく頑張っていきましょう、ってことで次の話に進みます。

ちなみに…さっきのCSSBattleのスクショですが、HTML5でタグが省略できる条件についてまで熟知しているマークアップのオタクな人だと、実は↑のスクショに貼ったソースコードもHTML的には誤りがないということが分かるかもしれませんが、これは初心者向けの講座ですゆえご容赦くださいと予防線を張っておきます。また、実際の仕事で上記のようなコードを書くと職業倫理を疑われて異端審問官に裁かれるのでヤバいことはしない方が身のためです。

HTMLは文書である

いきなりHTMLの書き方について話を進めてもいいのですが、HTMLを理解する上で最も重要な話からしましょう。

それは…HTMLは文書であるってコトです。文書というと堅苦しく聞こえるかもしれませんが、少し歴史の話をします。言葉で説明してもいいのですが、そろそろ文章が長々と続くのもウンザリしてきたでしょうから図を用意しました。

歴史のお勉強 ~HTMLの誕生

え? 図が雑だって? いいんだぜこっちはこれからぶっ通しで2~3千文字テキストだけで話を進めたって(?)

ま、こんなやり取りがあったかどうかは知りませんが…。ティム・バーナーズ=リーという人がHTML(および、それらを表示させる仕組み)の生みの親なんですけど、そんなこたぁ覚えなくたっていいんです、教養みたいなもんなんで。大事なのはHTMLが生まれた経緯です。

元々は「研究者が論文をメールのようにお互いのやり取りを介することなく情報を共有するために作った」ってトコがHTMLという概念を理解する上で肝心要なんですわ。

なぜこんな話をするかというと。現代においてウェブサイトというのは様々な形態を持ちます。

  • コーポレートサイト、役所や機関などの公式サイト
  • 新製品のLP(ランディングページの略;広告となるページのこと)
  • ECサイト(ネット上で商品を販売しているサイトのこと)
  • ウェブサービス(例:ブログやSNS)
  • ウェブアプリ(例:カレンダーやタスク管理ツール)

などなど。それぞれウェブを基盤とする何某かであるということは共通していますが、その作り方も目的も大きく異なります。であるがゆえに、表層からその本質が何であるかを理解することが難しいです。

だから歴史を振り返る必要があったということです。それがどういう経緯で生まれたものかを理解すれば、物事の全容ってのがなんとなく見えてくるので。まとめますと、オンライン上で人が人に向けて(主にテキストベースの)情報を伝達するために生まれたものってえことですよ。HTMLっつうのは。

ウェブアプリ/ウェブサービスだとツールに近かったりもするのでまた考えが変わってくるところもありますが、そっちは別の機会に話をします。多分

HTMLの書き方の決まり

論文』って単語がさっき出てきました。ま、現代において我々がウェブサイト上で論文のような学術的な内容を読むことは少ないと思いますが(研究職とかでもない限り)。でも、これもウェブサイトを作る上での基本となる大事な観点なんですよね。

何のこっちゃねんと思うかもしれませんが。論文っていうのは、だいたいフォーマットが決まりきってるものなんですよね。ほら、「論文 書き方」とかでググると、序論・本論・結論みたいな感じで組み立てるといいって出てくるじゃないですか。

ウェブも同じように…というと過言ですが(テキストの内容が論文のようにしっかりと整理されているとは限らないので)、とはいえ全然関係ない文章の羅列が続くことはないじゃないですか。大体数行~数十行は同じトピックに対する言及が続くわけで。つまり、文章にはまとまり、すなわち段落が存在するわけですよ。

国語の授業を真面目に受けていた方なら形式段落(小段落)と意味段落(大段落)って単語を聞いたことがあるかもしれません。そんな感じでですよ。ウェブにも文章をまとめる「大きな括り」と「小さな括り」がありまして。まあこの辺でまた画像を挟むか。

たとえばこんなあ感じでして(例文に突っ込んではいけない)。

<section>で括ってる内容が、いちニュースの内容。つまり「大きな意味での括り」。<h2>と<p>、<h3>とp<p>いった部分は全てニュースの本文ではあるけれど、それぞれは「小さな意味での括り」に該当するってことです。

まあここでは「こんな感じの理屈でウェブサイトってのは作られているんだなあ」ということがなんとなく分かってもらえればよいです。

セマンティック・ウェブ

ところで…「こんなの意味なくない?」とも思いませんか。めんどくさいだけじゃないかと。だってそうでしょ。Wordみたいなフォーマットで書いてりゃあ、文章のどこに見出しがあって、どこが段落で、どこで話が変わるかなんてだいたい自明ですやん。だからつまり…

やっぱ全部<p>とか<div>とかでよくね?

ダメで~す。無理で~す。粗茶で~す。( ^^) _U~~  ????

…えと、なんでダメかを説明しますと。我々いつもググったりヤフったりするじゃないですか。あるいは、サイト内検索などの機能でそのサイト内に存在するお目当てのページを探したりしますよね。

で。GoogleやYahoo!といった検索エンジンは当たり前ですけど、「こういう検索ワードだったらこういうページを表示させよう」なんて人間が手動で検索結果を操作しているわけではありません。今の時代にそんなことをやってたらGoogleの社員全員過労死します。

人間じゃない以上、何かしらのカラクリがあるんですよね。それがさっき例に示したタグの使い分けですよ。検索エンジンは、HTMLファイルから記述を読み取ってそのページがどういう内容なのかを分析しているのです。そして、ユーザーが入力した検索ワードに応じて最も望ましいであろうページを表示をさせていると。

だからこそタグはちゃんと文章の意味によって使い分けないといけないということです。このように、「機械にも意味が分かるようなウェブページにしようね」という思想をセマンティック・ウェブと言います。ちなみにこれもティム・バーナーズ=リーさんが考えました。

元々はどっちかっつーと「そういうふうにやっていこうぜ」というプロジェクトの名称ですが、今はもっぱら思想とか構想的なニュアンスで使われる言葉なので、ここでも『思想』という表現をしました。

用語解説

さて、「HTMLは正しく書かなアカン」という理屈の話が延々と続いてしまって申し訳ないんでさっさと本題に行きたいんですけど。その前に用語の解説をします。

分かりやすいように該当範囲を青背景で示します。

要素:
開始タグ・内容・終了タグからなる一括り
<div class="test">(内容)</div>←これ全体

要素とタグは混同されやすいが、タグはあくまで開始または終了を示すための記号であり、開始-終了タグからなる一連の記述を総称して要素と呼ぶという違いがある(まあ要素の意で便宜的にタグって表現することもあるけど…厳密には違うので用語の使い分けには注意)。

開始タグ:
<と>で囲まれる、要素の始まりを意味する記号
<div class="test">(内容)</div>

終了タグ:
<と/>で囲まれる、要素の終わりを意味する記号。俗に閉じタグとも呼ばれる。また、<img>や<br>といった終了タグの存在しない要素、条件によっては終了タグを省略できる要素もある
<div class="test">(内容)</div>

要素名:
要素の名称。タグの名称ともいえる。現時点だと111種類ぐらいあるらしい(増減する可能性があるため全てを網羅する必要はない)
<div class="test">(内容)</div>

属性:
要素に設定を加えたり、補足したりするための記述。半角スペース区切りで書かれ、末尾には=をつける
<div class="test">(内容)</div>

Tips
<a>要素のhref、<img>要素のsrcなど、要素によって設定できる属性は異なる。classやdata-*などはグローバル属性といってどの要素にも付与することができる。また、属性は複数設定することができる。

値:
属性の値で、内容は属性の種類によって異なる。始点と終点を"で区切って表記する。
<div class="test">(内容)</div>

Tips
値が複数存在する場合は半角スペース区切りで表記する(例:class="test1 test2")。が、id属性のように属性によっては複数指定できないものもある。

お待たせしました。ここからようやく本題です。HTML文書で使われる様々な要素を紹介していきます。

headとbody

えーHTMLの構造は、超アバウトに区分すると二つに分かれます。とりあえず10秒でなんか適当に書いてみたのでご覧ください。

「10秒でこんなの書けないだろ」と思った方は過去記事で触れているので要チェキです。

最初の2行をまず説明します。

<!DOCTYPE html>:DOCTYPE宣言といいます。このファイルがHTMLであることを説明していて、HTMLファイルの最初の一行目に書かれます。以上。

余談【フロントエンドと時代の潮流】
HTML 4.01だのXHTML 1.0だので昔はもっと色々書く必要があったんですが、現代においてこれ以外の書き方は不要になったのでもう忘れていいです。やや極論気味ですが、ウェブ屋の仕事ではわざわざ古い技術を習得する必要はないので(システム開発とかだとまた話が変わってきますが)。古い技術に需要がなく、わざわざ技術的制約があった昔の非効率なやり方に拘泥する必要もないのでね。…と言いつつ、 たまにとんでもないレガシーに触らなきゃいけない場面が起こったりもしますが、その時はその時でググりながら解決しましょう。

<html>:HTMLの内容がこの中に書かれます。この外には(DOCTYPE宣言以外)なんも書いちゃダメです。以上。 lang属性はそのページの言語を意味していて、今回の場合日本語の文書なのでjaとなっています。

で、このhtml要素の直下にhead要素とbody要素の二つが入ります。<body>内には実際のテキストなり画像なりといったページを構成するコンテンツ内容が入り、<head>内にはページを補足する情報が入ります。

ざっくり言うとページの内容がbodyで、ページ自体の情報がheadに書かれます。もっとざっくり言うと目に見える(画面上に表示される)のがbodyで見えないのがheadです。


ちなみに…なんで直下にはheadとbodyしか入らないのと思うかもしれませんが、そういう決まりだからです(えー)。詳しく話すとめんどくさいので、ここから引用します(説明放棄)。

HTML文書では、ヘッダ部分とボディ部分を合わせた全体を<html>~</html>で囲みますが、 <html>~</html>で囲むことで、この文書がHTML文書であることを定義します。

html要素はルート要素と呼ばれ、文書の“根っこ”となります。HTML文書はhtml要素を始まりにして、 その中にhead要素やbody要素が含まれ、さらにその中にp要素などが含まれるという構造になっています。

html要素を根にして枝葉を伸ばすように様々な要素を配置する構造と言い換えることもできるでしょう。 このような構造をツリー構造と呼びます。 HTMLでは要素ごとに子要素にできる要素の種類が決められています。 こうした要素の配置ルールを守り、正しいツリー構造の文書を作成することで、 プログラムでデータ処理しやすいウェブページとなり、情報をより有効に活用できるようになります。

html要素の他にも、「この親要素の直下には必ずこの子要素が配置される」というようなルールがいくつかあるということは覚えておいてもいいかもしれません(例:ul/ol要素の子要素には必ずli要素が書かれる、など)。

余談【そんなことする人はいないと思うけど…】
言うまでもないことだとは思いますが、一応念の為注意書きをしておきます。html/head/bodyタグを複数回使ってはいけません。また、headタグの中に本来bodyタグ内に書かれるべきコンテンツの内容を記述してはいけません(逆もまた然り)。理由は二つありまして、簡単に言うと「検索エンジンがページとして認識してくれない恐れがある」から、そして「(CSSの解釈やJSの動作面において)挙動がバグる恐れがある」からです。

headに書かれるもの

bodyに書かれるものについては「実際に画面に表示したい内容を書けばいいんだ」というイメージが湧くと思います。 では、headには具体的に何を書けばよいでしょうか。具体例を挙げてみます。

  • ページ名
  • ページの説明文やキーワード
  • favicon(ブラウザのタブ上に表示されるアイコン画像のこと)
  • スマホのホーム画面に表示されるアイコン
  • SNS用の各種設定
  • CSSファイル
  • その他ページに関する付帯情報
  • IEでバグらないようにするためのおまじない
  • スマホでバグらないようにするためのおまじない

意外と多いですね…。全部取り上げてるとキリがないので、今回は軽めに一部を紹介します。

なお、<script>タグについてですが、現時点では「head内に書かれることもあるし、body内に書かれることもあります」と回答しておきます。JSに関する話をする時にその辺は解説しようかと。

head要素の一番上の方に書かれがちな記述

<head>タグの直後には、(絶対にそういう順番で記述しろという決まりがあるわけではないのですが)大体

<meta charset="utf-8">

という記述が書かれます。これは、「このページの文字コードはUTF-8ですよー」と説明するための記述になります。この記述がないとページが文字化けしてしまう恐れがあるので、それを防止するために書いているという具合ですね。

これも昔はSHIFT-JISなどありましたが今はUTF-8だけ覚えておけばよいです(ちょっと古いCMSやECサイトだとSHIFT-JIS設定になっているかも)。ちなみに表記は小文字でも大文字でもどちらでも良いです。あと、http-equiv="Content-type" content="text/html";みたいな記述がくっついてた時代もありましたが、これも忘れていいです。

そして、<meta charset>の後の2~3行には大体以下の記述が続きます。

<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">

ざっくり言うと、上の行はスマホでバグらないための記述(コンテンツが画面からはみ出したりしないようにする)で、下の行はIEでバグらないための記述(互換モードと言って、IEの古いバージョンで表示されてしまうことを防ぐ)です。まあおまじないみたいなものなんで深く考える必要はないです。

また、これまで挙げた例の通りmetaタグというのは属性に応じて色々な使われ方をするため、「<meta>とはこうこうこういう意味があって、こういう時にこういう使われ方をする」と覚えるよりは、「HTMLファイルを説明するために書かれる何某か」ぐらいの認識でよいです。

参考:
viewportを理解して正しいレスポンシブデザインを設定しよう

head要素の上の方に書かれがちな記述

傾向としてですが(これも厳密な決まりはない)、headタグに書かれる記述の順番は

  1. 表示崩れ等の不具合を防ぐための記述
  2. ページタイトルや説明文など、そのページを説明するための記述(SEOに関わるような内容)
  3. 上記以外(スタイルシートやSNS関連の記述など)

という順番で書かれる傾向にあります。必ずそうしろって決まりがあるわけじゃないですし、順番が多少前後しても問題はないはずなのですが……まあ言うなれば我々は「最初にナプキンを取った者」に従ってるってことですね(唐突にジョジョネタを挟んでくるな)。ちなみに大統領のあのセリフには元ネタがあるんですがマ~ジで関係ないのでこの話はそろそろ辞めます。

脱線したので話を戻しまして、これまた1回しか使えないタグシリーズをお教えしようと思います。それがこれ。

<title>:読んで字の如し。ページのタイトルを意味します。

余談【よく見るタイトル】
titleタグにまつわるウェブ業界の慣習を紹介します。インデックスページ(そのサイトの最初のページのこと)では「○○(サイトまたはサービス名/コーポレートサイトなら会社名)」、それ以外のページでは「□□(ページ名) – ○○」みたいな感じでタイトルを設定することが多いです。ちなみにハイフンは区切りの例として使っているだけで、全角スペース、縦線、セミコロン、スラッシュなどが使われることも。
ランディングページ(商品などの広告ページ)では短いキャッチコピーなどが入ることがあったり、ブログ記事では匿名掲示板よろしく墨括弧が使われがちだったりと、サイトの形態によっても傾向が変わってきます。

で、例えば本の表紙にタイトルが書かれるとするならば、背表紙にはあらすじが書かれますね。

<meta name="description" content="(ここにサイトやページの説明文が入る)">

なお、titleとdescriptionで設定した内容は、Googleなど検索エンジンの検索結果画面に表示されます。

(ここに弊サイトの画像) このように。

余談【SEOの旧三種の神器? meta keywords】
ん? 「何かもう一つ足りなくない?」と思った方は鋭いです。title、description…とくれば、keywords!そう、メタキーワードはどうしたんだと。残念ながらあいつは死にました今となっては設定する意味がほぼありません。「小手先のページキーワードでアクセス数を増やそうとするぐらいなら、コンテンツの内容や文章構成を再考してください」ってGoogleくんは思ってるじゃないかな。知らんけど

ところで。逆に「このサイトは一般公開したくないから、検索エンジンにも掲載したくないよ」ということもあるでしょう。そういう場合はこの記述を加えておきましょう。

<meta name="robots" content="noindex,nofollow">

検索エンジン側の解釈に影響を与える似たような扱いのものでrobots.txtってのがあるんですが、上記の記述と併用する場合は注意が必要だったりするんで今回説明するのは省きます(今はそういうのもあるんだ程度の認識でOK)。

head要素の下の方に書かれがちな記述

さっきの順番の話を補足しますと。HTMLファイルというのは上から下に読み込まれるものなのです。基本的にはソースコードの上部に書かれている記述から順に解釈しますし、ファイルの読み込みについても記述が上のものから順に行われるわけです(ちなみにこれはCSSやJS、その他プログラミング言語などでも同様)。

ゆえに。”必ずそうしろという決まりがあるわけではない”とは言いましたが、そのページで「一番大事なもの」や「最初に表示させたいもの」、「全ての基準となるようなもの」は上の方に記述していくべきだという指針があることを覚えておいてください。

ということは、これから紹介するような記述は重要でない? …いいえ。下に書かれるものが重要でないとは言ってないですよ。むしろページの根幹を担うメチャクチャ重要な記述です。

<link rel="stylesheet" href="(cssのファイルパス/ファイル名).css">

これでCSSファイルを読み込んで、body内に書いたコンテンツ群を装飾できるというわけです。

味気ない『文書』であるところのHTMLを、さも魅力的で意匠性の高いページであるかのように変貌させる魔法の呪文……それがCSSなのですが、これまたHTML以上に自由でHTML以上に混沌に向かいやすい性質があるので、今回は名前の紹介だけに留めておきます(長くなるので)。

で、このCSSファイルが正しく読み込まれていないと「画面はグチャグチャ・ユーザーはクレーム・クライアントはカンカン」と何もかも最悪な事態に陥ります。それだけ重要な記述がなぜ下の方に記述されるかというと…。

さっきHTMLの記述は上から下に解釈されていくものだと書きました。最初の方にCSSを読み込ませる記述を書くと「一旦CSSファイルをロードしてから次の記述を読みに行って、今度は設定の情報が続いて、またCSSファイルが出てきたから読み込んで…」というような具合に外部のファイルをロード&解釈する動作でHTML情報の読み込みがストップしてしまいます。これでは非効率なのでCSSファイルは後の方にまとめて記述するのです(script要素がbodyの末尾に書かれるのも同様ですが、JS周りの話はまた別の記事でやります)。

余談【読み込み順に関する補足】
HTMLの読み込みがストップするというとちょっと大袈裟で、実際のロード時間は(CSSファイルがン十MB超えの超大作とかでもない限り)誤差レベルなので、「絶対に下に書かなければならないものだ」というわけでもないです。ただし、CSSファイル同士の読み込み順は重要かつ注意が必要で、本来先に読み込むべき汎用的なスタイルを後に読み込んでしまうと、ページごとに設定していた限定的な記述が上書きされて表示崩れが起きるといった事故が起きる恐れがあります。


head要素内でCSSファイル読み込みの下に書かれる記述というのは、だいたい「最悪なくても困らないようなもの」や「特定条件下では有効だけどそうでない場合は無意味となる記述(SNS用タグなど)」とかが続きます。あくまでそういう傾向があるだけですが。

たとえば、faviconとか。

<link rel="icon" href="/favicon.ico">
<link rel="apple-touch-icon" sizes="180×180" href="/apple-touch-icon.png">

上記はブラウザのタブとスマホのホーム画面上にアイコンを表示させるための設定です。どっちにしても無いとすごく困るというわけではないのでCSSの下に書かれがちです。

なお、上記の記述だとAndroidのホーム画面やWindows 10のスタート画面に表示させるアイコンの設定等はカバーしきれていないので、完璧にこだわる方は情報が新しめの記事を読んでそれぞれに対応した記述を書くとよいでしょう。

余談【faviconあれこれ】
.icoという見慣れないファイルについてですが、何某かのジェネレーターで変換して作るとよいです。めんどかったら『type="image/png"』って記述を加えればfaviconでも.png画像を読み込めるのでそれでOK(IE10以下のことは忘れましょう)。なお、大体みんなfaviconファイル等はルートディレクトリに配置し、ファイル名も「favicon.ico」「apple-touch-icon.png」と決まりきった型で記述しがちですが、これは昔の慣習なんで古いブラウザに対応する気がなければ好きにしていいです。

なお、弊ブログではfavicon画像とか設定してないですけどこれはひとえに筆者の怠惰によるものです…。


で、SNS関連の記述についても。こうしたSNS関連の記述をOGPと呼びます。Open Graph Protocolの略です。

OGPをHTMLソースの<head>内に記述することで、シェアされた時に「ページタイトル、URL、内容、画像(サムネイル)」をユーザーに正しく伝えることが出来ます。

OGPとは – テキスト広告JPより

ってな感じ。一応例を下に書きますが、SNS側の都合などによって必要な記述や書き方が変わる可能性があるので、都度最新の仕様をググることを推奨します

<!–– 汎用設定 ––>
<meta property="og:site_name" content="(サイト名)">
<meta property="og:type" content="(ページの種類)">
<meta property="og:title" content="(ページタイトル)">
<meta property="og:description" content="(ページの説明文)">
<meta property="og:url" content="(ページのURL)">
<meta property="og:image" content="(サムネイル画像のURL;絶対パスで書く)">

<!–– Facebook用設定 ––>
<meta property="fb:app_id" content="(FacebookのアプリID)">

<!–– Twitter用設定 ––>
<meta name="twitter:card" content="(Twitterカードの種類)">

説明してませんでしたが、<!–– ––>で囲んだ記述は文書として無視されるのでコメントとして利用できます。

また、OGPを利用する場合はにhead要素にこんな記述を加えておいてください。なんでかって言われたらOGPを使う時はそれが必要だからです…(筆者もプロトコルの仕組みまでは知りません…)。

<head prefix="og: http://ogp.me/ns#">

head要素の書き方まとめ

大体こんな感じになるよーって例を示すべく、最後にソースを貼っつけて締めくくります。

canonicalの設定とか他にもまだまだ書ける内容はあるんですが、大体この辺を抑えておけば後は適宜学習することで補えるかなーと(いつかSEO系の話をガッツリやる機会があれば説明するかもしれませんが…)。

おわりに

あー長かった。まだこれ基本のキどころかkぐらいなんですけども…。まあでも、千里の道も一歩からでして。ここで心が折れるのはあまりにも早すぎます。というのも、この地味で地道な知識や技術の積み重ねこそがウェブサイト制作の本質だからです。

最初は実際のコーディングにさえ取りかかれず環境構築などから始まり、head要素のあれこれを書き終えたらbody要素内にガシガシとタグを書き連ねていくも、出来上がるのは殺風景なテキストの羅列。そこからCSSで見た目を整えてやるとだいぶ見てくれは良くなるものの、ブラウザやデバイスごとの検証&調整が待っていて、お次はJSのプログラミングだ。

でも大丈夫。どれだけ億劫で面倒なことでも、一つ一つ分解していけば着実にプロダクトは完成へと向かっていくものなのだ。というわけで、本日の格言です。

困難なことはすべて、扱うことができ、解決が必要な部分へと分割せよ。

―― ルネ・デカルト(哲学者)

いや、次回の記事でも格言があるかどうかは知らんけど。俗に言う「困難は分割せよ」ってヤツですな。どれだけ大仰で億劫なことでも、最小単位に分解していけば意外となんとかなるモンです。

次回予告

次回の記事ではbody要素内に書く記述についてを説明していきます。といっても、head要素に書く記述とは違って決まりきった型というものが存在しないので、「大枠となる構造をどんなふうに書いていくか」ってなところをメインに書いていって、そこから枝葉のノウハウに派生していくような感じで考えてまっす。

次回の記事も今月中に書けたらいいけどなあ…。多分無理だなあ…