はじめてのHTML&CSS入門

CSSのシミュレーション

全333コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
CSSの情報を確認し、シミュレーションする方法や、ミスの見つけ方などを学んでみましょう。
講師:
06:26

字幕

このレッスンではデベロッパーツールを使ってCSS をシミュレーションする方法を学びましょう。それでは、 Chapter05 lesson04 のファイルをブラウザで見てみます。まず final のファイルの見出し部分が変わっているかと思います。そして begin の方ではこのようにスタイルが当たっていません。もしも最初からこの final のデザインにすることが決まっていればCSS はそのまま書き始められるのですがシミュレーションをしたいという場合がありますのでその方法を試してみましょう。まず、「このサイトについて」という所で右クリック、そして「要素の検証」でデベロッパーツールを立ち上げます。そうしますと、この h2 にかかっているスタイルシートがこの右側の画面に出ています。スクロールをしてみます。そうすると h2 はまずユーザーエージェントスタイルこれはブラウザが勝手に指定しているスタイルシートです。つまり初期設定ということになります。また、このようにボックスに対してコンテンツ領域が、どれ位かパディングや、ボーダーがどれ位かというものも実はデベロッパーツールで見ることができます。それではスタイルシートここに main の h2 というのがあります。 実は既にスタイルシートに空のセレクタを用意してあります。ここでカーソルを一度クリックしてみましょう。そうすると、ここですぐに CSS を試すことができます。では試しに colorそうすると予測変換もついていますのでcolor が選ばれていればそのまま Enter を押せば大丈夫です。そしてもう一度 Enter を押します。そうすると色を選べます。ただ今回はまず、#ccc といったように試しの色を入れてみます。Enter を押します。そうすると、CSS を直接書き換えたわけではないのですがこのようにシミュレーションすることができます。また、デベロッパーツール上のこの四角い升、灰色の升をクリックすると、このようにカラーのバーが開いて自分の好きな色を選択することが可能です。選んだ色を Enter でそうすると、このように色が入ります。そして、このセミコロンの後ろでまたクリックを1回だけするとまた新しいプロパティを追加することができますので今度は余白を追加してみましょう。margin の bottom を選びもう一回 Enter を押して例えば 15px と入力してみました。そうすると、ここの 15px の隙間が空いたのが分かります。 ただ、この 15 よりももっと空けたいという時は数字を打ちかえることも勿論可能ですが15 にカーソルを当ててそしてキーボードの矢印キーを上を一回ずつ押すと1px ずつ増えていきそして下の矢印を押すと1px ずつ減らすことができます。そして Shift を押しながら上で 10px ずつShift を押しながら下で 10px ずつ下げることもできます。このように視覚的に余白を調整することも可能です。今回は 15 にしておきます。そして下線も引いてみましょう。やはりセミコロンの後ろで一度クリックをしてborder そして下線を引きたいのでborder-bottom を選んでEnter そしてもう一度 Enter キーそして 1px で太さを決めてsolid で実線であることを決めてそして色味を入れてあげましょう。例えば、ddd という灰色の線を入れてみました。やはりここも同様にこの升をクリックして色味を選んであげるとこの色が自動的に CSS に反映されます。が、このままブラウザを閉じたりブラウザを更新するとこの情報は失われてしまいますのでこの style.css という所をクリックしてみましょう。 クリックすると今書き込んだものがこのように反映されています。この情報をコピーしておくと後で使いまわすことが可能です。それでは Sublime Text に戻り今の main の h2 というセレクタを捜しましょう。ここに書いてありました。また、デベロッパーツール上でもstyle.css の80行目という表示がありましたのですぐ見つけることができます。そしてここに今コピーしてきたものをペーストしてあげれば今シミュレートしたものがそのまま自分の CSS に反映することが可能です。そして上書き保存をしてアプリケーションを切り替えて更新しても変わらなければ既に反映されているということになります。このようにデベロッパーツールを使うとリアルタイムにデザインを検証しながらCSS を決めることができます。このレッスンでは CSS をデベロッパーツールでシミュレートする方法を学びました。

はじめてのHTML&CSS入門

Webデザインの基本はHTMLとCSSにあると言っても過言ではありません。ブラウザにそのページの論理構造を正しく伝えるためのHTMLと、そのページをいかに見せるかを設定するCSSの二本柱をきちんと理解する必要があります。このコースでは前半でHTMLとCSSの基本を学んだのち、後半ではCSSの実際の応用の仕方や各種ツールの使い方などについて学びます。

3時間35分 (38 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 2,990
発売日:2014年03月26日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。