IT工房 ブログ

CSSの優先順位

CSS優先順位 CSSの優先順位は以下で決まります。 セレクタの種類・書き方 指定の順番 スタイルシートの種類(ブラウザ側・ユーザー側・制作者側) !important指定 セレクタの種類・書き方について セレクタの種類には、 IDセレクタ classセレクタ 疑似classセレクタ、classセレクタ 要素セレクタ 疑似要素セレクタ 全称セレクタ の5つがあり以下のような優先度になります。 IDセレクタ > classセレクタ = 疑似classセレクタ(hoverなど) > 要素セレクタ(pなど) = 疑似要素セレクタ(beforeとかafterなど)> 全称セレクタ(*) セレクタには子孫セレクタの設定など、個別性が高いセレクタ程、優先度が高くなります。 セレクタの優先度算出方法 セレクタ A B C D 優先度 * 0 0 0 0 0000 p 0 0 0 1 0001 p strong 0 0 0 2 0002 p .section 0 0 1 1 0011 #content p .section 0 1 1 1 0111 div#content p .section 0 1 1 1 0112 スタイル属性(<p style=”width:100px”>~</p>など) 1 0 0 0 1000 CSSの優  >>続きを読む

ネガティブマージンでボックス間マージンを簡単設定

ネガティブマージンとは ネガティブマージンとは、マイナス値が与えられたmarginプロパティのことを言います。 通常フローの場合、topまたはleftにネガティブマージンを指定した際は、その指定した方向に上、または左に引っ張られたように動きます。 サンプル1 ところが、bottomまたはrightにネガティブマージンを指定した際は、下または右に要素は動きません。その代わり、それに重なった要素を引っ張ります。 サンプル2 サンプル3 ネガティブマージンの便利な使用法 divなどで作成したボックスに右マージン10pxを指定し、ボックスごとの隙間を確保したとします。 次に右マージン20pxを指定し適度なマージン幅を空けます。 ところが右端のボックスにはマージンを空けたくない場合、 親要素に対してボックスにかけただけのマージン幅と同等のマイナスマージンをかけます。 この場合だと−20pxです。そうするとカラム落ちすることなくボックスが並んでくれます。 この例はWebクリエイター能力認定試験 XHTML 1.0対応のサンプル問題の「オススメWalk〜Okayama Walk」で出題されています。 一部分を抜き出して多少脚色したサンプルを用意しました。 サンプル4 色々編集して理解を深めるとよいでしょう。 *脚色は背景色の設定とフロートの影響を無くして親要素が囲めるようにoverflow:hi  >>続きを読む

YouTubeやFlashを挿入したHTMLでのz-indexについて

YouTubeの重なり順を変えたい YouTubeを挿入したHTMLではIEなどで position:fixedとしたブロック要素の上を通過してしまいます。z-indexを用いても重ね順は変わりません。 こんな風になります。(ブラウザの種類で表示はかわります) z-indexとは z-indexプロパティは、ボックスの重なりの順序を指定するものです。 これはpositionプロパティでstatic以外の値が指定されている要素に適用されるものです。 値の指定方法 重なりの順序を整数で指定し、0を基準として値が大きいものほど上になります。負の値も指定可能です。”auto” が指定されている場合の要素の重なり方は、文書のソース内であとに記述されている要素ほど上に重ねられて前面に表示されることになります。 YouTubeを挿入した要素の対策 この場合は以下のとおりにします。 動画ページで発行されたコードのiframe要素へ以下のプロパティを追加します。 frameborder=”0″ wmode=”Opaque” 更に発行されたコード内にあるURLの末尾に以下のパラメータを追加します。 ?wmode=transparent これで、z-index が効くようになります。 Flashの場合もこれと同様にz-indexが効  >>続きを読む

フォームの中の2種類のlabel要素の指定方法

label要素とは label要素はフォームの入力部品とラベルを関連付ける要素です。 この要素で部品とラベルの関連付けを行なうと、ブラウザ上でラベルをクリックした場合に、その部品をクリックしたのと同じ動作をさせることができるようになります。 関連付ける方法は以下の2つの方式があります。 2通りのラベルの指定方法 <label>~</label> でラベルと部品を囲む方法です。 <label> の for 属性に部品の ID を指定する方法があります。id名とfor名は同一にします。 1番目の方法はIE6以前のものなど対応していないブラウザがあるとされています。2番目のfor属性で指定する値は、関連付けする部品のid属性と同じ値にしなければなりません。一般的にこちらの方法を取る場合が多いようです。

フォームのmethod属性でpostとgetの違い

form要素のmethod属性で、getとpostの参考例です。 簡単なPHPでフォームに入力した内容をgetメソッドとpostメソッドでPHPにデータを渡して表示するサンプルです。 それぞれ表示されたページのURLを確認してください。 get方式ではアドレス欄にデータがそのまま表示されているのがわかります。 get送信の例 post送信の例 method属性の値としては「get」または「post」のいずれかを指定します。method属性を省略した場合は、初期値は「get」です。 「get」はサーバ側にあるデータを取得するような場合に使われます。「get」にすると参考例のように、URIに記述されたプログラムへリクエストが送られる時にそのリクエストの後ろにデータを付けて送信するのが特徴です。 「post」メソッドの場合はURIにデータを付けるのではなく別の方法でデータは送られます。その為データの量に制限がありません。何か新しいデータをサーバに送信して登録するといった用途には「post」を利用します。そのようなことから一般的に「post」を利用する場合が多いです。

テーブル幅を固定したい

テーブルを固定したい場合の例です。 まだ完璧ではありませんが・・・ aaaa bb cccc dddd eeeee vvvvvvvvvvv ww xxxx yyyy zzzzzzzzzzzzzzzzzzzz   テーブル幅は300px 固定したセルeeeee幅100px table-layout: fixedでテーブル幅は固定できた。 word-wrap: break-word;で半角英文字がセルを突き抜ける問題はなくなった。

Dreamweaver効率入力について

Dreamweaverでのタグ付けの効率化ですが、タイピングが早い方はDWの補助機能を合わせるとタイピングで十分なのですが、あるいはZen コーディングを使う方法もあると思うのですが、アマチュアから少し抜け出したくらいのレベルでは便利かも。 p要素はCtrl+Shift+p h1要素はCtrl+1 h2要素はCtrl+2 h3要素はCtrl+3 h4要素はCtrl+4 h5要素はCtrl+5 h6要素はCtrl+6 以下は設定がショートカットがありませんので ショートカットを自分で登録すると便利です。 ul要素 Ctrl+7 ol要素 Ctrl+8 dl要素 Ctrl+9 div要素 Ctrl+Alt+d 新規CSS作成も登録しておくとよいかも。

DW CS4でプレビューができなくなるエラー

Dreamweaverのブラウザプレビューが突然使用できなくなった場合は「WinFileCache-D06F2AB8.dat」ファイルに問題がある場合があります。これを削除すると回復します。いきなりの削除が心配な場合はデスクトップなどに待避させるといいでしょう。 「WinFileCache-D06F2AB8.dat」ファイルはC:Usersユーザー名AppDataRoamingAdobeDreamweaver CS4ja_JPConfiguration などにあります。 もし、無い場合は似たような場所を探しましょう。

フロートについて

通常フローについて サンプル HTMLソース ABCDの各ボックスはすべて同じ条件のdivで囲まれたテキストです。現在は通常フローで綺麗に並んでいます。ボックスBだけはこれからフロートさせますので背景色を変えています。外側の水色のボックスはdiv#containerで各ボックスを囲んだものです。ABCD各ボックス間の上下のマージンは相殺されていることに着目してください。 次に、ボックスBのマージンを30pxに変更しました。ボックスAとボックスBの間のマージンはボックスBのマージン30pxとなります。またボックスBとボックスCの間のマージンもボックスBの30pxとなります。垂直方向のマージンはそれぞれ大きい方のマージンが反映され、合計の40pxにはなりません。 サンプル フロート フロートとは、通常フローからはずれて、現在の通常フローから左または右にシフトしたボックスです。フロートした結果の特徴はフロートしたボックス内の内容(テキストなど)が側面に沿って自由に動いてよい(これは後述の’clear’プロパティによって回り込みを禁止できる)ことです。内容(テキストなど)は左浮動ボックスの右側あるいは右浮動ボックスの左側に流れます。 フロートしたボックスは、自身の外辺が包含ボックス辺または別のフロートしたボックスの外辺に接するときまで左または右に移動します。 もし、  >>続きを読む