TDDの本業ってSEらしいよ。
昨日リベ大の両学長の動画を見ていたところ、副業にWEBサイト作成の話が載っていたので、そーいえばおいらの本業はWEB系のSEだったよなと思い、おいらがプログラミング（といってもしばらくHTMLとCSSの話ですが）のこと書いたらどんな記事になるだろうと、勝手に記事にしようと思い立ったのでありました！
前置きはこの辺にして、さっそくHTMLとCSSの説明に移りますよー。
HTMLとは。
HTML（エイチティーエムエル、HyperText Markup Language）とは、簡単に言ってしまえば、ブラウザにこういう形で表示してよー、って（構造を）指定できる一般的な言語です。
大体のブラウザでは、右クリックすると「ソースを表示」みたいな項目が出てくると思います。
下の画像はGoogle Chromeの例ですが、赤枠で囲ったところがそうです。
この部分をクリックすると、下記のようなコードがいっぱい出てきます。
うげ、こんなの書かなきゃいかんの？？ 萎えるんですけどー！！
ごもっともです。
おいらもこんなの書きたくはありません。
なんとなく見てこんなことしてんだろーなと予想つくものの、きちんと説明できるかと言われれば疑問です。
「えっ？ プロの方ですよね？？」
そう思われるかもしれませんが、いちからきちんと理解している人の方が稀有だと思いますよ。
もしそんな人がいたら、神かドMの方でしょうね汗
覚えるところは覚え、いらないところは必要な時にググって勉強すればいいと思っています。
基礎は身につけなければいけませんが、初心者向けに書いているので、最初からすべてマスターしようとしたら、人生いくらあっても足りませんよ！？
もうちょっと説明すると、HTMLはタグを使って書きます。
先ほどのソースコード見てもらうと<>が頻繁に出てくると思います。
これがタグです。
h1タグ（アルファベットの大文字、小文字は問いません。言語によっては大文字、小文字で意味あいが異なる場合もあるので、小文字で統一した方がいいかもしれません。小文字で書くのが一般的です）は、見出しに使われるタグで、そのページで一番何が言いたいのか、表題に使われることが多いです。
<h1>HTML＆CSS入門講座</h1>
HTMLタグが機能するかのテストだよ！こんな風にメモ帳（最初のとっかかりなのでWindowsに初期搭載のメモ帳でやりますが、サクラエディタなどのテキストエディタで最初はやってみるといいでしょう。慣れてきたら、Visual Studio CodeなどのIDEを使っていくと便利だと実感できます）にコードを書いて、拡張子をtxtではなくhtmlに変更し保存します。
今回はファイル名は何でもいいですが、拡張子はhtml（もしくはhtm）にしてください！
そして保存したファイルをダブルクリックし、ブラウザが起動すると下の画像のように表示されていませんか？
h1タグで囲まれた方は、大きな文字で表示されていますよね？
これがHTMLの威力です！！！
基本的にはタグの連続なので、ちょっとコードを書いてみてはブラウザで表示を繰り返せば、すぐにある程度のところまでは上達できると思いますよ！！
デザインを司るCSS。
じゃあ今度は、h1タグで囲んだ文字の色を緑にして、もっと大きな文字にしたい！
そう思ったらどうすればいいのでしょうか？
実はHTMLでは構造は組み立てられても、デザイン的なことは得意じゃないんですよね……。
デザイン変更したい場合は、CSS（シーエスエス、Cascading Style Sheets）を勉強する必要があります。
えー！ せっかくHTMLでちょっと興味出てきたけど、他も勉強せなあかんの！？
まま、落ち着いてください！
CSSの書き方はいろいろありますが、今回はHTMLに直接CSS書いてみましょう！
（なんか意味わからんが、とりあえず見てみっかと思ってくれればこれ幸い）
h1タグで囲まれた文字の色を緑、そして大きくでしたよね。
<h1 style="color: green; font-size: 50px;">HTML＆CSS入門講座</h1>
HTMLタグが機能するかのテストだよ！新しいファイル作って、上のようにコードを書き、htmlの拡張子で保存でしたね！
保存したファイルをダブルクリックすると、下記のように表示されているはずです。
ほら、確かにできてますよね？
HTMLとCSSをマスターできれば、静的ページは大体表現できるようになります！
総括
HTMLを使って、ブラウザに表示する構造を組み立てることができました。
さらにはCSSによって、組み立てた表示構造にデザインを加えることができます。
ほんと右も左もわからない方向けの文章なので、割愛していることも多いですが、覚えれば覚えただけいろんなことが表現できるようになるのは言うまでもありません。
補足しておくと、何もh1タグ使わなくてもCSSで文字大きくできるんだから、そのタグいらなくね？？ と思われるかもしれません。
そう思えたなら鋭いです！
確かに、h1タグ使わなくても、同じようなデザインにはできるのですが、SEO的によろしくないんですよ。
は？ SEO？？ またわけわからんの出てきた！！！
落ち着いてください……。
SEO（エスイーオー、Search Engine Optimization）とは、検索エンジン最適化、つまり検索エンジン（GoogleとかBingとか）に、どういった記事であるのか、さらにはこういったこと書いてますから、このワードでヒットしてくれると嬉しいなー、といったことをある程度意思表示できるのです。
せっかくホームページ作ったけど、意図したワードでヒットしないなどといったことがないように、コーディングする側で、検索エンジンさんに伝える必要があるのです。
どんなワードでもきてくれりゃ構わんだったり、そもそも内輪の話なんで検索エンジンとは無縁とかだったら、あまり気にしなくてもいいです。
でも大体の人は、こういうワードで集客したいなとか思っているはずで、検索エンジンの世界は、もうそりゃ思惑と野望でよだれを垂らした者たちのカオス状態で、魑魅魍魎の世界です。
長くなってきたのでこの辺にとどめますが、HTMLとCSSだけでも、そりゃ奥深い世界です。
でも、ある程度のところまでなら、素人だろうが勉強次第であっという間に使いこなすことができますよ！！
思い立ったが吉日、素晴らしい言葉ですね～。
コメント