HTML&CSS

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

form要素のmethod属性で、getとpostの参考例です。 簡単なPHPでフォームに入力した内容をgetメソッドとpostメソッドでPHPにデータを渡して表示するサンプルです。 それぞれ表示されたページのURLを確  >>続きを読む

テーブル幅を固定したい

テーブルを固定したい場合の例です。 まだ完璧ではありませんが・・・ aaaa bb cccc dddd eeeee vvvvvvvvvvv ww xxxx yyyy zzzzzzzzzzzzzzzzzzzz [crayo  >>続きを読む

Dreamweaver効率入力について

Dreamweaverでのタグ付けの効率化ですが、タイピングが早い方はDWの補助機能を合わせるとタイピングで十分なのですが、あるいはZen コーディングを使う方法もあると思うのですが、アマチュアから少し抜け出したくらいの  >>続きを読む

Flash挿入のためのOBJECT タグおよび EMBED タグの属性について

HTML ファイル上で SWF を再生するために使用される OBJECT タグと EMBED タグの属性についてAdobeの説明はこちら

または [cra  >>続きを読む

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

Dreamweaverのブラウザプレビューが突然使用できなくなった場合は「WinFileCache-D06F2AB8.dat」ファイルに問題がある場合があります。これを削除すると回復します。いきなりの削除が心配な場合はデ  >>続きを読む

フロートについて

通常フローについて サンプル HTMLソース

ABCDの各ボックスはすべて同じ条件のdi  >>続きを読む

リストの余白の正体

最近の標準ブラウザではリスト要素のパディングはul要素に40pxデフォルトで設定されている場合が多いようです。IE7以前はliのマージンで設定されています。 aaaaa [crayon-58d34b8a5d2030855  >>続きを読む

テーブルのセルに長い英単語を入れたいが折り返しをしたい場合

テーブルのセル内で半角英数で英語の長い単語を入れると指定幅より大きくなってしまいます。 便利に使用できるのはIE限定のword-breakです。

インライン要素のソース中での改行の問題

インライン要素の途中で改行を行うと半角スペースが入ります。 以下の文章で「名前は」で改行したとします。

吾輩(わがはい)は猫である。名前は まだ無い。どこ  >>続きを読む

マージンについて考える2〜相殺

marginの相殺 通常フローでmargin同士が重なった場合に相殺が起こります。相殺は、数値の大きい方が適用されます。ただし、水平方向(横方向)のマージンは相殺されません。 marginの相殺のサンプル 相殺は入れ子の  >>続きを読む

マージンについて考える 1〜margin-auto

マージンの挙動をしっかり理解できるとレイアウトをコーディングすることが楽になります。 ここではmargin:autoについて考えてみたいと思います。 margin:autoといえば、ブロック要素の中央揃えね。となりますが  >>続きを読む

ボックスモデルについて考える CSS

(X)HTML文章の要素ツリーはそれぞれボックスモデルという四角形の領域を持っています。 ボックスモデルは上図のようなcontent(内容領域)、padding、border、marginの4つの領域で構成されています。  >>続きを読む

HTML リスト作成時の注意

リスト作成のとき、<ul>と<li>の間に全角のスペースが存在するとマージンの設定がおかしくなります。不要なマージンがついてしまいます。 見つけにくいエラーですから十分気をつけましょう。 たとえばこんな感じで  >>続きを読む

入れ子状態のブロック要素の上下マージンの困った挙動(マージンの相殺)

マージンの相殺について 上下のマージンは相殺される仕組みになっています。相殺によって、少ない方の数値が打ち消されます。 次のような例を考えてみましょう。 CSSの設定 [crayon-58d34b8a5ef8280333  >>続きを読む

画像を囲むボーダーの余計な空白

写真の下になぜかこんな空白が空いたらどうしますか? 解決方法はこれです。 vertical-align:bottom;をimgタグに指定します。 ブロック要素の中で画像を表示して、そのブロック要素にボーダーを設定すると下  >>続きを読む

line-heightの単位について

line-heightについて line-heightプロパティは、行の高さを指定する時に使用します。 line-heightとは、 例えばfont-sizeを10pxとしてline-heightを20pxに設定します。  >>続きを読む

各ブラウザでフォントサイズを統一する〜YUI fontsの使い方

各ブラウザでフォントサイズを統一する方法です。 Yahoo! UI Library(YUI)のFonts CSSを使用します。 ここで行っている内容は、body要素に対して基準になるフォントサイズを設定します。 各ブラウ  >>続きを読む

フォント指定例

フォントの指定はかなり繊細です。よく使用するフォントの設定はパターンとして保管しておくとよいです。Dreamweaverなどをうまく利用するのも手です。

フォントサイズ キーワード

CSS2.1の仕様におけるfont-sizeの絶対サイズ指定キーワードのフォントサイズは以下のとおりです。 CSS2.1 での絶対サイズ指定キーワードのフォントサイズ対照表 絶対サイズ xx-small x-small   >>続きを読む

ブラウザ別のデフォルトフォントサイズ

プロポーショナルフォントと等幅フォント フォントにはプロポーショナルフォントと等幅フォントがあります。 プロポーショナルフォントは、文字毎に文字幅が異なるフォントのことをいいます。 例えば i と w では文字の幅が異な  >>続きを読む

Web用に保存とhtmlソース

IllustratorCS6の「Web用に保存」で気づきましたが、htmlを吐き出す機能が無くなっています。 今時テーブルレイアウトのhtmlを吐き出されても何の意味もなかったわけですが、 クリッカブルマップをIllus  >>続きを読む

垂直方向にセンター揃え

displayをtable-cellとしてvertical-alignを使用する。 div { height: 200px; width: 300px; vertical-align: middle; display:   >>続きを読む