ウェブデザイン基礎講座

    フォトショップ講座

    HTML&CSS講座

    グラフィック講座

    Flash講座

    3D講座

    ウェブプログラミング講座

    サイトメンテナンス講座

    サイト紹介

    スペシャルリンク

サイト内検索

 メールマガジン

テンプレートモンスター
ホームページテンプレート

Free Templates Online JP
無料ホームページテンプレート
Free Templates Online JP

株式会社ネットオン
採用Webマーケティング
indeed広告代理店

海外 SEO対策 トラッキングツール
海外 SEO対策
ランキングチェックツール

Rank Tracker

テクニック

HomeHTML&CSS講座 > CSSメディア

CSSメディア

投稿日:2007年6月26日   レベル:初心者    ソフトウェア:-


Step1:CSSについて
CSSはWebマスタのよき友で、ひとつのファイルを編集するだけでWebサイトのレイアウトを変更できます。しかし、Webサイトのレイアウトが自分の見ているコンピュータのとおりとは限りませんし、さらに印刷!となるとなおさらです。このチュートリアルでは、そのあたりを取り上げます。

CSSの基礎知識は必要です。CSSについてまったく知識がないときは、筆者の「Learning to use HTML well HTMLを上手に使うには」(訳注:リンク)チュートリアルを参照してください。

Step2:メディアタイプ
CSSは画面メディアだけのものではありません。実際、10種類のメディアタイプが使えます。しかし、ここでは、画面と印刷の2つだけを取り上げます。

CSSメディアタイプを使うには、@mediaのすぐあとにメディアタイプを書きます。そのあとに、中カッコを使ってそのメディアタイプで使う表示情報を指定します。つぎのようになります。

@media print {
/* 印刷の表示情報をここに */
}


Step3:CSSで適切な指定
論理HTML(B、U、I...)を使っている場合、ページはナビゲーションとコンテントのセクションに分かれていて、CSSで適切な表示を指定してあるはずです。例えば、つぎのように。

<div class="navigation">
<!-- Navigation here -->
</div>

<div class="content">
<!-- Content here -->
</div>
}


Step4:見栄えよく印刷可能
このように論理的に上手にページを分割すると、非常に見栄えよく印刷できます。ナビゲーションを印刷から除いて、コンテントにすべてのページ幅を割り当てられるからです。そのためには、つぎのようにしましょう。

@media print {
.navigation {display:none;}
.content {width:100%;}
}


Step5:まとめ
ご覧のとおり簡単ですが、ページをCSSと論理HTMLのセクションに分けてあればなお簡単です。

これで知りたいことはわかりましたか。もっと知りたいことがあれば、コメントをつけるか、フォーラムに立ち寄ってください。

引用:Web Design Library 著者:free2code翻訳:OJer



スポンサードリンク

コメント

ランダム記事5件

2016年5月の人気記事ランキング