はじめてのCSS：やさしさいっぱいのCSSが肌にしみこむ！カモ。
基礎知識：CSSはどこに書く？
2008/04/07
- トモ・リーン
- さて！
いよいよ・・・
- トモ・リーン
- コーディングに入る前に・・・
- ケンジ
- ズコーーーーーーっ！
- ケンジ
- って、まだ組まないのかよっ！！
- トモ・リーン
- うぷぷ。
CSSってどこに書くのか知ってる？
- ケンジ
- 俺は外づけしてるぜ！
- トモ・リーン
- そうね。
それが一番効率がいいわ。
- ケンジ
- 他にもこんなやり方があるわよ。
外付け
複数のHTMLファイルから参照できるので、複数のページで同じスタイルを利用したいときに便利。
- 実際のやり方
-
HTMLのhead部分
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">「CSSファイルまでのパス/CSSファイル名.css」にあるCSSファイル
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja">
<head>
<title>CSS外付けサンプル</title>
<link href="CSSファイルまでのパス/CSSファイル名.css" rel="stylesheet" type="text/css" />
</head>
<body>
・・・@charset "utf-8";
/* ふつうにスタイルを書いていってください */
.sample {
float:left;
margin: 0 12px;
}
インポート
CSSファイルを別のCSSファイルに読み込む。CSSファイルが多数あるものを1つにまとめたり出来る。
- 実際のやり方
-
HTMLのhead部分
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">「CSSファイルまでのパス/CSSファイル名.css」にあるCSSファイル
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja">
<head>
<title>CSSインポートサンプル</title>
<link href="CSSファイルまでのパス/CSSファイル名.css" rel="stylesheet" type="text/css" />
</head>
<body>
・・・@charset "utf-8";リンクしたいCSSファイルまでのパス/CSSファイル名.css
/* リンクしたいファイルまでのパスを書きます。ファイルへのリンクは複数書けます */
@import "リンクしたいCSSファイルまでのパス/CSSファイル名.css";
@import "リンクしたいCSSファイルまでのパス/CSSファイル名_その2.css";@charset "utf-8";以下のコメントを利用したブラウザ別のCSS読み込み制御（win IEのみ可）が出来ないので、気をつけよう。
/* ふつうにスタイルを書いていってください */
.sample {
float:left;
margin: 0 12px;
}<!--[if lte IE 6]><link href="CSSファイルまでのパス/CSSファイル名.css" rel="stylesheet" type="text/css" /><![endif]-->
または
<!--[if lte IE 7]><link href="CSSファイルまでのパス/CSSファイル名.css" rel="stylesheet" type="text/css" /><![endif]-->
直書き
HTMLのheadタグ内に直接書き込む。非常にお手軽。
- 実際のやり方
-
HTMLのhead部分
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">書き込まれたHTMLしか参照できない。また、たくさん書くとSEO的にも良くない。職業コーダーの人はよっぽどの事情が無い限りこの方法は使わない方がいいですよ。
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja">
<head>
<title>CSS直書きサンプル</title>
<style type="text/css">
<!--
.sample {
float:left;
margin: 0 12px;
}
-->
</style>
</head>
<body>
・・・
- ケンジ
- うぐっ・・・・・・。
で、トモ・リーンはどの方法を使ってるの？
- トモ・リーン
- 私は外付けね。
インポートはしてないわね。
どのCSSが付いているのかパッと見で分かりやすいから。
- ケンジ
- 直書きは論外として、インポートはどんなときに使ったらいいかな？
- トモ・リーン
- headタグ内のCSSのリンクを減らしたい人向きね。
- トモ・リーン
- 直書き以外の方法なら、どれでもいいけど、サイト内で揃えておくと管理がしやすいわよ。
- 今回のポイント！
- CSSはHTMLにリンクさせて外部ファイルにしよう！
- トラックバック(0)
- このブログ記事を参照しているブログ一覧：基礎知識：CSSはどこに書く？
- このブログ記事に対するトラックバックURL
- http://www.rasen-d.net/z/mt/mt-tb.cgi/68
- コメントする
- やさしいCSSはじめます。
- 下準備：テキストエディタ！
- 下準備：ブラウザチェック
- 基礎知識：DOCTYPE宣言
- 基礎知識：CSSのスタイルに付ける名前
- 基礎知識：idとclassの使い分け
- 基礎知識：CSSはどこに書く？
- 基礎知識：セレクタの付け方
- 実技：セレクタの付け方
- CSS組みの時の作業の流れ
- 情報の意味を考えながらHTMLコーディング
- レイアウトを組んでみる！ ～idについて～
- レイアウトを組んでみる！ ～floatについて～
- デザイン通りに組む！ ～文字サイズ～
- デザイン通りに組む！ ～文字サイズ 応用～
- デザイン通りに組む！ ～フォントの形の設定について～
- デザイン通りに組む！ ～背景画像～
- デザイン通りに組む！ ～画像置換～
- デザイン通りに組む！ ～ボタン～
- 基礎知識：インライン要素とブロック要素
- デザイン通りに組む！ ～ボタン2：ロールオーバ～
- デザイン通りに組む！ ～背景応用：見出しとか～
- デザイン通りに組む！ ～汎用性のある設計＋clearfix～
- デザイン通りに組む！ ～配置指定～
- デザイン通りに組む！ ～透過PNG～
- CSSファイルを見やすく整頓！！
- Firefoxの便利な機能拡張：Web Developer
- Firefoxの便利な機能拡張：Firebug
- Firefoxの便利な機能拡張：Page Saver Basic
- Firefoxの便利な機能拡張：「ScrapBook」「IE Tab」
- 印刷用CSS：メディア指定
- 印刷用CSS：ブラウザ別見え方の違いと特徴 背景画像
- 印刷用CSS：webページの横幅について
- 印刷用CSS：色々な印刷CSSの手法について
- 印刷用CSS：ナビゲーション削除タイプ
- 印刷用CSS：印刷用に全く違うレイアウトを作る
- 印刷用CSS：スクリーンと全く同じように印刷する
- 印刷用CSS：その他もろもろテク紹介
- CSSハックとIEの条件分岐
- とりあえず、ネタ切れなので
- オススメ本
- HTMLタグ+スタイルシート辞典ちび
基礎はもちろんCSSの記述に必要なことも載っているのでオススメ！
- 現場のプロから学ぶXHTML+CSS
実際のXHTML+CSSの作業について学びたい方にオススメ！
- オススメCSSのサイト
- TAG index
ものすごく使いやすいHTML & CSSのリファレンスサイト
- CSSフリーライブラリー
色々なテーマごとにCSSの情報が集まっています！
- オススメ勉強会
- CSS Nite
お気軽な無料の会（主にアップルストアで）から、本格的な有料セミナーまで楽しい勉強会を開催してくれます。
- Re:Creator’s Kansai（リクリ）
関西のクリエイターの交流、勉強会・セミナーの開催を目的としたコミュニティです。
- 螺旋デザインメンバーも執筆に参加！
XHTML+CSS プロが教える“本当の使い方”現場で培われたXHTML+CSSのテクニックを徹底解説!!
- 話題のiPhoneアプリ
大藤幹のHYML/XHTML辞典HTML5に対してもアップデート対応するらしいですよ！これで重い辞書とはおさらば♪
-
myPANTONE色辞典です。サイトの色のイメージをクライアントと打ち合わせするときに、これを使ったらカッコ良すぎて話しがまとまりやすくなるかも！
