<ul>タグや<li>タグのリスト要素のインデント幅を変更する方法を紹介します。概要ul タグや li タグのリスト要素のインデント幅を変更する場合には、CSSのmargin, padding プロパティを利用します
ページ幅に合わせて段組みのカラムの幅が変化するリキッドレイアウトをCSSで作成します。この記事で紹介するレイアウトでは3つのカラムの幅が変化します。左右のカラムが25%、中央のカラムは50%の幅になります。参考サイトhttp://matth
ページ幅に合わせて段組みのカラムの幅が変化するリキッドレイアウトをCSSで作成します。この記事で紹介するレイアウトでは3つのカラムの幅が変化します。左のカラムが50%、中央と右のカラムは25%の幅になります。FlexBox を利用する方法F
ページ幅に合わせて段組みのカラムの幅が変化するリキッドレイアウトをCSSで作成します。この記事で紹介するレイアウトでは左右のカラム幅が変化します。左は25%、右は75%のカラム幅になります。参考サイトhttp://matthewjamest
ページ幅に合わせて段組みのカラムの幅が変化するリキッドレイアウトをCSSで作成します。概要ページ幅に合わせて段組みのカラムの幅が変化するページを作成するには、FlexBoxを利用するかFloatを利用して段組みをします。寸法図左右のカラム幅
ページ幅に合わせて段組みのカラムの幅が変化するリキッドレイアウトをCSSで作成します。この記事で紹介するレイアウトでは左右のカラム幅が変化します。左右ともにページ幅の50%のカラム幅になります。参考サイトhttp://matthewjame
ページ幅に合わせてカラムの幅が変化するリキッドレイアウトをCSSで作成します。余白部分が全体のページ幅の％指定になっています。(今回の例では2%の余白をとっています)参考サイトhttp://matthewjamestaylor.com/bl
ページ幅に合わせてカラムの幅が変化するリキッドレイアウトをCSSで作成します。参考サイトhttp://matthewjamestaylor.com/blog/ultimate-1-column-full-page-pixels.htm寸法図
ページ幅に合わせて段組みのカラムの幅が変化するリキッドレイアウトをCSSで作成します。この記事で紹介するレイアウトでは左カラムの幅が変化します。右のカラムは固定幅になります。参考サイトhttp://matthewjamestaylor.co
ページ幅に合わせて段組みのカラムの幅が変化するリキッドレイアウトをCSSで作成します。寸法図この記事で紹介するレイアウトでは右カラムの幅が変化します。左のカラムは固定幅になります。Float プロパティを利用する方法参考サイトhttp://
ページ幅に合わせて段組みのカラムの幅が変化するリキッドレイアウトをCSSで作成します。この記事で紹介するレイアウトでは左カラムの幅が変化します。中央のカラムと右のカラムは固定幅になります。参考サイトhttp://matthewjamesta
ページ幅に合わせて段組みのカラムの幅が変化するリキッドレイアウトをCSSで作成します。この記事で紹介するレイアウトでは中央カラムの幅が変化します。左右のカラムは固定幅になります。寸法図FlexBoxを利用する方法コード下記のHTML, CS
CSSでフッタとヘッダがつき、全体が中央ぞろえされた2段組みページを作成します。Float プロパティを利用する方法コード例<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transiti
CSSを利用して、ヘッダとフッタ領域がついた2段組みのページを作成します。Float プロパティを利用する方法Floatプロパティを利用するオーソドックスな段組み方法のコードです。コード例下記のHTMLファイルを作成します。<!DOC
スタイルシート(CSS)でFloatプロパティを利用し、Tableタグを使わない段組みをします。今回はヘッダもフッタもない、シンプルな2段組みページを作成します。コード例<!DOCTYPE html PUBLIC "-//W3C//D
テキストの配置(左寄せ、右寄せ、中央揃え)を設定する場合はtext-alignプロパティを設定します。書式text-align:(配置スタイル)配置スタイルには下記の値を指定できます。スタイル配置left左寄せright右寄せcenter中
tableタグの表(テーブル)のセルの幅を指定したにもかかわらず、意図したセル幅にならない現象について紹介します。概要テーブルのセルの幅をスタイルシートで指定したにもかかわらず、意図したセル幅にならない場合があります。原因としてはいろいろあ
Floatプロパティを利用して段組みをしたにもかかわらず、段組みが正しく入れ子状態にならず、枠を突き抜けてしまう現象と対策について紹介します。現象Floatプロパティを利用してdivタグで段組みをしたにもかかわらず、段組みが正しく入れ子状態
ネストされた ul li リストの先頭記号を変更する場合のCSSのコードと表示結果です。概要ULタグ内に記述されたULタグのLI要素のスタイルを定義する場合には、スタイルシートに以下の記述をします。UL LI UL LI{同様にULタグ内の
ULタグやLIタグで作成したリストの項目の先頭の記号を画像に変更するコードと実行結果を紹介します。概要ULタグやLIタグで作成したリストの項目の先頭の記号を画像に変更する場合は、スタイルシートのlist-style-imageプロパティを用
画像をAタグで囲みリンクとして設定すると画像の周囲に青線の枠が表示されます。これを防ぐ方法を紹介します。概要基本方針はimgタグのborderにborder-style:none;を設定することで、枠を非表示にできますが、いくつかの方法があ
text-align:centerを指定したにもかかわらず、div枠が中央に配置されない現象の紹介です。現象text-align:centerを指定したにもかかわらず、div枠が中央に配置されません。不具合の発生するコードdiv-cente
Div枠にPaddingスタイルを設定すると、Div枠の大きさが意図されたものより大きくなってしまう現象について紹介します。現象Div枠にPaddingスタイルを設定すると、Div枠の大きさが意図されたものより大きくなってしまうことがありま
現象Divタグを入れ子にした場合、内側のDivタグ枠のスタイルのmarginが有効にならないことがあります(IE8, FireFoxなど)。これは、「マージンの相殺」(margin cpllapsing)がおきてしまうため内側のDivタグの
CSSを利用し、ULタグでメニューのバーを作成するコードと表示結果を紹介します。概要ULタグLIタグを利用してメニューやツールバーなどのUIを作成するHTMLコードを紹介します。プログラム1 : Floatを利用した実装下記のHTML,CS
概要HTMLタグではTableのセル間に余白を開けない場合は、tableタグの属性値として cellspacing="0" を指定すると余白が開かなくなります。同様の処理をCSSで表現する場合のコードを紹介します。セル間に余白を開けない場合
<a>タグでmargin,paddingスタイルが効かない動作について紹介します。概要aタグはインライン要素なのでそのままでは、margin,paddingスタイルは有効になりません。margin, paddingを有効にしたい
