カテゴリー
SugiBlog ホームページ制作・システム開発|大阪

CSS nth-childセレクタ

n番目や偶数・奇数の要素にスタイルシートを適用させたいとき、nth-childセレクタを使用します。
ここでは、テーブルを例にやってみます。

偶数行の背景色を指定する

table tr:nth-child(even)
{
    background: #f5f5f5;
}

奇数行の背景色を指定する

table tr:nth-child(odd)
{
	background: #cbcbcb;
}

続きを読む…»

この記事がお役に立ちましたらシェアお願いします

1,154 views

改行方法の指定【word-break】

文章の改行方法を指定したいとき、スタイルシートのword-breakプロパティを設定します。
特にURLやソースコードなど、途中で改行されずにボックスからはみ出てしまうことがあります。
※これまではIEのみの対応だったようですが、CSS3では標準採用されているようです。

div.sample
{
    word-break: break-all;
}

続きを読む…»

この記事がお役に立ちましたらシェアお願いします

1,109 views

PNG画像の透過表示

以下のフィルター(CSS)をimg要素に適用させる

filter: chroma(color=#000000);

もしくは

<div style="width:100%;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image, src='logo.png');"></div>

この場合、CSSでレイヤーとして表示しないといけない。

この記事がお役に立ちましたらシェアお願いします

785 views

floatリストナビゲーション

画像を使用したナビゲーションを作成する場合に、画像下部の余白を無くすには

ul
{
   list-style: none;
   margin: 0px;
   padding: 0px;
}
ul li
{
   display: inline;
   float: left; /* 横並びにする場合 */
}
ul li a, ul li img
{
   display: block;
}

この記事がお役に立ちましたらシェアお願いします

804 views

hr

IE,Safari,Opera,Firefoxでボーダーをスリムにする方法
ボーダーは0pxにし、高さを1pxに。
色・背景色を指定する。

hr
{
   border: 0px;
   height: 1px;
   color: #cbcbcb;
   background-color: #cbcbcb;
}

この記事がお役に立ちましたらシェアお願いします

819 views