スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
このエントリーをはてなブックマークに追加

[CSS]リストタグの番号を丸数字にする(①、②、③...)

・HTML側
<ol class="MaruNumList">
<li><span>①</span>1つ目のリスト文章</li>
<li><span>②</span>2つ目のリスト文章</li>
<li><span>③</span>3つ目のリスト文章</li>
</ol>

・CSS側
ol.MaruNumList li {
position: relative;
list-style: none;
/*line-height: 1;*/
margin-bottom: 0em;
}
ol.MaruNumList li span {
position: absolute;
top: 0;
left: -1.5em;
}
* html ol.MaruNumList li span { top: -0em; } /* for win ie6 */
*:first-child+html ol.MaruNumList li span { top: -0em; } /* for win ie7 */



参考URL:olタグでカッコ数字や丸数字を使う
スポンサーサイト
このエントリーをはてなブックマークに追加

tag : css html ul ol リストタグ 番号

[css]コメントアウト

前後に半角スペースを入れるようにすることで確実にコメントアウトが可能となります。

/* コメント */
このエントリーをはてなブックマークに追加

tag : css コメントアウト

[css]floatで揃えた場合の中央揃え

floatでレイアウトした場合、以前紹介したような text-alignmargin の auto が利用できなくなります。
このため、別方法での中央ぞろえが必要となります。

以下は例です。










//一つ目のdivに対して、はみ出た部分を非表示にする
#main {
position: relative;
overflow: hidden;
}
//二つ目のdivに対して、左詰めにしてそこから親要素(#main)の半分の幅を移動
#main>div {
float: left;
position: relative;
left: 50%;
}
//三つ目のdivに対して、左詰めしてそこから親要素(#main>div)の半分の幅を戻る
#main>div>div {
width: 100%;
float: left;
position: relative;
left: -50%;
}


おぼろげに例文をかいているので合っているかは不明です。
詳しくは参考URLを参照してください。


参考URL:CSSでfloatした要素群を中央揃えにする
参考URL: [とほほのスタイルシート入門(セレクタ)]E > F { ... }
このエントリーをはてなブックマークに追加

[css]テキストの中央揃え


こんにちわ

//横幅を指定し、中央へ配置
.label {
width:100%;
text-align: center;
}


中の要素がテキストの場合にはこちらを利用し、
中の要素が要素である場合にはmarginで左右を詰める方法を利用します。
このエントリーをはてなブックマークに追加

tag : css テキスト 中央 そろえ text-align center

[css]画像の繰り返し表示を禁止

cssで以下のように指定します。

//リピートしない
div {
background-image:url("test.png");
background-repeat:no-repeat;
}



参考URL:background-repeat  背景画像の繰り返し方法を指定する
このエントリーをはてなブックマークに追加

tag : css background image 背景 画像 繰り返し 禁止 止める やめる

Translation


上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。
プロフィール

チーズくん

Author:チーズくん
個人的メモをただ羅列しています。
twitter:@cheese1038

バロメーター
最新記事
最新コメント
最新トラックバック
月別アーカイブ
カテゴリ
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。