ブラウザの開発ツールを使って知識ゼロから始めるCSS編集(1)「HTML編:開発ツールの使い方とウェブリブログの新システムのレイアウトの仕組み」

ブログをもっと自分オリジナルのデザインに変えたいけど、HTMLやCSSは難しくてよく分からないという方にオススメしたいのが、ほとんどのブラウザで使用することができる開発ツールです。


開発ツールと聞くと、難しく感じるかもしれませんが、HTMLやCSSの知識が全くない人でも理解できるように、専門用語はなるべく使わずに、出来る限り分かりやすく説明していこうと思います。


それでは、まずブラウザの開発ツールを起動してみましょう(このページのスクリーンショットは、Firefox最新版の開発ツール)。


Windows用のブラウザの場合は、キーボードのF12ボタンを押せば起動できるはず(下記の4つのブラウザの最新版(2019年7月時点)で、F12での起動を確認)。

Internet Explorer 11
Microsoft Edge
Firefox
Google Chrome


css01.jpg


こちらは、ウェブリブログ事務局のページで開発ツールを起動した時の画面です。


開発ツールを起動すると、画面が二つに分かれ、何やらいろいろとゴチャゴチャしたものが表示されると思います。


HTMLやCSSの知識がない方であれば、見た瞬間に画面を閉じたくなると思いますが、その気持ちをちょっと我慢して、もう少し見ていきましょう。


css03.jpg


CSSの編集に必要なのは、インスペクター(Firefoxの場合)という項目なので、まずはインスペクターを開きます(最初からインスペクターの項目が表示されている場合はそのままでOK)。

Firefox → インスペクター
Internet Explorer 11 → DOM Explorer
Microsoft Edge → 要素
Google Chrome → Elements


一番左側に表示されているのが、HTMLのソースと呼ばれるもので、WEBサイトの中身(文章など)に関することが書いてあります。


真ん中に表示されているのがCSSで、HTMLに書かれている内容をどういう風に画面に表示するかを決めるデザインに関することが書いてあります。


CSSを使わずに、HTMLの中にデザインに関する情報も含めて全てごちゃ混ぜにして書くこともできるんですが、WEBサイトの設計図をHTML(内容)とCSS(デザイン)に分離することにより、わざわざHTMLに手を加えることなく、CSSを変えるだけで簡単に様々なデザインに切り替えることができるようになります。


今回の目的は自分でHTMLを書くことではないので、HTMLに関して詳しく解説はしないですが、HTMLの知識が全くない方のために、ちょっとだけHTMLの話をします。


HTMLのソースを見てみると、<〇〇〇></〇〇〇>という文字列が頻繁に使われていることがわかると思います。


これはタグと呼ばれるもので、HTMLには様々な機能をもったタグが存在しますが、全てに共通して言えることは、そのタグの効果は、開始タグ<タグ名>と終了タグ</タグ名>に囲まれた中の内容にだけ作用するということです。


例えば、文字を画面の中央に表示する<CENTER></CENTER>というタグで文字を囲えば、<CENTER></CENTER>に挟まれた部分の文字だけが中央に表示されます。


ウェブリブログは、複数の<div>タグを組み合わせて作られているんですが、<div></div>で囲っただけでは何も起こりません。


css04.jpg


<div></div>で囲った内容が透明な枠の中に収められているような絵をイメージするとわかりやすいかも。


<div></div>の中にさらに<div></div>を入れれば、透明な枠の中にもう1つ透明な枠があるようなイメージ。


何もしなければただの透明な枠ですが、この透明な枠にCSSで線を付けたり色を付けたりすることで、<div></div>で囲まれた内容に対して様々なデザインを施すことができます。


ただし、単に<div></div>だけでは複数の<div></div>に対してピンポイントでデザインを設計することができないので、<div></div>に名前を付けてやる必要があります。


<div id="□□□"></div>や<div class="□□□"></div>のidやclassの部分が名前です。


idは同じページ内に同じ名前は1つだけで、classは同じページ内で同じ名前を何度も使ってよいという違いがありますが、自分でHTMLを書くわけではないので特に気にしなくてOKで、idとclassでCSSの書き方が異なるということだけ押さえておいてください。


ここまで文章だけで説明してきましたが、文章だけだとよくわからないと思うので、ここからは、実際に開発ツールを使って、ウェブリブログ事務局のページのソースを見ていこうと思います。


css05.jpg


まずは、開発ツールに表示されているHTMLの中の

<div class="l-wrapper">…</div>

の部分にマウスのカーソルを持っていってみて下さい。


すると、一番上の[BIGLOBEニュースで速報ニュースを見よう!]以外の全ての部分の色が変わるはず(IE以外のブラウザの場合)。


この色が変わった部分が、<div class="l-wrapper">…</div>で囲まれた領域になります。


<div class="l-wrapper">…</div>の横にある三角形の図形をクリックすると、「…」の部分が展開されて内容が表示されます。


下の画像は、ウェブリブログ事務局のページの<div>タグをどんどん展開していった時のものです。


css06.jpg


これだけ見せられても、全然イメージが湧かないと思うので、もう少しわかりやすく説明します。


css02.jpg

まず、l-wrapperというブログ全体を囲む大きな枠があって、その中にl-header(ブログのタイトル)、l-content(メインコンテンツ)、l-footer(ウェブリブログの案内)という3つの枠が縦に並んでいる

さらに、l-content(メインコンテンツ)の枠の中は、Inner01(ブログ名&ブログ紹介)とInner02(左右のバーやメインの記事)という2つの枠がある

そして、Inner02の枠の中に、Main(メインの記事)とlinks-left(左メニュー)とSide(右メニュー)という3つの枠がある。

※このレイアウトはデザイン一覧の「ウェブリブログ」カテゴリーにあるテンプレートのものです。「new」「シンプル」「キュート」「クール」カテゴリーにあるテンプレートはレイアウトが異なります


HTMLのソースを見ただけでは何がなんだかサッパリ分からないという方でも、こうやって全体をイメージしてみると、少しは理解しやすくなるのではないでしょうか。


ちなみに、一度に全部やるとややこしくなるので上の図では省略してますが、Mainの枠の中にも、Main__contents(メインの記事)とPager(メインの記事の一番下にあるページを切り替える数字の部分)という2つの枠があって、さらにMain__contentsの中にも記事ごとに枠があって、記事の枠の中にも記事のタイトル、記事の本文、記事のテーマなど、細かく枠で分けられています。


このように様々な要素1つ1つを<div></div>で囲んであらかじめ名前を付けておくことで、例えば記事のタイトル部分だけデザインを変えたいとか、記事の本文の部分の背景色だけを変えたいといった細かなデザインの変更が簡単にできるようにしているわけですね。


余談ですが、それぞれの枠を縦に並べたり横に並べたり、画面のサイズによって枠の位置や大きさを変えたり、画面をスクロールしても常に画面の同じ位置に枠を固定したり、枠そのものを消すといったようなことも全てCSSで実現可能です。


<div></div>で先にレイアウトの枠組みだけ作っておき、CSSでその枠を自由自在に変化させてデザインする手法を、DIVを使ったレイアウトの方法ということでDIVレイアウトと呼ぶ人もいるみたいですね。


タグの種類は、divの他にもarticle、header、p、h1、h2など、様々な種類がありますが、id名やclass名を使ってCSSで設定することには変わりがないので、HTMLの知識がない人はタグの種類は気にせず、id名やclass名だけを見て下さい。


というわけで、ここまでHTMLに関する説明をしてきましたが、開発ツールの素晴らしさはまだまだこんなものじゃありません。


開発ツールを使えば、ソース上のタグをクリックするだけで、そのタグ(枠)で囲まれた部分の領域がページのどの部分なのか一目で分かりますが、他にもまだまだ便利な機能がたくさんあります。


css09.jpg


開発ツールの左上にある矢印のボタンをクリックしてみて下さい。


css10.jpg


その状態で画面上のページ内にある要素をクリックすると、開発ツール上のHTMLにクリックした要素が表示されるはず(FirefoxとChromeは、マウスのカーソルを要素の上に持っていくだけで表示される)。


つまり、わざわざHTMLの中から自分で目的の要素のタグ(枠)の位置を探さなくても、開発ツールを使えばその要素がHTML上のどこにあるのか一発で分かります。


今回はHTML編ということで、開発ツールを使って枠の名前(id名やclass名)を簡単に探す方法を紹介しましたが、枠の名前さえ分かれば、あとはCSSを使ってその枠を自由にデザインできるので、次回はいよいよ開発ツールを使ってCSSの編集をするやり方を紹介します。


CSSの知識がある人でも、本当に全てをきちんと理解してやっているかと言われたら、自信がない人も多いと思いますが、開発ツールを使えば、そういうCSSのややこしい部分や分かりにくい部分もかなり理解しやすくなるので、CSSの知識がある人がさらに理解を深めるための勉強ツールとして使用するのもオススメですね。


(2)CSS編へ続く





■おまけ1「Main枠の中身(記事領域)」


本文では分かりやすさを重視して省略したMain枠の中身です。実際に開発ツールを起動して確認してみて下さい。


トップページと記事ページではMain枠の中身が違います(テンプレートによっては変わらない場合もある?)。


<トップページ>

css07.jpg

トップページでは、Mainの中にMain__contents(メインの記事)とPager(メインの記事の一番下にあるページを切り替える数字の部分)という2つの枠がある

Main__contentsの中には、トップページに表示されている記事の数だけEntryという枠がある

Entryの中には、Entry__heading(記事のタイトル)、EntryInnerWrap(サムネイル画像と文章)、EntryPosted(トラックバック、コメント、日付)、Entry__tag(テーマ、初期設定は非表示になっている)、Entry__readMore(続きを読む)という5つの枠がある

さらに、EntryInnerWrapの中には、EntryInnerWrap__item -thumbnail(サムネイル画像)とEntryInnerWrap__item(文章)という2つの枠がある

※このレイアウトはデザイン一覧の「ウェブリブログ」カテゴリーにあるテンプレートのものです。「new」「シンプル」「キュート」「クール」カテゴリーにあるテンプレートはレイアウトが異なります

<記事ページ>

css08.jpg

記事ページでは、Mainの中にMain__contents(メインの記事)とComments(コメント欄全体)という2つの枠がある

Main__contentsの中には、Article(記事全体)とPermalink(前のページ、次のページへのリンク)という2つの枠がある

さらに、Articleの中には、Article__heading(記事の日付とタイトル)、Article__tag(記事のテーマ)、Article__content(記事の本文)、Article__footer(記事下のテーマ、コメント数、ソーシャルボタン)という4つの枠がある

Commentsの中には、Comments__heading(「この記事へのコメント」という文字の部分)、CommentsList(コメントリスト)、Comments__leave(「コメントを書く」ボタン)という3つの枠がある

※このレイアウトはデザイン一覧の「ウェブリブログ」カテゴリーにあるテンプレートのものです。「new」「シンプル」「キュート」「クール」カテゴリーにあるテンプレートはレイアウトが異なります





■おまけ2「サイドバーの中身」


サイドバーは、設置するブログパーツによって変わってくるので、図は省略します。


ブログパーツは、パーツごとに違う名前の外枠があり、その枠の中にModule__heading(ブログパーツの名前)とModule__body(ブログパーツの中身)という2つの枠があります。


Module__headingとModule__bodyは全てのブログパーツで共通なので、この部分をCSSで編集すると、全てのブログパーツのデザインが変わります。













スポンサーリンク


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