*

PC LIFE

ホーム >  Web制作 > 
CSSメモ MENU 

擬似クラス 3行1列の表

  • あいうえお
  • かきくけこ
  • さしすせそ
リスト表示の先頭と最後に適用するスタイルシート。
先頭が「firstChild」で最後が「lastChild」の指定により、右表のような簡単にリストが作成出来る。 先頭の bottom solid をdottedに
最後の top soid をdottedにするCSS。
n番目の表示を変えるCSS nth-child(n) (例)2行目の文字色を変える

擬似クラス4行4列の表

tableタグを使えば簡単に表が作成出来る。一方、tableタグではスマホ表示などレスポンシブウェブとしては、デザインが崩れる場合がある。そこでtableを使わず列を横並びにするため、divやul liタグでdisplay:inline-block;とすることで横並びが出来る。
  • お品書き
  • にぎり寿司
  • 2,500円
  • 1,800円
  • 1,500円
  • ちらし寿司
  • 2,000円
  • 1,500円
  • 1,000円
  • お好み寿司
  • 3,000円
  • 2,500円
  • 2,000円

HTMLの記述

注) リストの ul li で横並びにする場合、見易くするため、列の<li></li>と <li></li> との間で改行をいれると、後ろに数ピクセルの微妙な空白が出来る。上記の様に改行しないこと。


CSSの記述

注1) 2行目3行目で各々nth-child(n)で記述しているが、行が多い場合は、範囲を指定する記述方法がある。→参考サイト

注2)スマホ対応を考慮し、列幅は各々パーセント指定している。パーセントの合計を100%にすると罫線によって幅をはみ出して表が崩れるので、上記の表では罫線分5Pixel考慮し、パーセントの合計を99%にしている。



擬似クラス nth-child()

比較的よく利用されそうなnth-child()を以下に記述

例1.2番目から最後までの指定

  • A
  • B
  • C
  • D
  • E
  • F
  • G
  • H

html

css


例2.1番目から5番目までの指定

  • A
  • B
  • C
  • D
  • E
  • F
  • G
  • H

html

css


例3.4番目から7番目までの指定

  • A
  • B
  • C
  • D
  • E
  • F
  • G
  • H

html

css


横並びボックス display:flex; 中央揃え


ボックス内画像の下の余白を取る

右の画像のように、ボックスにボーダーを付けて表示すると、画像の下に余白が出てしまうことが解る。

画像ファイルに以下のCSSを付けることで画像がボックス化されて下部余白が無くなる。


-->

ボックスからはみ出す画像

上記のように、ボックス内に画像と文章が存在し、画像を「floar:right;」として右寄せにした時、右の画像のように、文章の高さより画像の高さが大きい時、次に続くセクションの内容が上のボックスに入り込んでしまう現象(画像がボックスから、はみ出したように見える)が起きる。

この現象となる要因は、画像の右寄せ(float:right)が継続してからで、これを解消するには、以下の2つの方法のいずれかで解消出来る。


マウスカーソルの形状

リンクさせた文字や画像では、マウスを重ねると通常「手の人さし指」の形にマウス形状が変化する。ただ、リンクをHTMLで記述出来ない場合(JavaScript使用時など)、リンクにマウスが重なったとき、以下のCSSを適用させることで、マウスの形状を変えることが出来る。例示は、「矢印に?付きのヘルプ」。

サンプル → 例示1 例示2


iframeのレスポンシブ化

iframeインラインフレームは、メディアクエリーでは横幅は伸縮出来るが、高さは伸縮しない。iframeをボックス(div)で囲み、cssを適用させることで、表示可能となる。

画像の中央揃え

画像をページやボックス、枠内の中央に配置するには、imgタグ内にcssを適用することで中央配置が出来る。

複数のclassに同じcssを適用

複数のclassやidに同じcssの指定をする時は、カンマで区切って記述する。各class名(id名)には必ず記号(.class #id))が必要。

要素にclassを複数指定

CSSの記述で似たような設定をしたいが一部異なる時に使うと便利。

例A HTMLの記述の場合

class名を「半角スペース」で区切ります。

サンプルA Sample A

html

css


ドロップダウンメニューが隠れる

ドロップダウンメニューが画像があると画像の下に隠れるしまう問題、ドロップダウンメニューへ表示の順序をCSSで指定することで解消出来る。z-indexは、殆ど使うことはないが、ドロップダウンロードメニューの場合、マウスを重ねると表示されている部分に重なることになる。この時、画像があると下に隠れてしまう。

ボックスの左右中央配置


左右の中央配置で良く利用される「margin:0 auto;」で殆ど出来る。ボックスの長さ(width=)を指定(pxや%など)していないと出来ないので注意。

クリック時のリンク領域拡大

文字を入れたボタン(リストやボックス)のリンクは、CSSで細工をして領域を広げない限り、文字の部分にしか反応しない(右例示の拡大前)。

拡大後の領域にマウスを重ねると、文字以外の全体の領域が選択されるようになる。 このようにすることによって、ボタンとしての操作感が格段に向上する。

html

css

※ ポイントは以下の3点です。

1)11行目、15行目:高さを確保する場合、paddingでは全体が選択出来ません。line:heightを使って下さい。

2)14行目:ul.menu_after a {display:block;} にするのが、最大のポイントです。

3)16行目:後は、マウスを重ねたときの背景色設定です。