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

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

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

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

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

初心者編

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

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

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

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

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

テキストエディタAtomで置換窓を開いたところ

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

テキストエディタの置換機能を使ってみる

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

テキストエディタの置換機能を使ってみる

例えば、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キーを押すか、右クリック→検証を選ぶことでデベロッパーツールを呼び出せます。

Googleデベロッパーツールを使っているところ
Googleデベロッパーツールを使っているところ

これは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をテストと同じように編集してサイトに反映させましょう。

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

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

色関係

プロパティ名 対応箇所 記述例
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の領域です。paddingとmarginの間にborderがあります(この場合だと左側の黒い線がborderです)。この要素にbackground:grayを指定したとき、padding領域には色が付きますが、marginは要素の外側であるため色がつきません。

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

上級者編

ここからは、htmlやcssの挙動がなんとなくわかったぜ!という方向けです。自分でstyle.cssを編集し、classを追加したりできる方のみ、取り組んでみてください。

綺麗なデザインのボックスやボタンを追加する

style.cssに少し追記すれば、きれいなデザインのボックスやボタン、リストなどを追加することができます。

外部サイトですが、こちらにはあらかじめきれいにデザインされたボックス・ボタン・見出しなどがいろいろ紹介されています。すべてCSSで表現されているので、コピペするだけで実装できます。

ただし、コピペしてそのままだと、テンプレートで使っているスタイルと少しかみ合わない箇所が出てくるかと思いますので(余白など)、デザインがずれてしまう場合などは、デベロッパーツールを使って調整してください

おわりに

慣れないうちはテンプレートの編集は大変ですが、編集を終えて公開できたときの達成感は素晴らしいです。

ぜひ、ここで紹介した技を活用し、快適なサイト作りに役立ててください!

   【PR】HTML/CSSを基礎から勉強したい方へ

HTML/CSS初心者のための書籍を執筆しました

個人サイトを作ろう! テンプレートですぐできる!すぐに身につく!HTML&CSS

これから初めてHTML・CSSに触れる方や、過去に個人サイトを作ったことがあるけど、最新のHTML・CSSやウェブサイト制作を学び直したい!という方に向けた、創作・同人サイトを作るための本です。
書籍購入者には特典として、「do」でも配布していないオリジナルHTMLテンプレート3種が利用できます。本書では、このテンプレートを実際に自分で編集することでHTML・CSSを学んでいくため、初めての方でも理解しやすい内容に仕上がっています。
「do」では紹介しきれなかった、サイト制作の基礎の基礎から網羅した入門にオススメの書籍です。ぜひお手に取ってみてください!

Amazonで購入する