はじめに「HTMLとCSS」の基本
HTMLとは
WEBデザインスクールで講師もしていましたので、「HTMLとは」だけで語りだすと1時間ぐらい余裕ですが（笑）、今回は超カンタンにまとめます。
まず「Hyper Text Markup Language」の頭文字4つをとって「HTML」と略しています。
分かりやすく説明すると、前半の「ハイパーテキスト」はリンクし合う文章。後半の「マークアップランゲージ」とはマークアップされた言語です。
ハイパーテキストはイメージしやすいと思うのですが、後半のマークアップランゲージです。
例えば「神泉太郎、東京都、マーケター」といった情報があったとします。
なんとなく、神泉太郎さんは、東京出身か住んでいるかの方で、マーケティングの仕事をしているのかな？と想像つきますが、これを仮に次のようにマークアップしてみると一目瞭然です。
（※）ここで例に出すマークアップのタグは実際には存在しません。
<出身>東京都</出身>
<仕事>マーケター</仕事>
このように「マークアップ」することで、文章情報に意味を持たせることができますよね？
要するにコンピューターに対して「この文章はこういう意味です」と伝えるための言語が「マークアップランゲージだ」とここでは覚えておいてください。
CSSとは
続いて「CSS」です。
「Cascading Style Sheets 」の頭文字3つから「CSS」と略しています。
元々HTMLは「言語」なので、デザイン（見た目の制御）をするという概念を持っていません。デザイン＝ここでは文字の色、太字にしたい、下線をつけたい、背景色をつけたい等も含めますが、これらは「CSS」で制御しましょうというのが、そもそものWEB制作上での概念だと押さえておきましょう。
ルール違反をしたらどうなるのか？
今、HTMLでは見た目の制御を行わず、CSSで行いましょうと言いました。
これは制作におけるルールですし、一民間企業が決めたことでもありません。基本はW3Cと呼ばれる、WEBの世界標準を定める機関があり、全世界のクリエイターはその方針に従って制作をしているとイメージしてください。
ただこの機関は様々な方針などを決めますが、法的拘束力は持っていません。ですのでルールを破っても実害はゼロなので安心してください。
しかし、SEOであったり、あるいはルールに従わず制作をしてしまうことで、ある環境のユーザはそのWEBサイトを閲覧できない…など、見ている方に不利益のあること。結果自社にとっても何も良くないです。
しかし、これを現場の方に「覚えろ！」というのはムリがあるので、なんとなく理由があって、みんなルール下でコードを書いているんだなぁ…とだけ覚えておいてください。
CMSだけでは痒い所に手が届かない
「CMSの選び方」とインターネットで検索してみてください。いわゆる商用CMSのメーカー様の広告が表示されます。
どれでも良いので見ていただくと、ほぼ各社「見たまま編集」として簡単にWEBサイトを更新できることをウリにしています。
それは事実なのですが、どのCMSでも例えば「太字にしたい」とCMSの機能で「簡単」に設定すると、HTML上では「<b>」か「<strong>」でマークアップされます。
これ、先のルールで行くと必ずしも正しくはないのです。「<b>」は「太字にする」という意味のタグで、これは現在では推奨されません。
なぜならHTMLでデザインの制御を行うタグです。
また「<strong>」は強調タグで、コンピューター（Googleなど検索エンジン含む）に対して「このキーワードが重要です」と宣言したことになります。
それが正しければ良いのですが、ほとんどコラムたやブログで太字にしたい場合、強調したいと言えばそうだけど、実はそこまでオーバーでなく、読み手の方に注意を惹きたい程度ですよね？
当コラムでもいくつかすでに太字の個所があります。これら全てCMS上で私自身が「CSS」で装飾をしています。
では、どうすればそれが出来るのか、皆様にコピペしていだけるように、紹介していきます。
現場の方が知っておくと便利なHTML＆CSS5選
太字にしたい
さっそく先の「太字にしたい」場合、次のコード（赤字にした箇所）をそのままコピペして使ってください。
赤字にしたい
では次に赤字にしたい場合。ここはチカチカしそうで申し訳ありませんが（汗）次のコードで（青字にした箇所）をそのままコピペして使ってください。
このコラムで使用している背景灰色の枠線が欲しい
このコラム内で使っている背景灰色の枠線も私がオリジナルで作ったものですが、公開しますのでご自由にお使いください。
リンク先ってどのように指定されているの？
通常CMSでは、機能でリンク先の指定が簡単に行えますが、コードが読めれば修正の際、むしろCMSの機能を使うより簡単だったりするので覚えておくと便利です。
こちらに記載されているURL（https://で始まるもの）を任意のものに変えましょう。あと上記を実際にクリックしていただくと、ネクストソリューションズのトップページが別タブで開いたと思います。これを別タブで開きたくない場合「target=”_blank”」を削除してください。
alt（代替テキスト）を覚えましょう
最後、現場の方が押さえておきたいHTML＆CSSは悩みましたが「alt」です。
アクセシビリティについてもコラムを出しており、特にこのリンク先にある「資格に障がいがある方向けの対応」をご覧いただければと思いますが、画像や写真はコンピューターは読み取れません。
通常画像は次のようなコードで配置するケースが多いのですが、下記の赤字の個所。altと記され「ダブルクォーテーション」で囲まれ「代替テキスト」とありますが、ここに適切な日本語を入力するようにしましょう。
ここに記された文字しかコンピューター、Google等は読めません。ですので「画像」や「バナー」などは相応しくありません。
なぜならば視覚に障がいがある方は、音声ブラウザでaltに書かれたメッセージを読み取って情報を収集されているので「バナー」と言われてもナゾですよね？
必要なものはバナーに記されているメッセージを記載しましょう。例えば「期間限定30%オフキャンペーン」のバナーであれば、そのままCMSを使って登録しましょう。
これはSEOにも影響してきます。
まとめと注意事項
実際、WEBサイトのご担当者様は「もっとこんなことがしたいなぁ」というご要望が沢山あると思います。
本当はもっといろいろなことを公開したいのですが、正直やりすぎるとレイアウト崩れが起きることもあります。
私の場合、WEBサイトの担当者なのですが、たまたま昔、実際にWEBデザイナーという技術者をやっていましたし、社会人向けのWEBデザインスクールで講師も務めさせて頂いた程度には、制作のスキルもあるので、仮にレイアウト崩れ起こしても、自分で解決する方法を調べて対応することが可能ですが、ここまでは求めない方が良いです。
本来CMSはレイアウトのテンプレートが備わっていて、そのまま文字だけ変更しましょう。というものなので自由度が低いのはやむを得ない側面もあるのです。
ただ文字色を自由に変えたいなぁ…太字にしたいなぁ…枠線書けたら良いなぁ…などまさに私自身がこのコラムを執筆している上で感じ、自分用に色々書いてみたコードを今回は公開してみましたので、ご自由にお使いください。
ただ注意事項として、レイアウトが崩れた…なども慣れていないと起きる可能性があります。ですので、必ず作業前にバックアップをとって、元に戻せるようにだけしておいてください。
このコラムがきっかけで、皆様の会社のコラムやブログが充実することを願っています！
