Loading...

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で表現されているので、コピペするだけで実装できます。

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

おわりに

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

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

コメント

タイトルとURLをコピーしました