ブラウザの開発ツールを使って知識ゼロから始めるCSS編集(2)「CSS編:開発ツールを使ったCSS編集のやり方」

前回は開発ツールを使ってウェブリブログのレイアウトの仕組みを説明しましたが、今回は開発ツールを使ってCSS編集をやっていきます。


ダラダラと文章で説明するよりは、開発ツールを操作しながら説明した方が分かりやすいと思うので、まずはこのページで開発ツールを起動してみて下さい(Windowsの場合はF12キーを押す)。


すでにお気づきだと思いますが、このページにアクセスした時、画面左上に「テスト用の枠」と書かれた四角い枠が表示されているはずです(枠が表示されるのはPCのブラウザで見た時のみです)。


css11.jpg


まずは、開発ツールのHTML上で「<div class='test_waku'>テスト用の枠</div>」をクリックして、テスト用の枠のCSSを表示させてみましょう。


テスト用の枠のCSSには、よく使う基本的な設定項目を一通り書いておきました(色や大きさの値は適当です)。


<test_wakuのCSS>

.test_waku {
 color: #ff0000; /* 文字の色 */
 font-family: ; /* 文字のフォント */
 font-size: 15px; /* 文字のサイズ */
 font-weight: bold; /* 文字の太さ */
 font-style: oblique; /* 文字の斜体 */
 line-height: 1.5; /* 文字の行間 */
 background-color: #ffffff; /* 背景色 */
 background-image: ; /* 背景に画像を使う */
 border-width: 3px; /* 枠線の太さ */
 border-style: solid; /* 枠線のスタイル */
 border-color: #0000ff; /* 枠線の色 */
 margin: 10px; /* 枠の外側の余白 */
 padding: 10px; /* 枠の内側の余白 */
 width: 300px; /* 枠の横幅 */
 height: 100px; /* 枠の高さ */
 display: block; /* 表示形式(ここをnoneにすると枠が消える) */
 position: fixed; /* 枠の配置方法(fixedは画面をスクロールしても画面の同じ場所に固定される) */
 top: 50px; /* 枠の位置(上からの距離) */
 bottom: ; /* 枠の位置(下からの距離) */
 left: 50px; /* 枠の位置(左からの距離) */
 right: ; /* 枠の位置(右からの距離) */
 z-index: 100; /* 重なりの順序(値が大きいものほど手前に表示される) */
}

スタイルシート[CSS]/CSSプロパティ一覧 - TAG index
CSSの設定項目に関して詳しく知りたい方は、↑のサイトなどを参考にして、いろいろ試してみて下さい


開発ツールの素晴らしいところは、開発ツール上でこの設定項目の値を変えると、それが画面上に表示されているWebページに即座に反映されることです。


css12.jpg


例えば、「font-size: 15px;」の15pxところを30pxに変えると、「テスト用の枠」という文字が2倍の大きさになるはず。


しかも、この変更はあくまで自分が見ているブラウザ上だけのもので、実際のページには何の影響も及ぼさないので、好き勝手に値をいじることができます。


もし仮にページがメチャクチャになったとしても、再読み込みをすれば一発で元に戻ります。


HTMLやCSSの知識がない人にとっては、15pxの「px」という単位は何?だとか、「#ffffff」みたいな書き方はどういう意味なのかとか、widthとかpaddingとか聞いたことない単語のオンパレードで、様々な疑問が湧いてくると思いますが、まずは細かいことは気にせず、CSSの数字を変えるだけで画面上の枠がいろいろと変化する様子を確認してみて下さい。(ちなみに色に関しては、「0~9」までの数字だけじゃなくて「a~f」までのアルファベットも使えるので、いろいろ変えて遊んでみて下さい)


開発ツールを使えば、管理画面のCSS編集で値を変えるたびに、わざわざプレビューを開いて確認する手間が省けるので、作業時間をかなり短縮することができます。


次は、実際に開発ツールを使ってブログのデザインを変えるまでの手順を説明していきます。


今回は、例題として記事ページの記事のタイトルの背景色を変えてみようと思います。


まずは、前回説明した方法を使ってHTMLの中から記事ページの記事のタイトル部分を囲んでいるタグを探します。


css13.jpg

(1)開発ツールの左上にある矢印ボタンをクリックする
(2)記事ページの記事のタイトル部分をクリックする
(3)開発ツール上に記事のタイトル部分のHTMLとCSSが表示される


背景色はbackground-colorの項目で設定できるんですが、ここでちょっとしたテクニックをご紹介。


css14.jpg


background-colorの値の横にある色の付いた丸いマークをクリック(ブラウザによってはマークが四角)すると、色を設定する便利なツールが出てきて、色の指定方法を知らなくても、ツール上で色を選べば自動で値を入力してくれます。


変更後の背景色が決まったら、ブログの管理画面にログインしてCSS編集を行うわけですが、その前に開発ツールに表示されている記事のタイトル部分のCSSの右上を見てみて下さい。


css15.jpg


右上に見える「site_view-pc.css」という文字は、ブログの管理画面で編集できるCSSの名前になります。


css16.jpg


「site_view-pc.css」のところをクリックすると、↑のような画面が表示されますが、これは管理画面で編集できるCSSと全く同じものになります(行数も同じ)。


つまり、開発ツールの「site_view-pc.css」を見れば、CSS編集の何行目のどの部分を変えればいいのか、わざわざ自分で探さなくても一発で分かることになります。


上のスクリーンショットの場合は、799行目のbackground-color:#ffffff;の部分ですね。


ブログ管理画面のCSS編集の方法はコチラ↓を参照

デザインテンプレートの追加(変更)方法: ウェブリブログサポート

ブログのHTML・CSS・コンテンツHTML編集方法※注意書きあり: ウェブリブログサポート


開発ツール上なら、どんなにメチャクチャにCSSをいじっても大丈夫なので、是非ともご自身のブログで開発ツールを起動して、いろいろと設定を変えて遊んでみて下さい。


HTMLやCSSみたいなよくわからない文字や記号ばかりが並んだ文章を見ると拒絶反応が起こるという人は、最初は難しく考えずに、まずは開発ツールを使っていろいろとCSSの値を変えて遊ぶことから始めてみてはいかがでしょうか。


(3)ボックスモデルを理解してブログのサイズを調整する





■おまけ「文字の大きさ、太さ、行間、文字間隔などを調節する時に便利な機能」


文字の大きさなどを調節したい時に便利な開発ツールの機能を紹介します(この機能はFirefoxの開発ツールのみで確認できた機能です)。


css17.jpg


ウェブリブログのページ全体の文字に関する設定はbodyタグ(画面に表示される内容全てを囲む一番外側の枠)にあるので、まずは開発ツールを起動して、bodyタグのCSSを表示します。


次に、一番右側のウィンドウの上にある「フォント」をクリックします。


css18.jpg


「フォント」をクリックすると、一番右側のウィンドウにフォントに関する設定が表示され、サイズ、行の高さ、文字間隔、太さ、イタリック(斜め文字)の設定を自由に変えることができます。


設定を変えると、即座にWebページの文字も変化するので、実際にWebページに表示される文字を確認しながら、文字の設定をすることができます。


設定を変えると、中央のCSSのウィンドウの一番上に、変更した内容のCSSが自動的に書き込まれるので、あとは「site_view-pc.css」をクリックしてbodyタグのCSSの場所(行数)を確認して、管理画面のCSS編集に書き込めばブログに反映されます。














スポンサーリンク


記載されている会社名・製品名・システム名などは、各社の商標、または登録商標です。