「アノウェブ」は、Web業界15年の”アノ”が、小さな事業のWebのモヤモヤを日常の言葉にほどいていくブログです。制作会社ではないので、売り込みはありません。
前回はWordPressの「自分で更新できる」の意味についてお伝えしました。
今回はホームページの土台になっている「HTML」と「CSS」という言葉を、コーディングにはくわしくない方にも分かるようにお伝えします。
HTMLは、ページの「中身」を作る言葉
HTML(エイチティーエムエル、 HyperText Markup Language)は、見出しや本文の文章、写真といったコンテンツについて、「ここが見出し」「ここが本文」というように構造を指定しながら、実際に文章などコンテンツも書き込んでいくための言葉です。
構造というと、その骨格だけで内容が無いように感じられるかもしれませんが、伝えたい文章そのものはここにすでに書き込まれています。
家づくりでいえば柱や壁の位置を決めるだけでなく、必要な家具なども部屋の中に置いた状態です。
ただ、壁紙もまだ貼られておらず、照明の色も決まっていない、全く飾り気のないスケルトンのような見た目の状態です。
CSSは、その中身に「見た目」を与える言葉
CSS(シーエスエス、Cascading Style Sheets)は、HTMLで書き込んだ中身に色や文字の大きさ、余白といった見た目を指定していく言葉です。
同じ文章・同じ構成のホームページでも、CSSの指定次第で、印象はまったく別物になります。
家づくりでいえば壁紙や外壁の色、照明選択、内装などの指定にあたります。
内装の選び方で雰囲気ががらっと変わるのとにています。
この2つが分かれているおかげで、更新がしやすくなる
中身(HTML)と見た目(CSS)が分かれているおかげで、文章だけを差し替えても見た目は保たれたままになります。
逆にデザインだけを変えたいときも、書き込まれた文章部分を触らずに更新することができます。
以前お伝えしたWordPressのようなCMS(中身を管理する仕組み)は、この中身と見た目のやり取りを、専門知識がなくても扱えるように橋渡ししてくれている仕組みも含んでいます。
自分でコードを書く必要は、基本的にありません
「コーディング」とは、HTMLやCSSなどの言葉を使って、実際にホームぺページを組み立てていく作業のことです。
日々の運用でホームページを更新するときに、基本的にはコーディングの知識は不要です。
WordPressをはじめとするCMSには、更新作業がしやすいようにエディター（編集を支援する機能）が合わせて用意されていることがほとんどです。
このエディターをつかって、まるでWord文書やプレゼンテーション資料をつくるような感覚で編集可能です。
ただ、通常の更新できる範囲外の部分の変更要望を制作会社に伝えるとき、HTMLとCSSという言葉の役割を知っているだけで、話がとても通じやすくなります。
「文章や写真そのものを扱うのがHTML」「その見た目を整えるのがCSS」という役割だけ覚えておけば十分です。
次回は、スマートフォンやiPadのようなタブレット端末で見たときに見え方が変わる「レスポンシブ」という仕組みについてお伝えします。