Template Party

Google Chrome(グーグルクローム)を使ってhtmlを編集してみよう

CSS編集の前に

CSS(スタイルシートファイル)とは

画像以外の色や、文字色やサイズ、ボックスデザインなど、様々な装飾をまとめて指定するファイルで、テンプレートのcssフォルダに入っています。拡張子は「.css」で、メインとなるスタイルシートはstyle.css(※弊社テンプレートの場合)になります。

CSS編集の前にバックアップを必ずとっておきましょう。

ChromeのCSSパネルで編集すると、直後に実際のcssファイルに上書き保存されるようです。※当マニュアル制作時。
取り返しがつかなくなるので、編集前にCSSフォルダごとバックアップをとっておいて下さい。

編集途中、前の段階に戻りたくなったら

以前のステップでも紹介していますが、「Ctrl(macは⌘) + Z」で1段階前に戻る事ができます。戻りすぎてしまった場合は「Ctrl(macは⌘) + Shift + Z」でやり直しができます。

過去のステップを一通りご覧になった方への解説になります

Chromeのデベロッパーツールの簡単な知識はあるとして、以下、紹介させて頂きます。

メイン画像のスタイル確認をしてみる

メイン画像に適用されているドロップシャドウ、角丸の指定箇所の確認です。
(※画像内の再生ボタンを押すと動画が再生されます。約1分12秒。)

背景色のスタイル確認をしてみる

ホームページ枠の外側(bodyタグ)の色の確認です。
(※画像内の再生ボタンを押すと動画が再生されます。約1分8秒。)

文字色、文字サイズを確認してみる

引き続き、bodyタグのスタイルの確認です。今回は文字色や文字サイズの変更をしてみます。
(※画像内の再生ボタンを押すと動画が再生されます。約1分21秒。)

写真画像のサイズを変更してみる

パンの写真サイズを変更してみます。
(※画像内の再生ボタンを押すと動画が再生されます。約49秒。)

h2見出しを変更してみる

見出しの背景色や文字色、角丸指定を変更をしてみます。
(※画像内の再生ボタンを押すと動画が再生されます。約49秒。)

h2見出しの文字サイズを新規で追加してみる

h2見出しには文字サイズ指定が入っていないようなので、新規で追加設定してみます。
(※画像内の再生ボタンを押すと動画が再生されます。約56秒。)

CSSファイル本体を見てみる

style.cssファイル本体を見てみます。
(※画像内の再生ボタンを押すと動画が再生されます。約50秒。)

<< 「初心者向け講座」メニュー一覧に戻る