*基準CSSの解説
かなり長くなってしまっている自覚があるので、何をしているのかの解説と補足です。
分かりにくいかなと思うところだけですが、参考になれば幸いです。
実際に基準CSSを使われる際は、いらないなと思う設定の部分はお好きに改変して下さい。
※タイトルクリックで内容部分が開閉します。
※以下の説明はver.5時点のものです。順次最新のものに変更していきます。(2/9)
かなり長くなってしまっている自覚があるので、何をしているのかの解説と補足です。
分かりにくいかなと思うところだけですが、参考になれば幸いです。
実際に基準CSSを使われる際は、いらないなと思う設定の部分はお好きに改変して下さい。
※タイトルクリックで内容部分が開閉します。
※以下の説明はver.5時点のものです。順次最新のものに変更していきます。(2/9)
- ▼meta部分【HEAD内デフォルトタグ：出力しない】
- ▼レンダリングモード指定<pc_only><meta http-equiv="X-UA-Compatible" content="IE=Edge" /></pc_only>
content="IE=Edge"は、利用できる最も互換性の高いモードを使用するよう指示します。
※ちなみに、content="IE=8"のように指定もできますが、最新のIEに対してもIE8のレンダリングをさせるようなもったいないことはしないほうが良いと思います。
これを行うことでIE8以降、アドレスバーに表示される紙が破れたようなマークが消えるため、誤操作で互換モードになることを防げます。
【参考】
META タグと将来の互換性のロック-Microsoft Developer Network
▼文字コードの指定<imode><meta http-equiv="Content-Type" content="application/xhtml+xml; charset=Shift_JIS" /></imode>そのページがどんな文字で書かれているかの宣言。文字化けを防ぎます。
<noimode><meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" /></noimode>
ここ以降に書かれた文章はこの文字コードだと認識するので、出来るだけ最初の方で宣言します。
content="application/xhtml+xml;をdocomoのフィーチャーフォンのみ設定しているのは、docomoフィーチャーフォンではこれがないとCSSが効かなくなるためです。
▼基準スタイルシート言語と基準スクリプト言語の指定<meta http-equiv="Content-Style-Type" content="text/css" />ものすごく簡単に言うとCSSとJavaScriptを使いますよ、ということ。※JavaScriptは広告部分に使われています。
<meta http-equiv="Content-Script-Type" content="text/javascript" />
▼スマートフォン/タッチデバイス（iPad等）向け設定<pc><meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=0.5, maximum-scale=1.5, user-scalable=yes" /></pc>"width=○○"→ページを表示する横幅。"device-width"の場合は画面サイズとイコール。
※ちなみに"width=数字"で、固定ピクセル幅になりますが、Androidは未対応です。
"initial-scale=○○"→初期表示時の拡大率（"initial-scale=1"は等倍＝画面に合わせるってことなので、上の"width=device-width"と同じ意味）
"minimum-scale=○○"→ミニマムスケール、つまり最大の縮小倍率。0.5だと2分の1まで縮小可能。
"maximum-scale=○○"→マキシマムスケール、つまり最大の拡大倍率。1.5だと1.5倍まで拡大可能。
※↑この上二つは0〜10の間で数値の変更ができます。
"user-scalable=yes/no"→ズーム操作を許可する(yes)か否(no)か。
noにすると閲覧者が画面を拡大して見たいと思った時に拡大することができなくなります。また、入力フォームなどに書き込む際にもズームしなくなるので、操作性を考えるとyesがいいと思います。
▼電話番号の自動リンク制御<pc><meta name="format-detection" content="telephone=no" /></pc>スマートフォンでは、デフォルトのHEAD内タグを『出力する』だとナノから自動で挿入されます。
iPad用にスマートフォンだけでなくPCにも適用させます。<meta http-equiv="Pragma" content="no-cache" />この部分はデフォルトのHEAD内タグを『出力する』だとナノから自動で挿入されます。
<meta http-equiv="Cache-Control" content="no-cache" />
<link rel="shortcut icon" href="/favicon.ico" />
上二つは、ページをキャッシュ（状態を端末内に保存）させない指定で、下はブクマした時のアイコンやタブの左に出るファビコンの指定です。
▼検索避け<meta name="robots" content="noindex, nofollow, noarchive, noimageindex, noimageclick" />知っている方も多いだろう検索避け。あくまでも、クローラ（検索プログラム）に対するお願いなので絶対ではありません。
"noindex"→検索結果に表示させたくないときに指定。
"nofollow"→リンクをたどってほしくないときに指定。
"noarchive"→キャッシュ、つまりページの複製を保存されたくないときに指定。
"noimageindex"→画像を検索対象にさせたくない時に指定。
"noimageclick"→画像リンクをさせたくない時に指定。
【参考】
その文書に関する情報（メタ情報）を指定する-HTMLクイックリファレンス
表示領域を設定する_TAG-index - ▼meta部分【HEAD内デフォルトタグ：出力する】
- ▼文字コードの指定<noimode><meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" /></noimode>そのページがどんな文字で書かれているかの宣言。文字化けを防ぎます。
ここ以降に書かれた文章はこの文字コードだと認識するので、出来るだけ最初の方で宣言します。
▼基準スタイルシート言語と基準スクリプト言語の指定<meta http-equiv="Content-Style-Type" content="text/css" />ものすごく簡単に言うとCSSとJavaScriptを使いますよ、ということ。※JavaScriptは広告部分に使われています。
<meta http-equiv="Content-Script-Type" content="text/javascript" />
▼スマートフォン/タッチデバイス（iPad等）向け設定<pc><meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=0.5, maximum-scale=1.5, user-scalable=yes" /></pc>"width=○○"→ページを表示する横幅。"device-width"の場合は画面サイズとイコール。
※ちなみに"width=数字"で、固定ピクセル幅になりますが、Androidは未対応です。
"initial-scale=○○"→初期表示時の拡大率（"initial-scale=1"は等倍＝画面に合わせるってことなので、上の"width=device-width"と同じ意味）
※↑この上二つは何もしなくてもナノからも自動で挿入されます。
"minimum-scale=○○"→ミニマムスケール、つまり最大の縮小倍率。0.5だと2分の1まで縮小可能。
"maximum-scale=○○"→マキシマムスケール、つまり最大の拡大倍率。1.5だと1.5倍まで拡大可能。
※↑この上二つは0〜10の間で数値の変更ができます。
"user-scalable=yes/no"→ズーム操作を許可する(yes)か否(no)か。
noにすると閲覧者が画面を拡大して見たいと思った時に拡大することができなくなります。また、入力フォームなどに書き込む際にもズームしなくなるので、操作性を考えるとyesがいいと思います。
▼電話番号の自動リンク制御<pc_only><meta name="format-detection" content="telephone=no" /></pc_only>スマートフォンでは、デフォルトのHEAD内タグを『出力する』だとナノから自動で挿入されるので、PC限定にしています。主にiPad向けの設定。
『出力しない』の方は、<pc_only>ではなく<pc>にしてスマートフォンにも適用させて下さい。
▼検索避け<meta name="robots" content="noindex, nofollow, noarchive, noimageindex, noimageclick" />知っている方も多いだろう検索避け。あくまでも、クローラ（検索プログラム）に対するお願いなので絶対ではありません。
"noindex"→検索結果に表示させたくないときに指定。
"nofollow"→リンクをたどってほしくないときに指定。
"noarchive"→キャッシュ、つまりページの複製を保存されたくないときに指定。
"noimageindex"→画像を検索対象にさせたくない時に指定。
"noimageclick"→画像リンクをさせたくない時に指定。
【参考】
その文書に関する情報（メタ情報）を指定する-HTMLクイックリファレンス
表示領域を設定する_TAG-index - ▼CSS-全端末適用
- body, div {ブラウザから自動で入る内外の余白を0にする。
padding:0;
margin:0;
}img {border: 0;}画像の周りに自動で入るボーダー（線）を消す。 - ▼CSS-スマフォ＆PC適用<pc>
- * {"box-sizing: content-box"→ボーダー（線）と余白を横幅と高さサイズに含めない（paddingやborderを入れると、その分全体のボックスは広がることになります。）。
box-sizing:content-box;
-webkit-background-clip:padding-box;
background-clip:padding-box;
-webkit-tap-highlight-color:rgba(0,0,0,0);
}
当テンプレートはDOCTYPE宣言文、HTMLタグへの記述を行っているため、標準モードでの解釈となり、仕様書通りの書き方となります。
【参考】
表示モードの切り替え-HTMLクイックリファレンス
"-webkit-tap-highlight-color:rgba(0,0,0,0)"→スマートフォンなどのタッチデバイスでタップ時に出る枠線や半透明のハイライトを出ないようにします。
"background-clip: padding-box"→背景をボーダーを除いた範囲に指定する。
本来は、"background-clip:border-box"が初期値です。こちらは背景がborderの下まで広がっています。
Safari（iPhone）だと、丸角にした時に角の部分に背景がちょっとにじむようなので、padding-boxにしています。
【参考】
背景の適用範囲を指定する-HTMLクイックリファレンス
Safariで見かける角丸のにじみを解消するスタイルシート-コリスimg {-ms-interpolation-mode:bicubic;}IE用。画像を縮小・拡大表示する時に重視されるモード。通常だとあまり綺麗に拡大・縮小されないということなので、bicubic（画質重視）にしています。a{"outline: none"→主にFirefox用。アクティブリンクした時に出る点線を消す。IEの一部バージョンでも点線が出ますが、この方法では消えません（仕様です）。
outline: none;
background-color:transparent;
}
"background-color: transparent"→リンク背景を透明（transparent）にする。IE10以上でアクティブリンク時に一瞬灰色の背景が出るのを回避します。input,textarea,select {"outline: none"→PC用。入力エリアやプルダウンメニューをフォーカスした時に出る縁取り（ボーダーとは別）を消します。
outline: none;
vertical-align: middle;
}
"vertical-align: middle"→主にfirefox用。プルダウンメニューと送信ボタンを横に並べた時に横の位置が揃うようになります。body input[name="pageJump"] {width:3em;}小説機能のページジャンプ部分はinput[type="text"]なので、通常は上の20emが適用されてしまいます。
ページジャンプ機能の部分だけ横幅を3文字分の固定幅にしています。 - ▼CSS-PCのみ適用<pc_only>
- br {letter-spacing:0;}IE不具合回避用。これがないと、連続改行内の偶数行が無視される。
【参考】
文字の間隔を指定する-TAGindexform {IE7用。IE7ではform要素の直前に自動で一行余分に空白改行が入ります（他のブラウザでは入りません）。
*display:inline;
*zoom:1;
}
インライン要素化することで、この改行をなくしています。
※注意点
独自タグ等を含めてinputやtextarea等を連続して使うときは、通常縦に並びます。しかしIE7ではインライン要素化しているので横に並んでしまいます。
IE7でも正常に表示したい場合は、<div>等で囲って下さい。input,textarea,select {入力エリアやプルダウンメニューの設定です。
padding:2px 0.3em;
margin:2px;
background-color:transparent;
font-size: 14px;
}
通常、PCではform要素の背景は白色なので、これを透明（transparent）にしてページの背景色を白以外に変えた時に同じ色になるようにしています。
"font-size:○○"→主にChrome用です。文字サイズを相対指定（％やem指定）していると、Chromeではform内の文字サイズが極端に小さくなってしまいます。それを回避するため、あえてピクセル指定しています。
なお、そのまま相対指定したい場合は、"font-family: sans-serif"など、文字フォントの指定をすると回避できるようです。input[type="submit"] {送信ボタンの設定です。
-webkit-appearance:button;
cursor:pointer;
}
"cursor: pointer"→マウスオン時に指マークに変わります。input[type="text"],input[type="password"],textarea {width:20em;}拍手などの一行入力エリア、パスワード入力エリア、複数行入力エリアの横幅の設定です。
ナノの設定で指定した数字、つまりはcols="数字"よりもCSSの値が優先されます。
例えば、下のような入力エリアがあったとすると、
<textarea cols="20" rows="4">文字</textarea>
colsが20（半角）なので、全角で10文字分の幅しかありません。
フィーチャーフォンではこのくらいが限界いっぱいですが、PCだと（個人的には）10文字はかなり短いです。なので、CSSで上書きして20文字分の長さを取っています。
20文字が長いなと感じた場合は、お好みで調整して下さい。 - ▼CSS-スマフォのみ適用<smartphone>
- スマートフォンでは主に、ナノから自動で入るCSSをひとまずリセットして、個人的に必要だと思った設定を入れています。input[type="text"],input[type="number"],input[type="password"],input[type="submit"],select,textarea {"appearance: none"→主にiPhone用。標準ブラウザであるMobileSafariで自動で挿入される設定を一旦リセットします。
-webkit-appearance:none;
appearance:none;
height:2em;
padding:2px 0.3em;
margin:3px;
border-radius:0;
background:none;
font-size:14px;
}
"border-radius"→丸角リセット
"background"→背景のグラデーションや色をリセット。
【参考】
プラットフォームにおける標準的なUIの外観にする-HTMLクイックリファレンス
※簡易設定版では、selectはブラウザに依存させるため要素名がありません。input[type="text"],input[type="number"],input[type="password"] {一行入力エリアの横幅を画面サイズに対して60％にする。高さは2文字分（2em）なので、見た目上、上下には0.5文字分の余白が入ります。
width:60%;
}
同じinput[type="text"]の小説機能のページジャンプ部分の入力エリアは、自動幅に設定を上書き。input[type="submit"] {
-webkit-box-shadow:none;
width:auto;
font-weight:normal;
}
送信ボタンは文字数に合わせて自動幅、太字設定になっているのを通常の大きさにリセット。textarea {複数行入力エリアの横幅を画面サイズに対して70％にする。
width:70%;
height:5em;
padding:2px 0.3em;
}
※上の方で高さを2emに設定しているので、5emに上書き、フォーカス時は（ナノからの設定により）10emになります。▼ここから詳細設定版の方だけにある設定input[type="checkbox"],input[type="radio"] {ラジオボタンと、チェックボックスの設定。縦横20pxに設定（小さく感じたら変更して下さい）。
-webkit-appearance:button;
appearance:button;
width:20px;
height:20px;
margin:1px 0.5em 1px 0;
border:0;
vertical-align:-5px;
}
スマートフォンそれぞれから自動で入る設定を回避するため、ボタンにしています。
"vertical-align"→ボタンの位置を指定しています。右の項目に合わせて値を変更して下さい。基準だと、文字の下部とボタンの下部の位置が同じ高さになっています。そこからプラス値で上に、マイナス値で下に動きます。
文字サイズが14pxでボタンのサイズが20pxなので、ボタンの位置をちょっと下に下げるとバランスが良く見えます。input[type="checkbox"] {ラジオボタンとチェックボックスの画像の設定。当サイトからダウンロードしてもいいですし、他のサイトからダウンロードしたものを使ってくださっても構いません。
background:url("未選択チェックボックス画像URL") no-repeat center;
background-size:contain;
}
input[type="checkbox"]:checked {
background:url("選択中チェックボックス画像URL") no-repeat center;
background-size:contain;
}
input[type="radio"] {
background:url("未選択ラジオボタン画像URL") no-repeat center;
background-size:contain;
}
input[type="radio"]:checked {
background:url("選択中ラジオボタン画像URL") no-repeat center;
background-size:contain;
}
"background-size:contain"→縦横比は保持して、背景領域に収まる最大サイズになるように背景画像を拡大縮小する。
この設定により、元サイズが20pxでなくても自動で拡大縮小してくれます。
注意点としては、縦横のサイズが同じものを選んで下さい。select {プルダウンメニューの設定。
padding:0 0.5em 0 22px;
background:url("プルダウンメニュー矢印画像URL") no-repeat 5px center;
}
selectの設定を"appearance:"でリセットすると右端の下矢印部分が消えてしまうため、プルダウンメニューと分かるよう代用のものを入れる必要があります。
このCSSでは、下矢印の画像を入れられるよう、左端にその分の余白（22px）を入れています。背景なので、余白を入れないと文字が上に重なりますのでご注意を。
（画像は右端に配置も出来ますが位置を固定しづらいので左端にしています）
使う画像は当サイトからダウンロードしてもいいですし、他のサイトからダウンロードしたものを使ってくださっても構いません。
なお、サイズは高さ28px以内のものを選んで下さい。自動で調整はされません。横幅は特に制限ありませんが、22pxより長いものだと左端のpaddingを超えるので、値を変更するのをお忘れなく。
※注意点
スマートフォンのfirefox（ブラウザ）で閲覧すると、画像の下矢印とは別に右端に▼矢印が出ます。
上のselectの設定内に
text-indent: 0.3em;
text-overflow: "";
を追加すると表示されなくなります。
"text-indent"で左にインデントを入れることで文字を少し右にずらして、下矢印を枠外にはみ出させています。
"text-overflow"ははみ出した部分の処理です。この場合、何も表示されないので、下矢印が見えなくなります。
なお、この"text-indent"と"text-overflow"を入れると、firefox以外のブラウザ（標準ブラウザ等）では右端の文字が少し見切れます。
firefoxでの閲覧時の見た目を気にしなくてもいいなら特に入れる必要はないと思います…。 - ▼おまけ：スマートフォンで丸角復活の手順
- 基準のCSSを適用すると、スマートフォン閲覧時において、以下のように入力フォームへの自動設定が全てリセットされます。
適用前→適用後（テスト機：iPhone4s）
サイトの雰囲気によっては、フォームの角は丸角のままでいい、という場合もあると思いますので、以下を参考に改変してみて下さい。
基準CSS（簡易/詳細）設定内の<smartphone></smartphone>で囲まれた部分、input[type="text"],input[type="number"],input[type="password"],input[type="submit"],select,textarea {※border-radiusは丸角のCSS3プロパティです。
-webkit-appearance:none;
appearance:none;
height:2em;
padding:0 0.3em;
margin:3px;
border-radius:0; /* ←ここの0を○○px等に変更 */
background:none;
font-size:14px;
}
▼簡易設定版（無印）の方はこちらのborder-radiusも変更select {
height:2em;
padding:0 0.3em;
margin:3px;
border-radius:0; /* ←ここの0を○○px等に変更 */
font-size:14px;
}
▼PCでも丸角にする
フィーチャーフォンでは未対応ですが、PCではborder-radiusに対応しているブラウザがありますので適用することができます。
<pc_only></pc_only>で囲まれた部分、input,textarea,select {
padding:2px 0.3em;
margin:2px;
background-color:transparent;
font-size: 14px;
border-radius:○○px; /* ←丸角の設定を追加 */
}
［PREV］［NEXT］