カテゴリー別アーカイブ: テクニック(Web)

Web用の保存形式、きちんと使い分けてますか?

先日、息子の空手教室体験についていったら「お父さんもぜひ!」と勧められて、大人クラスを体験することになり、数日間、体がバッキバキだったスタッフ「ほ」です。

大人になってから、腕や足が上がらなくなるほど運動することがほとんどなかったインドア派なのでとっても刺激になりました。毎週続けるのは無理そうですけど……

さて、今日はWeb用保存のお話です。

イラレやフォトショが使えると「ついでにホームページに載せる画像も作っちゃってよ」なんて頼まれること……ありますよね?

ネットを見ていると「とにかくJPEG派」をよく見かけますが、きちんと保存形式を理解して使い分けることで「軽くて美しい」保存ができるようになります。

Q.保存するならどの形式?

さて、いきなりですが問題です。

保存するならどれ?

上記の画像たち、保存するならどの形式でしょう?答えは、このエントリーの最後に載せておきます。

1.保存形式を知ろう

まずは、そもそも保存形式はどんなのがあるのか?というのを理解しておきましょう。

現状、Webサイト上で使われるグラフィック(動画除く)形式は以下の通りです。

  • JPEG
  • GIF
  • PNG-8
  • PNG-24
  • PNG-32
  • SVG

以下、解説をしていきますが、6種類の解説だと書く方も読む方も疲れてしまうので、ある程度グルーピングして解説していきます。

GIF、PNG-8

この2つの形式の最大の特徴は

色が最大で256色しか使えない

ということです。この256色は固定ではなく、画像ごとに色は入れ替えることができますが「最大で256色までしか持てない」ということです。

もともと存在していた形式がGIFで、PNG-8が後発です。

PNG-8が生まれたのには歴史的背景があるのですが、そこまで書くと長くなってしまうので、ご興味がある方は以下のURLをご参照ください。

Portable Network Graphics -wikipedia-

色数の制限があることから、これらの保存形式の使用目的は、ずばり「イラストの保存」です。

イラストレーターやフォトショップで保存する際に、より軽量な方を選べばいいと思います。※保存の方法は後ほど

GIFとPNG-8の使用用途は一緒ですが、GIFにしかできないことがあります。

それが「アニメーション画像」です。

GIFはアニメが作れる

GIFは、イラストをパラパラマンガ式で保存でき、Webサイト上の目を引くアイコンの作成などに力を発揮します。

アニメーションが複雑になるほど容量も重たくなってしまうので長編アニメーションには向いていません。

※実はPNGでもアニメーションが作れるAPNGという形式が存在しますがサポート状況が悪く、日本国内で主流の2ブラウザ(IEとchrome)が非サポートです……将来に期待しましょう

JPEG、PNG-24

前項のGIFやPNG-8がイラスト向きだったのに対してJPEGやPNG-24は「写真の保存」に向いています。

色数はどちらも約1677万カラーを扱うことができます。

写真の保存はJPEGかPNG24

これまた同じ用途で使いますが、それぞれ以下の違いがあるので覚えておくといいでしょう。

JPEG

  • 画質の劣化と引き換えにファイルサイズを軽くできる

PNG-24

  • 美しく画像が保存できるが、ファイルサイズが重くなりがち

これもアプリケーションで保存する際に写真のクオリティとサイズの状況を見ながらどちらで保存するのか?を決定していただければよろしいかと思います。

PNG-32

こちらはPNG-24をパワーアップさせたもので、透明や半透明を扱うことができる形式です。

PNG-32は半透明が扱える

GIFやPNG-8でも透明は扱えますが、半透明は扱えません。

JPEGは透明・半透明どちらも扱えません。(PNG-24については後述)

半透明を扱う画像では、この形式を選択する必要があります。

SVG

「JPEGやGIFは知ってるけどSVGって何?」って方も多いのではないでしょうか。

SVGもWebで扱える画像形式のひとつです。

SVGには、これまで紹介してきた形式とは大きく異なる点があります。

それはSVGがベクターデータであるということ。

ベクターデータは座標による描画を行うファイル形式のことで、拡大しても画像がぼやけない、という特徴を持っています。

SVGは拡大しても荒れない

このSVG形式で画像を保存しておけば、スマートフォンなどで画面をピンチアウトで拡大表示した際に綺麗にズームアップされます。

また、Retinaディスプレイをはじめとする高画素密度では、「画像がぼやけて見える」といった現象が起きますがSVGでは、それが起きません。

サイトのロゴマークやちょっとしたアイコン類はSVGで保存するといいでしょう。

ブラウザサポート状況も現在のモダンブラウザ(IEは9以降)では問題なく扱うことができます。(参考:Can I Use

PNGの8、24、32って何?

さて、PNGの後ろには8やら24やらの数字がついていますが、この数字は何の数字でしょう?

答は「扱えるデータの量」です。

例えばPNG-8では「8bit分のカラーが扱える」という意味になります。

bitの計算は「2のn乗」で計算をしますから、8bitでは「2の8乗=256」となります。

そうなるとPNG-24では24bitカラー「2の24乗=16777216」となります。上記PNG-24の説明で出てきた「約1677万カラー」の正確な数字がこれですね。

ではPNG-32は「2の32乗」カラーが扱えるのか?というとそうではありません。

PNG-32は「24bitカラー+8bitのアルファ値」を扱うことができます。「アルファ値」は「不透明度」のこと。

もうちょっとわかりやすく書くと「約1677万カラー+256段階の不透明度が使えます」ということですね。

2.アプリケーションでの保存

各保存形式がわかったところで、アプリケーションでの保存方法について触れておきます。

これらの保存形式をカバーしているのは、やはりAdobe Illustratorと Photoshopでしょうか。

どちらも「Web用に保存」コマンドを持っており、これを使用することで「JPEG」「GIF」「PNG」の形式を保存することができます。

また、SVGは「別名で保存」や「書き出し形式」などを利用して保存することができます。 Illustratorでは9.0以降、PhotoshopはCCからSVGでの保存が可能です。

それでは、それぞれの保存方法を見ていきましょう。

Web用に保存(Illustrator、Photoshop)

まずは定番である「Web用に保存」から。

ちなみに現在のバージョン(CC2017)では「Web用に保存(従来)」と名前を変えております。

イラレもフォトショも

「ファイル」メニュー→「Web用に保存」
※バージョンによっては「Webおよびデバイス用に保存」

「ファイル」メニュー→「書き出し」→「Web用に保存(従来)」
※PS CC2015以降、Ai CC2017以降

で開きます。

開くと、このような画面が開きます。

Web用に保存ダイアログ

保存形式の選択はここで行います。

ファイル形式の選択

GIF保存の場合

GIFで保存

GIFでの保存時には、以下の3点に注目しましょう。

GIF保存時の注目点

1.カラー……GIF保存時に使う色数です。通常は256にしておきましょう

2.透明部分……グラフィック内の透明部分を透明として保存する場合はチェックを入れましょう。透明部分を作りたくない場合はチェックを外します。

3.マット……透明部分のチェックを外した際に、透明部分を何色で塗りつぶすかの指定です。

GIF形式における「マット」の問題

マットは、透明部分にチェックが入っている場合には特に指定がいらないような気がしますが、そうではありません。

例えば、こんなイラストを保存しようとした時に……

保存画像サンプル

透明部分にチェックをし、マットを白のままにして保存しました。

その画像を白い背景のホームページに表示した場合と、暗い背景のホームページに表示した場合では表示結果に以下の違いがあります。

黒い背景ではエッジが荒れる

黒い背景に配置したイラストはエッジに白い線が出ているのがわかるでしょうか。

ちなみにマットを黒にして保存した画像は以下の結果となります。

マットを黒にした場合

こちらは逆で、黒い背景のイラストが美しく、白い背景の方にはイラスト周りに黒い線が見えています。

つまり、背景を透明にした場合の「マット」は、イラストのエッジを何色の背景になじませるのか?という役割を持っています。

今まで「GIF画像って綺麗に保存できないんだよね」と思っていた方は、ここを確認してみてください。

JPEG保存の場合

JPEG形式の場合は、以下の部分を気にしましょう。

JPEG保存の注意点

画質は

  • 低画質
  • 中画質
  • やや高画質
  • 高画質
  • 最高画質

の5つから選択する方法と、0~100までの数値で指定する方法があります。

画質は低いほどファイルサイズが軽くなりますが、画像にノイズが発生します。

低画質で発生するノイズ

上記は低画質で保存した写真を拡大した例です。

バイオリンのエッジ部分に蚊がたかっているようなノイズが見えます。これをモスキートノイズと呼びます。

また、バイオリンの本体がマス目状に見えますが、これをブロックノイズと呼びます。

ちなみに同じ写真を最高画質で保存した場合は、ノイズが出ていません。

最高画質はノイズが発生しない

写真によってノイズが目立つもの、目立たないものがありますので、保存時に「なるべくノイズがわからないギリギリのライン」を見極めることが大切です。

PNG保存の場合

PNGの保存

PNG保存の場合、気になるのがPhotoshopやIllustratorの保存画面には「PNG-32」が出てきません。

PNG-24とPNG-32はまとめて「PNG-24」として扱われます。

「透明部分」にチェックが入っていない場合は「PNG-24」

PNG-24での保存

「透明部分」にチェックが入っている場合は「PNG-32」として扱われます。

PNG-32での保存

また、イラストを保存する場合もPNG-32(PNG-24+透明部分チェックあり)で保存すると、エッジ部分を半透明処理するため、どんな背景のホームページに配置をした場合もかならずエッジがなじむといった利点があります。

ですので、いろんなページで使いまわす画像はPNG-32で保存した方がぐっと扱いやすくなります。

PNG画像はいろんな背景になじむ

最初からいろんな背景で扱うとわかっている透過画像はPNG-32で保存するようにしましょう。

書き出し形式(Photoshop)

Photoshop CC2015より「ファイル」メニュー→「書き出し」内に「書き出し形式」が搭載されました。

クリックすると以下のダイアログが開きます。

SVGが選べる

やはりダイアログ右上でファイル形式の選択をしますが、こちらにはSVG形式があります。

JPEG、GIF、PNGもこちらから指定が行えます。「Web用に保存」よりも画質が良く、ファイルサイズも軽くなる強力な保存機能なので、できればこちらを利用しましょう!

SVGの保存(Illustrator)

最後にSVGの保存です。SVG保存はPhotoshopの「書き出し形式」でも可能ですが、SVG保存がベクター画像ですのでイラストレーターから書き出すことが多そうです。

イラストレーターの「ファイル」メニューから「別名で保存」を実行し、「ファイルの種類」から「SVG」を選択します。

別名で保存ダイアログ

「保存」ボタンをクリックすると以下のダイアログが現れます。

SVGオプションダイアログ

ここで「OK」をクリックすれば保存は完了です。

※レスポンシブサイトで使うか否かで設定を変える場合もありますが、今回は割愛します。またタイミングがあれば記事にします。

3.問題の答え

さて、それでは最初の問題の答えを考えていきましょう。

最初はこの画像から

PC向けサイトの透過ロゴ

PCサイトに掲載するサイトのロゴマークです。ブルーで色がついているところ以外は透過のデータです。

ロゴマークはたくさんのページに掲載されること+背景に別の色や柄が入ったページにも利用されるかもしれないことを考えた場合、PNGで保存するのが良さそうです。

PC向けサイトですから、拡大されたら……という心配はいらないと思いますが、Retinaディスプレイなどの高解像度ディスプレイのことを考えると、あまり複雑な形状でないロゴならSVGで保存しておいた方が今後の対応はしやすそうです。

 

続いてこちらの画像

スマホサイト内のアイコン

「スマホサイト内の」というところがポイントですね。

スマートフォン上でのズームアップやレスポンシブサイト(ウインドウサイズによってレイアウトが変化するデザイン)のことを考えるとSVGでの保存が良さそうです。

 

そして最後がこちらの画像

角丸+影付き

角丸の外側は透過、ドロップシャドウ部分は半透明であることを考えるとPNGでの保存一択になりそうですが……

ここはちょっと意地悪な回答になっちゃうのですが、これJPEGで大丈夫です。

これまでの説明で、この画像をJPEGで保存するには問題があって……

「JPEGは透明も半透明も扱えない」

なんですよね。

でもですね、ホームページを作る際に使うCSSで

  • 画像を角丸にする
  • ドロップシャドウをつける

が実現できてしまうのです。

CSSで上記の作業を行うことで、「やっぱり角丸やめたいなー」とか「角丸の半径を変えたいなー」なんてときに画像を作り直す必要がなくなるんですね。

ですので、JPEG保存、おすすめです。

ということでまとめましょう。

保存形式の組み合わせ

赤い一本線がオススメ、オレンジの破線が代替案です。

とはいえ、皆様の手掛けているサイトによってケースバイケースなところもあると思いますので、あくまでも参考程度に考えていただければ。

 

……めちゃくちゃ長くなっちゃいました。

ここまで読んでいただいた方、ありがとうございます。

 

バンフートレーニングスクールでは、イラストレーターも、フォトショップも、ホームページ作成だって学べちゃいます。

無料体験も行っておりますので、ぜひ一度お気軽に遊びに来てください。

バンフートレーニングスクールは 最短2日間でアプリケーションを習得できる 講座をご用意しております。

  1. 無料体験
  2. 資料請求
  3. お問合せ

[web]無料の動画素材

先日、スクールのメールマガジンをご購読いただいてる方を対象に「ホームページをHTML5に変更しよう」という特別講座を実施しました。

アンケートでも高い評価をいただくことができ、また久しぶりにスクールにいらっしゃっていただいた方に修了後のお話を伺ったところ「学んだ内容を生かして仕事しています!」といううれしいお言葉もいただけました。

インストラクターとして一番うれしい言葉です。

こんにちは。スタッフ「ほ」です。

講習の中で、動画をホームページに組み込んだり、動画をページの背景にしたりするテクニックをご紹介しました。

▼こちらで完成のサンプルが見られます。

movielesson完成サンプル

ぜひ、受講生の皆様には、ご自身で練習をしていただきたいと思いますが、動画のファイルが気軽に用意できない方もいらっしゃるかと思います。

そんなときに便利なのが、インターネットで動画ファイルがダウンロードできるサイトです。

NHKクリエイティブライブラリー

名前の通り、NHKが運営しているサイトです。
NHKアーカイブスの番組や番組素材から切り出した映像や音声が「創作用素材」として提供されています。

とても個人では用意できなさそうな貴重な映像もたくさん公開されています。

営利目的での利用はできませんが、個人の練習用であれば問題ありませんし、ファイル形式も最初からmp4という嬉しい仕様。変換無しでそのまま利用することができます。
ユーザー登録やログイン作業も不要です。

今回、上記でリンクした完成見本のデモページも、このNHKクリエイティブライブラリーからダウンロードした動画に差し換えてあります。

とても美しい映像素材だらけですので、一度時間があるときに覗いてみてください。


バンフートレーニングスクールでは、ホームページ制作講座を開講しています。

このブログで記事を書いているスタッフ「ほ」が特別なアプリケーションを使わずに基本的なWebページを構築する方法をレクチャー。

まったくの初心者の方大歓迎!Dreamweaverというアプリケーションを使った実践編もご用意しております。

詳しくは、下記詳細ページをご覧ください。

ホームページ制作基礎講座の詳細

バンフートレーニングスクールは 最短2日間でアプリケーションを習得できる 講座をご用意しております。

  1. 無料体験
  2. 資料請求
  3. お問合せ

[Macintosh]テキストエディットでHTMLファイルを作っても失敗する場合…

みなさまお久しぶりです。

スタッフ「ほ」です。毎度毎度、お久しぶりな登場ですみません。

7月上旬に少しはやめの夏休みをいただいてしまったため、すでに自分の中では夏は終わった気でいます。
これから夏休みの方は、たくさん楽しんでください!

さて、今回のねたは個人的にちょっと困ったテキストエディットの設定についてご紹介しておこうと思います。

この度、スクールのMacOSをMountain LionからYosemiteにアップグレードしました。

すると、Web基礎の講座で作成したWebページがおかしくなる生徒さんが続出!

なんだこれーー?と思って調べてみると、あらら、Macでおかしな設定が追加になっちゃってるじゃないですか!

機能的にはMavericksから搭載されていたようで、こいつはなかなか厄介です。

そのやっかいな機能の名前は「スマート引用符」

どんな機能かといいますと、たとえば、以下のようなタグをふんふふーーん♪と鼻歌交じりでタイピングします。

すると…

おろっ!?

半角で入力したはずのダブルコーテーションが自動的に全角に置き換わります。

なにこれ!??全然スマートじゃないですよっ!

というわけで、この機能をOFFにすることに

「テキストエディット」メニューから「環境設定」を開きましょう。

環境設定ダイアログが開いたら、ここです!

今回のコーテーションの問題は「スマート引用符」のチェックをはずすことで解決します。

が、テキストエディット、ほかにも「スマートほにゃらら」がいくつかありますので、ここのチェックは、いっそ全部はずしちゃいましょう。

HTMLやCSSなどのコードを書く場合には、文字が置き換えられてしまう問題はけっこう厄介です。

これらの機能はすべてOFFにしておいた方が無難です。

テキストエディットでソース書くとおかしなことになるぞ!?という方はこの指定を見直してみてください。


バンフートレーニングスクールでは、ホームページ制作講座を開講しています。

このブログで記事を書いているスタッフ「ほ」が特別なアプリケーションを使わずに基本的なWebページを構築する方法をレクチャー。

まったくの初心者の方大歓迎!Dreamweaverというアプリケーションを使った実践編もご用意しております。

詳しくは、下記詳細ページをご覧ください。

ホームページ制作基礎講座の詳細

バンフートレーニングスクールは 最短2日間でアプリケーションを習得できる 講座をご用意しております。

  1. 無料体験
  2. 資料請求
  3. お問合せ

[Web]小さなアイコンを文字として扱う

6月になりました。蒸し暑い日が増えてきましたね。夏の気配がしておきております。

春と秋のような季節が好きなスタッフ「ほ」にとっては、ちょっとだけつらい季節の到来です。

さて、本日はとってもナイスなWebサービスをご紹介です。

——

例えば、ナビゲーションボタンに小さなアイコンを入れたい場合、みなさんならどうしますか?

グラフィックソフトなんかでGIFファイルを作成して利用する、もしくはボタンそのものを画像で作成する、なんてのが一般的かなと思います。

ただ、グラフィックで作成すると、フォントサイズが変わった時にまた画像をリサイズして作り直す必要がありますし、色を変えたい場合もまた作り直しってことになります。

そんな小さなアイコンをフォントとして表示できるWebフォントがあるんです。

Font AwesomeというWebフォントサービスです。
http://fortawesome.github.io/Font-Awesome/

使い方はとっても簡単。ユーザー登録なんかもいりません。

なかなか使い方は奥深いんですが、今回はカンタンに使えるさわりの部分だけご紹介してみます。

利用の手順

利用はカンタン、以下の2ステップです

  1. Font Awesomeを利用するためのタグを1行書く
  2. アイコンを利用したい場所に適当なインライン要素タグを書いてクラスを指定する

以上です。

では、1工程ずつやってみましょう。

ステップ1

最初のステップでは、Font Awesomeを利用するための準備をします。

Font Awesomeを利用するには、関連ファイルを一式ダウンロードして、自分のサイトに組み込んでしまう方法と、Font Awesomeのサーバーから呼び出して利用する方法の2つがあります。

後者の方がカンタンに利用できるので、そちらでやってみましょう。

HTMLファイルの<head>から</head>の間に以下のタグを貼り付けます。

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" />

上記のタグはXHTMLを基準にしてありますので、HTMLのページで作っている場合は、最後の「 /」を外してください。

準備はこれだけです。さぁ使ってみましょう!

ステップ2

例えば、以下のようなソースがあったとして…

<p>ダウンロード</p>

この「ダウンロード」の文字の先頭にアイコンを入れたい場合、以下のように「ダウンロード」の文字の前に適当なインライン要素のタグを書きます。
ここでは<span>タグを使ってみます。

<p><span></span>ダウンロード</p>

さらに追加した<span>要素に以下のクラスを指定します。

<p><span class="fa fa-download"></span>ダウンロード</p>

以上です。ブラウザで確認してみましょう。

カンタンでしたねー。

アイコンの種類

上記のように、クラス名に「fa fa-(アイコン名)」と指定することで、任意のアイコンを指定することができます。

他にも以下のようなアイコンが呼び出せます。

アイコン クラスの指定
fa fa-shopping-cart
fa fa-sitemap
fa fa-tag
fa fa-search-plus
fa fa-thumbs-o-up
fa fa-trash
fa fa-truck
fa fa-user
fa fa-car
fa fa-bus
fa fa-subway
fa fa-file-o
fa fa-gear

上記は一例で、まだまだ種類はたくさんあります。

↓のページを参考にしてみてください。
http://fortawesome.github.io/Font-Awesome/icons/

装飾

ここで表示しているアイコンは、文字の扱いですから、CSSで文字として装飾を行うことができます。

ボタン作ってみましょう。

HTMLソースを用意します。

<ul id="fnav">
<li><a href="#"><span class="fa fa-sitemap"></span> サイトマップ</a></li>
<li><a href="#"><span class="fa fa-car"></span> 交通アクセス</a></li>
</ul>

では、CSSで装飾をしてみましょう。

#fnav {
	padding: 0px;/*リストのパディングをクリア*/
	margin: 0px;/*リストのマージンをクリア*/
	font-family: "Hiragino Kaku Gothic ProN", Meiryo,  sans-serif;/*フォントの指定*/
}
#fnav li {
	list-style: none;/*リストマーカーをなしに*/
	width: 10em;/*横幅の指定*/
	float: left;/*リストを横並びに*/
	text-align: center;/*文字を中央揃えに*/
	margin-right: 10px;/*ボタン間の隙間を指定*/
}
#fnav li a {
	display: block;/*幅を有効にするためブロックレベル要素に*/
	padding: 5px 10px 3px;/*ボタン内側の余白*/
	text-decoration: none;/*リンクの下線を消去*/
	color: #FFFFFF;/*文字の色を白に*/
	font-weight: bold;/*文字を太く*/
	border: 2px solid green;/*まわりの枠線を表示*/
	border-radius: 10px;/*角丸の指定*/
	background-image: -webkit-linear-gradient(270deg,rgba(177,218,177,1.00) 0%,rgba(0,130,0,1.00) 100%);/*背景のグラデ*/
	background-image: -moz-linear-gradient(270deg,rgba(177,218,177,1.00) 0%,rgba(0,130,0,1.00) 100%);/*背景のグラデ*/
	background-image: -o-linear-gradient(270deg,rgba(177,218,177,1.00) 0%,rgba(0,130,0,1.00) 100%);/*背景のグラデ*/
	background-image: linear-gradient(180deg,rgba(177,218,177,1.00) 0%,rgba(0,130,0,1.00) 100%);/*背景のグラデ*/
	background-color: #008700;/*グラデーション未対応ブラウザのための背景色*/
	-webkit-box-shadow: inset 1px 1px 0 #D0FBDE;/*ボックス内側の白いハイライト*/
	box-shadow: inset 1px 1px 0 #D0FBDE;/*ボックス内側の白いハイライト*/
	text-shadow: -1px -1px #025104;/*文字を立体的に見せる影の指定*/
}

ブラウザで確認すると、以下のようになります。

DEMOページ

どうでしょう?画像ファイルは一切使っていませんが、ここまでの表現が可能になります。

画像を使用していない分だけ、修正や変更も容易ですし、データの軽量化が見込めます。

かなり便利に使えるサービスです。ぜひチャンスがあったら利用してみてください!


バンフートレーニングスクールでは、ホームページ制作講座を開講しています。

このブログで記事を書いているスタッフ「ほ」が特別なアプリケーションを使わずに基本的なWebページを構築する方法をレクチャー。

まったくの初心者の方大歓迎!Dreamweaverというアプリケーションを使った実践編もご用意しております。

詳しくは、下記詳細ページをご覧ください。

ホームページ制作基礎講座の詳細

バンフートレーニングスクールは 最短2日間でアプリケーションを習得できる 講座をご用意しております。

  1. 無料体験
  2. 資料請求
  3. お問合せ

[CSS3]box-sizingプロパティ

3月になりました。

春が待ち遠しい、桜が大好きなスタッフ「ほ」です。

さて、本日はWebネタです。

Web作成の授業をしていると、どうしても皆様の前に立ちはだかるボックスサイズの壁。

通常、CSSでボックスのサイズを指定する場合、ちょっとした計算が必要になります。

たとえば、DIVボックスを用意して、

div { width:300px; }

という指定を行ったとします。

この場合、ほかの指定がなければ、

width = ボックスの幅

ということになります。

ただ、このままではボックスの内側の文字まわりに余白がまったくないために窮屈な印象を受けます。

そこで、ボックスにpaddingの指定を行ったとします。

#box2 {
width:300px;
   padding:50px;
}

下図の2つ目のボックスにpaddingの指定を行っています。

ボックスのサイズが大きくなってしまいました。

これは、widthが「内容の幅」を指定するプロパティだからです。

この場合、width:300pxは下図の幅を指定しています。

この指定の場合、ボックスの幅は

左padding(50px)+width(300px)+右padding(50px)

という計算が必要で、400pxになります。

これは、ボーダーにも言えることで、今度はボックスに25pxの太さのボーダーをつけてみました。

#box3 {
width:300px;
   border:25px solid orange;
}

widthは同じ300pxにしていますが、ボーダーの太さの分だけボックスの幅が広がったのがわかるでしょうか。

この場合は、

左ボーダー(25px)+width(300px)+右ボーダー(25px)

で350pxの幅となります。

このように、ボックスにpaddingやボーダーの指定を行うと、とたんにサイズの把握が難しくなるのです。

たいていWeb作成を始めたばかりの方は、ここでつまづいてレイアウトを崩してしまいます。

そこで、今回のネタである「box-sizing」プロパティの登場です。

先ほどのCSS指定に1行追加をします。

div {
   box-sizing:border-box;
}

結果、すべてのボックスが等しく300pxで統一されます。

今回挿入したbox-sizing:border-boxは、widthの幅を内容の幅ではなく、ボーダーを含んだサイズにするための指定です。

この指定をすると、純粋に画面に表示されたボックスの大きさが指定できるようになります。

計算不要!すごく便利!!

IE8以降で対応しておりますので、IE7以下を対象ブラウザからはずしてOKなサイトであれば、ぜひぜひ使ってみてください!!


バンフートレーニングスクールでは、ホームページ制作講座を開講しています。

このブログで記事を書いているスタッフ「ほ」が特別なアプリケーションを使わずに基本的なWebページを構築する方法をレクチャー。

まったくの初心者の方大歓迎!Dreamweaverというアプリケーションを使った実践編もご用意しております。

詳しくは、下記詳細ページをご覧ください。

ホームページ制作基礎講座の詳細

バンフートレーニングスクールは 最短2日間でアプリケーションを習得できる 講座をご用意しております。

  1. 無料体験
  2. 資料請求
  3. お問合せ