inputの見え方サイズの違い
書き込みが出来るinputのテキストエリアなど「size」で一見大きさを設定できるように思えますが、ブラウザによって表示される長さが違ったりします。
特にMacのサファリだと、驚くくらい長さが違って見えたりします。
※1.5倍くらいに見えるかも…(^_^;)
inputの長さを全てのブラウザで統一したい場合は、スタイルシートで長さを指定したほうが良いです。
※ちなみに上記HTMLの意味
size="" 入力フィールドの横幅を数値で指定します
maxlength="" 入力できる最大文字数を指定します
対応ブラウザのみに対応させるハック
このブラウザにだけスタイル設定を対応させたい、このブラウザ以外にスタイルを設定させたい。
そのときに便利なのがこれらのハックです。
ただし…このハックはこれからのブラウザでどうなるのかわかりませんので…できるだけ使わずに、ハックしなくても良いデザインを考えることが大切だといわれています。
| 対応ブラウザ | 対応ブラウザに●を適用 | 対応ブラウザ以外に●を適用 対応ブラウザに■を適応 |
|---|---|---|
| スターハック（* html ） | ||
| inIE4.0～6.0 MacIE4.0～5.2 |
* html p { ● } |
p{ ● } * html p { ■ } |
| アンダースコアハック（_） | ||
| inIE4.0～6.0 | p{ _● } |
p{ ● _■ } |
| バックスラッシュハック（/*\*/） | ||
| MacIE5.0～5.2 | p { ● /*\*/ ■ /* */ } |
p { /*\*/ ● /* */ } |
| Caioハック（/*/*/） | ||
| NN4 | p { ● /*/*/ ■ /* */ } |
p { /*/*/ ● /* */ } |
| ハッシュハック（#） | ||
| inIE4～6 MacIE5.0～5.2 Opera7 Mozilla Firefox |
p{ #● } |
p{ ● #■ } |
| スター7ハック（html *） | ||
| inIE5.5～6.0 MacIE5.0～5.2 Safari |
html*p { ● } |
p { ● } html * p1 { ■ } |
| Fbriceインバージョン （/*/*//*/） | ||
| NN4 Opera4～5 |
p{ /*/*//*/ ● /* */ } |
p{ ● } p{ /*/*//*/ ■ /* */ } |
| :root擬似クラス（:root） | ||
| MacIE5.0～5.2 Mozilla FireFox Safari |
:root p{ ● } |
p{ ● } :root p{ ■ } |
| xmlns属性（html[xmls] ） | ||
| Mozilla FireFox Opera7.5～ Safari |
html[xmls] p{ ● } |
p{ ● } html[xmls] p{ ■ } |
| 全角スペースハック（ ） | ||
| inIE4～6 WinOpera8 |
p{ ● } |
p{ ● } p{ ■ } |
| 複合CSSハック スターハック/ スター7ハック | ||
| Safari | html*p { ● } * html p { ■ } |
p { ● } html*p { ■ } * html p { ● } |
float時の表示バグ対策
flat…便利といえば便利なのですが、これを使うといろいろと問題が起きる事が…(^^ゞ
中でも解除がうまくいかないときに便利なのが以下の方法です。
<div id="box">
<dl class="left">
<dt>タイトル１</dt>
<dd>中味その１です</dd>
</dl>
<dl class="right">
<dt>タイトル２</dt>
<dd>中味その２です</dd>
</dl>
</div>
width:100%;
}
#box dl.left{
float:left;
width:200px;
padding:0;
}
#box dl.right{
float:left;
width:200px;
padding:0;
margin:0;
}
#box dd{
display:inline;
padding:0;
margin:0;
font-size:85%;
}
/* フロート解除の設定 */
.box:after{
content: " ";
display: block;
visibility: hidden;
clear: both;
height: 0.1px;
font-size: 0.1em;
line-height: 0;
}
/* WIN用IE \*/
* html .box { display: inline-block; }
/* MAC用IEはここから適応されない \*/
* html .box { height: 1%; }
.box { display: block; }
/* */
:after
コンテンツの最後に content: " "を挿入し、それをなるべく見えない形（font-size: 0.1em;とか）で指定させた上で、「clear: both;」でクリア。
※これで「br clear="all"」と同じ効果です。
IEはafterが効かないので、WinIEとMacIEに「*html」のハックを適用させる。
※「* html」は、WinIE4以上とMacIE5以上にのみスタイルが適用させるもの。
「display: inline-block;」は、ブロックボックスでありながらインラインに流し込まれるようなスタイルを指定するものだそうです。
Movabletypeのテンプレート概要
Movable typeのテンプレートをカスタマイズしようとしても、どのテンプレートでどこが治るか正直わからないときがあります(^^ゞ
そのときに便利な大まかな用途メモです。
■アーカイブ・テンプレート
アーカイブ・テンプレートは、ブログ・アーカイブの外観や使い勝手を定義します。 選択した各アーカイブの種類(「アーカイブの設定」を参照)に対して、複数のアーカイブ・テンプレートを関連付けられるので、アーカイブしたエントリー群を異なる表示形式に設定できます。 たとえば、月毎のアーカイブに対し、エントリーを月毎にまとめて見せてくれるページと、月毎にカレンダー表示するページの2種類の表示形式を作成することができます。 あるいは異なるテンプレートを使って、アーカイブをハイテク風にも手作り風にも見せることができます。
■カテゴリー・アーカイブ
カテゴリーページのテンプレートです。
■エントリー・アーカイブ
各ページのテンプレートです。
※パーマリンクやトラックバック・コメントなど、トップページから飛ぶ各ページのテンプレートです。
■日付・アーカイブ
カレンダーなどから飛んだときの日付のテンプレートです。
■コメント・プレビュー
このテンプレートは、コメントの確認(プレビュー)を使うよう選択した場合(デフォルトでは選択済み)、コメントの確認ページのレイアウトを定義します。
■コメント・保留
コメントの設定によっては、ユーザーが投稿したコメントをすぐにサイトに表示しないようにすることも可能です。たとえば、コメントの事前確認を有効に設定した場合などです。 「コメント保留のテンプレート」は、投稿したコメントがすぐには表示されないよう設定している場合、コメント投稿時にユーザーに表示されるメッセージを定義します。 このメッセージを設定しておくと、ユーザーはコメントが受理されたことを確認でき、コメントが表示されるまで投稿を繰り返す試みを止めてくれます。
■コメント・エラー
このテンプレートは、ユーザーがコメントを投稿した際にエラーが発生したとき、ユーザーに表示されるエラーメッセージを定義します。エラーとは、たとえば、名前やメールアドレスが入力されていない、メールアドレスやURLが無効である、などを指します。 このテンプレートを使うと、コメント投稿時のエラーをユーザー自身が修正してコメントを再投稿できるようにできます。
■画像のポップアップウィンドウ
画像をアップロードすると、新しいエントリーにその画像を埋め込むか、その画像へのリンクを張るかの選択を、ポップアップ・ウィンドウで尋ねられます。 リンクを張ることを選択し、「画像のポップアップ・ウィンドウ」のレイアウトを定義した場合は、ポップアップ・ウィンドウにその画像を含むように、HTMLファイルが自動作成されます。
■コメント・リスト
このテンプレートは、コメントにポップアップ・ウィンドウを使うよう選択した場合(上記の「 コメント 」を参照)、コメント・ページのレイアウトを定義します。
■ダイナミックページ・エラー
このテンプレートは、ダイナミック・ページの出力で、エラーが発生したときに表示します。
■トラックバック・リスト
このテンプレートは、システムで特定のエントリーに送られたトラックバックpingを一覧表示するポップアップ・ウィンドウのレイアウトを定義します(「トラックバック・システムについてのドキュメント」を参照)。
■テンプレート・モジュール
Movable Typeを使うと、共通して利用するひとまとまりのHTMLコードをテンプレートとして抽出でき、他のテンプレートに埋め込むことができます。これらの汎用テンプレートは、「テンプレート・モジュール」といいます。
全体を縦に中央配置
全体を横に中央配置するには、ページ全体の中央寄せで説明したように、スタイルシートで簡単に表現できるのですが、ページ全体の縦を中央寄せする場合は一苦労です(^^ゞ
MAC IEでは無理でしたが、一応これで縦方向に中央配置できました。
top:50%;
left:50%;
margin:-ボックスの大きさの半分;
スタイルシートにこだわらない方はテーブルのほうが見え方的には案パイかもしれません（；＿；）
<tr>
<td align="center">中央に配置したいもの</td>
</tr>
</table>
スタイルの優先順位
CSSは基本的に下に書いたものが優先されます。
イメージとしては上で書いたものが下で書いたものに上書きされる感じです。
たとえば、同じ要素に違った形でスタイルを設定してたらどうなるのでしょう？
<ul class="maincol">
<li>
<span class="subcol">設定される色</span>
</li>
</ul>
</div>
■「設定される色」は、色をこれだけのパターンで設定できます。
#mainbox span{color:red;}
.maincol span{color:blue;}
li span{color:black;}
.subcol{color:green;}
span{color:yellow;}
ここで表示されるのは、#mainbox span{color:red;}です。
それは何故かというと、スタイルの設定は、セレクトを並べると加算されていくからです。
ちなみに点数は以下になります。
p,h1 などのタグ1ポイント
.sample（class）10ポイント
#sample（ID）100ポイント
枠の表示位置を指定する「position」について
枠の表示位置を指定する「position」です。マージンやパディング、floatがらみで妙な表示になったり、バグがでたりと…いろろいあるので使いどころがちょっと難しいです。
■絶対配置：基準ボックスは、「親であり、かつposition:relative;が指定されているボックス」。
そのようなボックスなければbodyが基準になる。
※absoluteを指定したボックスは、下に続く要素に無視される。
※floatとは一緒に使えない。
■相対配置：position:staticを指定した場合表示される位置を基点として位置を指定。
つまり…普通に表示されるであろう場所から計算すればOKです。
※floatと一緒に使う事もできる。
floatの解除の仕方
floatを解除するのに、「clear:both;」を指定するのが一般的です。
でも「clear:both;」を指定するためにdivタグを追加するのが嫌だ…という場合は、「セレクタ:after」が便利です。
<div id="right">右側</div>
<div id="left">左側</div>
</div>
width:700px;
}
#right {
float:right;
width:500px;
}
#left {
float:left;
width:200px;
}
/*flat解除用*/
#wrap:after {
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
/*\*//*/
#wrap {
display:inline-block;
}
/**/
/* \*/
* html #wrap {
height:1%;
}
/* */
#wrap {
display:block;
}
IE以外、セレクタの後にfloatを解除
セレクタ:after{
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
/* \*//*/
MacIEにのみ適用させるスタイルを記述
/**/
/* \*/
* html WINIEのみ適用させるスタイルを記述
/* */
※display:inline-block; は、clearを指定したボックスの内側上部に隙間が空くのを防ぐ
※height:100%はwinIEで背景を綺麗に表示させたいときに使う。
ブラウザの表示を確認するのに便利なサイト
スタイルシートを使っていると、気になるのがページの表示崩れ。
テーブルで組んでいたころに比べるとその崩れっぷりは予想を超えるものがあります(^。^;)
実際、Windowsしかもっていない環境だと、Machintoshでどう表示されるかわからないし、Machintoshしかもっていないと、Windowsではどう表示されているのかわかりません。
全てのブラウザ対応というわけではありませんが、WindowsとMachintoshでどう見えているかサイトをキャプチャーしてくれるサイトを紹介します。
RSSで読もう
Web Designing（ウェブデザイニング）
WEB FLASH（ウェブフラッシュ）
WEB FLASH（ウェブフラッシュ）
Web Site expert(ウェブサイトエキスパート)
ＭｄＮ（エムディーエヌ）
Web Creators（ウェブクリエイター）