新卒Web編集者が「知っていてよかった」と実感した、HTMLとCSSの基礎

こんにちは、はてな編集部の川原です。大学卒業後、新卒でWebポータルサイトの編集職としてキャリアをスタートさせ、はてなには2016年12月に中途入社しました。現在は、主に企業のオウンドメディア編集に携わっています。

いきなり昔語りとなってしまい恐縮ですが、私自身のWebスキルはというと、「ふみコミュニティ」と「0574 Web Site Ranking」がランキングサイトとして全盛期だったころ（これで大体の年齢がバレる）から、個人でWebサイトを作成している程度。始めた当時は「ふみコミュ」も「0574」も、素材配布サイトや画像加工サイト*1で活気づいていたな……。無料レンタルサーバーが人気すぎて、フリーアドレスだと登録できなかったりする、いい時代でしたね。私は「たださぁば」「忍者ツールズ」「めがね部」あたりを利用し、素材サイトは「フランクなソザイ」などにお世話になってました。

徐々に有料のレンタルサーバーを使用し、自分でデザインを組んで画像を作成したり、トレンドのHTMLデザインに挑戦したりするようになりましたが、あくまで素人のお遊び程度で、仕事に生かせるとは毛ほども思っていませんでした。

ですが、当時新卒で配属されたのは、更新に力を入れ始めたばかりの女性向け総合サイトの編集部。入社した段階では編集部内も「HTMLやCSSのことはそこまで分からない」という人が多く、「あれ？ 趣味レベルでやっていたことでもWeb編集者として働く上で意外に役に立つ？」と感じることがありましたし、現在でも「Webサイトを作っていてよかったな」と感じることがあります。

そこで今回は、Web編集の業務をしていく上で「本当に超絶基礎的なことだけど知っていてよかった」と感じたHTMLとCSSの話をしたいと思います。

テキスト装飾は、色＆太字強調するだけでもメリハリがつく

Web編集者が一番よく使うCSSプロパティは、テキスト装飾にまつわることではないでしょうか。中でも、よく使用するのは「テキストの色を変える」「テキストを太字にする」だと思います。この場合は、<span>タグを使用して、対象のテキストを囲むようにすることで変化します。<span>では前後に改行が入らないので、主に文章の一部に装飾などを施したいときに使用します。

たとえば、Web記事でよく見かける以下のような会話調の形式。

Aさん　こんにちは
Bさん　こんにちは
Aさん　さようなら
Bさん　さようなら

これは、「Aさん」「Bさん」部分のテキストの色を変える設定をしています。表示形式として、次のようなものになります。

<span style="color:テキストの色指定;">Aさん</span>

<span style="color:テキストの色指定;">Aさん</span>

また、テキストを太字強調させる<b>も手軽に使えて便利なHTMLタグのひとつ。テキストの色を変える＆太字強調させるだけでもかなり雰囲気が変わります。

<b><span style="テキストの色">Aさん</span></b>　さようなら

差は以下のようになります。

Aさん　さようなら（テキストの色のみ変化）
Aさん　さようなら（テキストの色変化と太字強調）

太字強調に関しては、<b>を使わず、<span>〜</span>要素の中に入れ込むこともできます。その際に使用するのはfont-weight プロパティ。一般的にはfont-weight:bold; を使うんだな、と覚えておけば困ることはありません。設定の仕方は以下の通り。

<span style="color:テキストの色; font-weight:bold;">Aさん</span>　さようなら

設定すると、<b>を使用したときと同じ見た目になります。

HTMLに直接書き込むのではなく、head部分にstyleでCSSを記入したり、外部ファイルから呼び出したりすれば、HTML画面上では以下のようにスッキリ見せることができます。

<span class="asan">Aさん</span>　こんにちは
<span class="bsan">Bさん</span>　こんにちは
<span class="asan">Aさん</span>　さようなら
<span class="bsan">Bさん</span>　さようなら

ただし、Web編集者の場合、WebサイトのCSSファイルをいじれず、CMSのテキストエリア内だけでHTMLに直接スタイル属性を指定していろいろ設定することが多いと思います。少し高度になることもありますし、具体的なやり方については、この記事では触れないでおこうと思います。

テキストの色にもこだわりを

CSSとは少し別の話題にはなりますが、CMSの編集画面などでは、デフォルトでテキストの色パターンが用意されていることも多いはず。

もちろんこれらを活用しても問題はないのですが、せっかくなら「こだわりの色」を選んでみてもいいのでは、と思います。テキストの色を指定するカラーコードを変えるだけなので簡単です。

ちなみに、私はカラーコードを選ぶ際、次のサイトをよく利用していました。

www.colordic.org

Webサイトのデザインや記事のテイストによって、少し色を変えるだけでもかなり雰囲気が変わります。私は、 #ff3366と #cc0033と #abced8、#e95464などがお気に入りで、よく使用していました。ただし、テキストの色を変えるときは、背景色など、記事全体のバランスを加味した上で変えるようにしたほうがよいです。また、閲覧環境によって、色の見え方が若干変化することもあるので、軽微な色変化をする場合は、差がきちんと出ているのか、公開前にテストするなどしておいたほうが賢明です。

img タグに関連する話

テキスト装飾と同じくらい、Web編集者ならほぼ必ず行うこととして、「画像の貼り付け」があると思います。画像をWeb上に掲載させるとき、HTMLタグは<img~を使用します。が、ただデフォルトで貼りつけるだけではなく「こうやって貼りたい」と思うこともあるはずです。私が個人的に知っていてよかったな、と感じたCSSプロパティはvertical-align、float、overflowの3つです。

vertical-alignは「縦揃え」の指定ができる

カピバラさん

改行せず画像の横にテキストを続けて掲載する場合、何も設定しないと画像の下部分からテキストが表示されてしまうのですが、このvertical-alignを使うことで、上、中央、下などを指定することができます。

たとえば、画像の横に上揃えでテキストを表示させたい、というときはvertical-align:top;で設定します。

カピバラさん

こんな感じ。中央に表示させたい、というときはvertical-align:middle;で設定します。

ただし、vertical-alignは、インライン要素*2に適用されるプロパティのため、pã‚„divに設定しようと思っても適用外になります。また、画像とテキストが一文として捉えられてしまうため、大きな画像の隣に長いテキストを表示させたいという場合だと、以下の画像＋テキストのように、少し不恰好な表示になってしまいます。

カピバラさんカピバラさんカピバラさんカピバラさんカピバラさんカピバラさんカピバラさんカピバラさんカピバラさんカピバラさんカピバラさんカピバラさんカピバラさんカピバラさんカピバラさんカピバラさんカピバラさんカピバラさん（テキストが画像の下にいってしまう。Wordファイルに例えると挿入した画像位置の設定が「行内」になっている状況です）

floatプロパティとoverflowプロパティ

もし「画像にテキストを回り込ませたい」という場合は、floatを使うことで表示させられます。また、overflowを使えば、テキストを片側に表示しつつも、画像下に回り込まない設定をすることもできます。

floatプロパティを使用した場合

カピバラさんカピバラさんカピバラさんカピバラさんカピバラさんカピバラさんカピバラさんカピバラさんカピバラさんカピバラさんカピバラさんカピバラさんカピバラさんカピバラさんカピバラさんカピバラさんカピバラさんカピバラさんカピバラさんカピバラさんカピバラさんカピバラさんカピバラさんカピバラさんカピバラさんカピバラさんカピバラさんカピバラさんカピバラさんカピバラさんカピバラさんカピバラさんカピバラさんカピバラさんカピバラさんカピバラさんカピバラさんカピバラさんカピバラさんカピバラさんカピバラさんカピバラさんカピバラさんカピバラさんカピバラさんカピバラさんカピバラさんカピバラさんカピバラさん（画像の横、画像下に回り込みます）

float＋overflowを使用した場合

カピバラさんカピバラさんカピバラさんカピバラさんカピバラさんカピバラさんカピバラさんカピバラさんカピバラさんカピバラさんカピバラさんカピバラさんカピバラさんカピバラさんカピバラさんカピバラさんカピバラさんカピバラさんカピバラさんカピバラさんカピバラさんカピバラさんカピバラさんカピバラさんカピバラさんカピバラさんカピバラさんカピバラさんカピバラさんカピバラさんカピバラさんカピバラさんカピバラさんカピバラさんカピバラさんカピバラさんカピバラさんカピバラさんカピバラさんカピバラさんカピバラさんカピバラさんカピバラさんカピバラさん（画像の横に回り込んでいるけれど、画像下に回り込まず、そのまま下に続いていく設定になります）

ただし、floatは、回り込みを解除するためのプロパティを設定しなければいけないなど、少しやっかい（個人的にはCSSかじり始めて最初につまづいたプロパティです）だと思うので、気になる方は「float やり方」とかで調べてみるといいと思います……！（解説を諦めました）

画像の横にテキストを表示させる方法については、ほかにもdldtddで横並びにしたほうがやりやすい、という場合もあります。

上に表示したような会話調の記事（アイコン画像＋横にテキストで、記事が進む）では、floatではなくdldtddを使用しているパターンもありそう。

画像貼り付け時の設定は、「いろんなやり方がある」ということが分かっていれば、いざ設定するときに、選択肢の幅が広がると思います。

marginとpaddingの使い分け

marginは対象要素の外側の余白をどのくらいあけるか、paddingは要素の内側の余白をどのくらいあけるのか、という違いがあります。Webで記事を作成する際には、「画像とテキストの間に余白をあけたい」「divで囲った部分に、バランスよくテキストを入れたい」というときに、使用することが多いプロパティだと思います。

divで囲った部分に、バランスよくテキストを入れたい

何もしていないと、以下のような見え方になります。

囲いの外

この囲っている部分は、marginã‚‚paddingも設定していません。そのため、テキストが枠内めいっぱいに表示されて、窮屈な印象に見えてしまいます

囲いの外も窮屈

paddingだけ設定して、marginは設定しないと、以下のような見え方になります。

囲いの外

この囲っている部分は、padding:10px;のみ設定しています。枠内にゆとりがあるので、何も設定していないものに比べてだいぶ見やすくなっているはず

囲いの外はまだ窮屈

marginã‚‚paddingも設定すると、こんな感じ。

囲いの外

この囲っている部分は、divにstyle指定でmargin:10px;とpadding:10px;をそれぞれ設定しています。要素の「外側」と「内側」にそれぞれ余白があいているのが分かると思います。ちなみにmarginの余白部分には背景色は反映されません

囲いの外にも余裕が！

好みは人それぞれなので「この表示が正解」というのはありませんが、記事内で独立させて表示させたいブロックがある場合は、ぜひdivと組み合わせて使ってみてはいかがでしょうか。簡単にできるので、HTML・CSS初心者も覚えておきたい要素です。

画像とテキストの間に余白を入れたい

ブロック要素*3（divã‚„pといった、ひとかたまりとなるもの）に使用することが多いmarginとpaddingですが、インライン要素*4（aã‚„spanなど、文章の一部として扱われるもの）の中で、imgはブロック要素と同じ様にmarginとpaddingを設定することが多いプロパティです。

普通に設定していると、「画像とテキストの間がつまっているな」と思うこともあると思います（上記画像とこのテキスト）。

そんなときは、marginで、画像のまわりに余白を入れてみるといい感じになることも。

margin-bottom:20px;ã‚’imgタグに設定して、いい感じの空白があきました。

ほかにもやり方は複数あるので（対象のp部分にCSSでmarginをかける、というのもアリです）、自分にとって「やりやすい」設定方法を見つけると、記事制作作業がはかどるはずです。

ちなみに私は、divタグでimgを囲うやり方がCMS編集画面などで記事を投稿するときは楽かな、と感じました。

imgを囲っているdivにmargin-bottom:30px;を設定しました。

marginとpaddingは上下左右バラバラでも設定できる

marginとpaddingは、上右下左まとめて指定するだけでなく、それぞれ異なる値を設定することも可能です。HTMLとCSSを覚えたてのころは、この指定方法があることを知らなかったので、margin-topmargin-bottommargin-rightmargin-leftを一つずつ設定していました……。あと、いつまで経っても「値を3つ指定」「値を4つ指定」のときの順番がこんがらがります。

設定のやり方	反映される値
値を1つ指定	「上下左右」すべて同じ値のmargin（padding）が設定される
値を2つ指定	「上下」「左右」が同じ値のmargin（padding）が設定される（設定は記述順）
値を3つ指定	「上」「左右」「下」のmargin（padding）が設定される（設定は記述順）
値を4つ指定	「上」「右」「下」「左」のmargin（padding）が設定される（設定は記述順）

また、上の部分で少し触れていますが、margin-top:数値;といった形で設定することも可能です。paddingも同様です。

プロパティ	使いみち
margin-top	上のマージンを指定する
margin-bottom	下のマージンを指定する
margin-right	右のマージンを指定する
margin-left	左のマージンを指定する

「他の値は0で、一箇所だけmargin（padding）を設定させたい」というときは、この個別指定のプロパティを使用すると、間違えにくくなります。

余白の数値設定はpx？ em？

いざ余白の数値を設定しようと思ったとき、「1px」や「1em」といった単語を見て、「どれを使えばいい？」と悩むと思います。私がmarginã‚„paddingを覚え始めたころはpx（ピクセル単位）全盛期だった記憶があるのですが、今はスマートフォンに対応したWebサイトも多いため、レスポンシブデザインと相性のよいemã‚„rem（親またはルートの文字要素単位）がよく使われているようです。

表現したい「こだわり」があれば、スキルはきっとついてくる

とまぁ、ここまでつらつらと書いているのですが、正直HTMLとCSSの知識がまったくなくても、「なんとかなる」ことは事実です。

今は、はてなブログのような、記事編集画面からテキストと画像を入れるだけでOK、といったCMSのシステムを導入しているポータルサイトやオウンドメディアも多いかと思います。

はてなブログは、HTMLやCSSの知識がなくてもメリハリのあるブログ記事が書けるようになっています

ちなみに前職や、私個人が以前から作成しているWebサイトでは、WordPressを使用していました。はてなブログもそうですが、基本的にCMSであれば直感的に使用できるので、「ここは見出しをつけたい」「テキストの色を変えたいな」と思ったとき、編集画面のボタンをクリックするだけで、装飾は一通りできてしまいます。

でも、せっかくならば、より美しくページを表示させたり、思ったようなレイアウトを見せたいところ。そういった「ひと工夫」ができるかどうかも、Web編集者にとっては腕の見せ所です。

§

サイト全体のデザインや構造まで……となると、それこそ知識を深めていかないと厳しい面もあると思いますが、一つの記事に対して「ココだけこうやって見せたい！」といったこだわりは、少しCSSを設定するだけで十分実現可能。書き手の文章をよりよく見せるには、そういった「こだわり」が大事なことだと思いますし、HTMLとCSSの表現でアシストできるのはWeb編集者の醍醐味ではないかな、と思います。

実装するのは独学レベル（私自身、誰も教えてくれなかった！）でも、意外となんとかなる。くわしいことは分からなくても、たとえば「この画像の下は1emあけるべき？ それとも1.5emあけるべき？」ということで悶々と悩むことができるのが一番重要で、HTML・CSSスキルはやる気次第でいくらでもついてくる……はず……です！

はてなでは、画像にテキストを回り込ませるfloatのやり方を知っていたり、MarkdownとHTMLが混在する記事をうまく処理できたりする編集者を募集しています。

hatenacorp.jp

イラスト素材：かわいいフリー素材集 いらすとや

*1:素材画像を組み合わせて、Webサイトに使用する画像を作ってくれたりBBSで使用するアイコンをGIF動画加工してくれる個人サイト

*2:インライン要素とブロック要素については後述

*3:HTML5では（フレージング・コンテンツではない）フロー・コンテンツにほぼ相当

*4:HTML5ではフレージング・コンテンツにほぼ相当