htmlテンプレートを使いこなすためのヒント集

htmlテンプレートを編集してサイトを作る場合、慣れないうちはどう編集したらよいかわからず、あれこれ調べたり試しているうちに時間がかかってしまい、挫折のもとになります。

そこで、テンプレートをサクサク編集するための便利な小技やヒントを、思いつく限り集めてみました。今後も何か見つけたら、新しく紹介していきます。

html/cssを使いこなして、楽しくサイトを作りましょう！

初心者編

検索や一括置換を活用しよう

たいていのテキストエディタには、検索や置換機能がついています。これを活用すると、編集漏れ防止や編集効率アップにつながりますのでバリバリに使いこなしていきましょう。

WindowsならCtrl+F、Macなら⌘Fで検索窓が開くはず。

テキストエディタで検索窓を開いたところ — Windowsのメモ帳でも開けました

また、テキストエディタには置換機能もついています。Atomでは、Ctrl+F（⌘F）で検索窓を開くと、その下に置換用のボックスがついています。そのほかのテキストエディタにも置換機能があるはずなので、わからない場合は調べてみてください。

例えば「検索文字列」に「あいうえお」、「置換文字列」に「かきくけこ」と入力します。

この状態で「すべて置換」を選ぶと、文章中の「あいうえお」がすべて「かきくけこ」に置換されます。

例えば、style.cssの中のカラーコードを一括置換すれば、漏れなくサイトの色を変更することができます。楽～！

特定のページだけデザインを変えるには

例えば、インデックスページだけ背景を変えたいなどの場合は、デザインを変えたいhtmlファイルに直接cssを書き込むと、そのページにだけスタイルが適用されます。

cssを書く場所は、</head>（head閉じタグ）の直前です。<style>～</style>で囲んだ中に、適用したいcssを書いてください。

<html>
<head>
～中略～
<link rel="stylesheet" href="css/style.css">
～中略～
<style>
// ここに適用したいcssを書きます
body {
background: none;
}
</style>
</head>

詳しくは以下のページをご参照ください。

メッセージへのお返事：特定のページだけ背景をなくす方法

「インデックスページだけ、背景をなくしたい」というご要望メッセージへのお返事です。

中級者編

デベロッパーツールを使ってみよう

html/cssの扱いに慣れてきて、もっと自由にカスタマイズしたい方は、デベロッパーツールを使ってみましょう。

このページではGoogle Chromeのデベロッパーツールについて解説しますが、FirefoxやIEなどのブラウザにも実装されていますので、Chrome以外のブラウザをお使いの方は各自で使い方を調べてみてください。

デベロッパーツールを使うと、各要素にcssのどんなスタイルが割り当てられているかが一目でわかります。バリバリにカスタマイズをしたい方には必須のツールです。

Google Chromeの場合、F12キーを押すか、右クリック→検証を選ぶことでデベロッパーツールを呼び出せます。

これはSimple Sliderの「What’s new？」の見出しを、デベロッパーツールで検証しているところです。style.cssの123行目の「h2」に対するスタイルと、858行目の「h2-cクラスを持ったh2」に対するスタイルが適用されていることがわかりました。

例えば、この見出しの下についている点線を消したければ、style.cssの858行目の「border-bottom: 1px dotter #cccccc;」を消せばよいということが、デベロッパーツールでわかります。

さらにこのデベロッパーツールのすごいところは、ブラウザ上でcssを書き換えて、どう変わるかがその場でテストできるという点です。

デベロッパーツールを活用しているところ — 見出しの色がtomatoに変わりました

このテストでデザインを調整し、好みな感じになったら、style.cssをテストと同じように編集してサイトに反映させましょう。

もっと詳しいデベロッパーツールの使い方は、こちらの記事をご参照ください。

【動画・画像あり】HTMLテンプレートカスタマイズに不可欠！デベロッパーツールの使い方を解説！

CSSを編集してサイトをカスタマイズしたいけど、どういじればいいの？思うようにカスタマイズできない……。デベロッパーツールを使えば一発解決！ブラウザからCSSの編集・プレビューをすることができる、Web制作者にとっては心強いツールです。この記事ではデベロッパーツールの使いかたを画像付きで解説します。

デザインを調整するとき、主に編集する箇所

色関係

プロパティ名	対応箇所	記述例
background	背景。色だけでなく画像なども指定できますが、当サイトでは主に色を指定しています	transparent（透明）、 white,#ffffffなど
color	文字色	blackなど色名 #333333などコード
border	枠線 border-leftで左横線のみつけたり、 border-bottomで下線のみつけることが多い	1px solid #333333など太さ・スタイル・色を一括指定する

大きさ・スペース関係

プロパティ名	対応箇所	記述例
font-size	文字サイズ px単位か、%指定が主	16px 150%
font-weight	文字の太さ	solidもしくはbold 100刻みの単位の場合も
padding	要素の内側の余白	主にpx 10pxと書くと、上下左右10px 10px 20pxだと上下10px、左右20px 10px 20px 30px 40pxで上から時計回りに10px、20px、30px、40px
margin	要素の外側の余白	主にpx、もしくはauto 書き方はpaddingに同じ

補足：padding、marginについて

デベロッパーツールで検証したとき、青い部分が要素の大きさで、緑がpadding、オレンジがmarginの領域です。paddingとmarginの間にborderがあります（この場合だと左側の黒い線がborderです）。この要素にbackground:grayを指定したとき、padding領域には色が付きますが、marginは要素の外側であるため色がつきません。

もっと詳しく知りたい方は、TAG indexなどのサイトを参考にしてみてください。