Webポータルサイトの編集職としてキャリアをスタートさせ、はてなには2016年12月に中途入社しました。現在は、主に企業のオウンドメディア編集に携わっています。Ranking」がランキングサイトとして全盛期だったころ(これで大体の年齢がバレる)から、個人でWebサイトを作成している程度。始めた当時は「ふみコミュ」も「0574」も、素材配布サイトや画像加工サイト*1で活気づいていたな......。無料レンタルサーバーが人気すぎて、フリーアドレスだと登録できなかったりする、いい時代でしたね。私は「たださぁば」「忍者ツールズ」「めがね部」あたりを利用し、素材サイトは「フランクなソザイ」などにお世話になってました。徐々に有料のレンタルサーバーを使用し、自分でデザインを組んで画像を作成したり、トレンドのHTMLデザインに挑戦したりするようになりましたが、あくまで素人のお遊び程度で、仕事に生かせるとは毛ほども思っていませんでした。当時新卒で配属されたのは、更新に力を入れ始めたばかりの女性向け総合サイトの編集部。趣味レベルでやっていたことでもWeb編集者として働く上で意外に役に立つ?」と感じることがありましたし、現在でも「Webサイトを作っていてよかったな」と感じることがあります。そこで今回は、Web編集の業務をしていく上で「本当に超絶基礎的なことだけど知っていてよかった」と感じたHTMLとCSSの話をしたいと思います。em?表現したい「こだわり」があれば、スキルはきっとついてくるテキスト装飾は、色&太字強調するだけでもメリハリがつくWeb編集者が一番よく使うCSSプロパティは、テキスト装飾にまつわることではないでしょうか。中でも、よく使用するのは「テキストの色を変える」「テキストを太字にする」だと思います。この場合は、<span>タグを使用して、対象のテキストを囲むようにすることで変化します。<span>では前後に改行が入らないので、主に文章の一部に装飾などを施したいときに使用します。Web記事でよく見かける以下のような会話調の形式。さようならこれは、「Aさん」「Bさん」部分のテキストの色を変える設定をしています。表示形式として、次のようなものになります。style="color:テキストの色指定;">Aさん</span>また、テキストを太字強調させる<b>も手軽に使えて便利なHTMLタグのひとつ。テキストの色を変える&太字強調させるだけでもかなり雰囲気が変わります。さようなら差は以下のようになります。さようなら(テキストの色変化と太字強調)太字強調に関しては、<b>を使わず、<span>〜</span>要素の中に入れ込むこともできます。使うんだな、と覚えておけば困ることはありません。設定の仕方は以下の通り。さようなら設定すると、<b>を使用したときと同じ見た目になります。HTMLに直接書き込むのではなく、head部分にstyleでCSSを記入したり、外部ファイルから呼び出したりすれば、HTML画面上では以下のようにスッキリ見せることができます。さようならただし、Web編集者の場合、WebサイトのCSSファイルをいじれず、CMSのテキストエリア内だけでHTMLに直接スタイル属性を指定していろいろ設定することが多いと思います。高度になることもありますし、具体的なやり方については、この記事では触れないでおこうと思います。テキストの色にもこだわりをCSSとは少し別の話題にはなりますが、CMSの編集画面などでは、デフォルトでテキストの色パターンが用意されていることも多いはず。これらを活用しても問題はないのですが、せっかくなら「こだわりの色」を選んでみてもいいのでは、と思います。テキストの色を指定するカラーコードを変えるだけなので簡単です。ちなみに、私はカラーコードを選ぶ際、次のサイトをよく利用していました。www.colordic.orgWebサイトのデザインや記事のテイストによって、少し色を変えるだけでもかなり雰囲気が変わります。#abced8、#e95464などがお気に入りで、よく使用していました。テキストの色を変えるときは、背景色など、記事全体のバランスを加味した上で変えるようにしたほうがよいです。閲覧環境によって、色の見え方が若干変化することもあるので、軽微な色変化をする場合は、差がきちんと出ているのか、公開前にテストするなどしておいたほうが賢明です。タグに関連する話テキスト装飾と同じくらい、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を使えば、テキストを片側に表示しつつも、画像下に回り込まない設定をすることもできます。やり方」とかで調べてみるといいと思います......!(解説を諦めました)画像の横にテキストを表示させる方法については、ほかにも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つ指定」のときの順番がこんがらがります。margin(padding)が設定される(設定は記述順)また、上の部分で少し触れていますが、margin-top:数値;といった形で設定することも可能です。paddingも同様です。左のマージンを指定する「他の値は0で、一箇所だけmargin(padding)を設定させたい」というときは、この個別指定のプロパティを使用すると、間違えにくくなります。em?いざ余白の数値を設定しようと思ったとき、「1px」や「1em」といった単語を見て、「どれを使えばいい?」と悩むと思います。私がmarginやpaddingを覚え始めたころはpx(ピクセル単位)全盛期だった記憶があるのですが、今はスマートフォンに対応したWebサイトも多いため、レスポンシブデザインと相性のよいemやrem(親またはルートの文字要素単位)がよく使われているようです。表現したい「こだわり」があれば、スキルはきっとついてくるとまぁ、ここまでつらつらと書いているのですが、正直HTMLとCSSの知識がまったくなくても、「なんとかなる」ことは事実です。今は、はてなブログのような、記事編集画面からテキストと画像を入れるだけでOK、といったCMSのシステムを導入しているポータルサイトやオウンドメディアも多いかと思います。はてなブログは、HTMLやCSSの知識がなくてもメリハリのあるブログ記事が書けるようになっていますちなみに前職や、私個人が以前から作成しているWebサイトでは、WordPressを使用していました。はてなブログもそうですが、基本的にCMSであれば直感的に使用できるので、「ここは見出しをつけたい」「テキストの色を変えたいな」と思ったとき、編集画面のボタンをクリックするだけで、装飾は一通りできてしまいます。美しくページを表示させたり、思ったようなレイアウトを見せたいところ。いった「ひと工夫」ができるかどうかも、Web編集者にとっては腕の見せ所です。§サイト全体のデザインや構造まで......となると、それこそ知識を深めていかないと厳しい面もあると思いますが、一つの記事に対して「ココだけこうやって見せたい!」といったこだわりは、少しCSSを設定するだけで十分実現可能。書き手の文章をよりよく見せるには、そういった「こだわり」が大事なことだと思いますし、HTMLとCSSの表現でアシストできるのはWeb編集者の醍醐味ではないかな、と思います。実装するのは独学レベル(私自身、誰も教えてくれなかった!)でも、意外となんとかなる。それとも1.5emあけるべき?」ということで悶々と悩むことができるのが一番重要で、HTML・CSSスキルはやる気次第でいくらでもついてくる......はず......です!はてなでは、画像にテキストを回り込ませるfloatのやり方を知っていたり、MarkdownとHTMLが混在する記事をうまく処理できたりする編集者を募集しています。»このブログについて株式会社はてなの編集スタッフが「編集」に関するさまざまな記事をお届けします。月別アーカイブ関連ブログはてなブログをはじめよう!hatenaeditorさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。