カテゴリ：初心者向け 2009年6月12日 10:44
とりあえずよく分からないけど、コンテンツを真ん中にしたい！ とか、メニューリストを横並びにしたい！ という要望を、コピペのみで使えるように HTML と CSS をまとめてみました。n
なので、細かい説明などは今回はしていません。使い方とか質問がありましたら 問い合わせフォーム からご連絡ください。（これを追加して！ という要望でも構いません）n
サンプルソース上部にある "view plain" をクリックするとコピペしやすい形でソースが表示されます。書かれている width や height などはサンプルなので適宜お好みのサイズに変更して使用してください。n
/* ※ */の部分は色や幅、高さなので使いたいサイズなどに変更してください。n
また、掲載されている HTML や CSS の ID や class 名は導入したいサイトで使われているものに変更するか、新しく制作する場合は下記のブログの ID 名 や class 名の一覧を参考にしてみてください。nもう、class名やid名で悩まないんだからっ！！ | CSS-HappyLife
▼EntryMore▼
コンテンツ全体をセンタリングさせる CSS です。
モニタサイズに依存せず、常にコンテンツが真ん中に表示されるようになります。n
企業サイトなどで、ページ上部に横に並ぶグローバルナビゲーション（メニュー）があると思います。それを実現する CSS です。n
通常、<a href="URL">リンク文字</a>でリンクを作成すると、文字の部分だけしかクリックすることができません。
しかし、これをブロック要素に変換することでクリックできるエリア（クリッカブルエリア）を指定した高さ、幅まで拡大することができます。n
ブログなどでよく見かける 2 カラムレイアウト（このブログのようなのです）の CSS です。
#mainContents と #subContents の width の合計は、#contents の width と同じになるように注意してください。
ブログなどでよく見かける 3 カラムレイアウトの CSS です。
#mainContents と #subContents01, #subContents02 の width の合計は、#container の width と同じになるように注意してください。
合わせて読むと役に立つかもなエントリー
この記事のカテゴリー一覧を見る⇒初心者向け
トラックバックURL
カテゴリー
最近のエントリー
©2009-2011 CSS-EBLOG All Rights Reserved
コメント
1 - さちこさん さん
web独学でかじり始めて一ヶ月。nCSSの参考書2冊読んでもできなかったことが、できるようになったし理解できました。おかげさまです。nありがとうございます！n
2009年6月20日 01:11
2 - えど
さん
>>1 - さちこさんnコメントありがとうございます！n参考になったようでうれしいです(*'-')最初はとにかく、なにがどうなってるの？nっていうことが多いですよね。nまずは実際にやってみる、というのがn理解する上で大事だと思うのでがんばってください(*'-')
2009年6月20日 08:19
3 - たっちゃん さん
#contents:after
の意味がわかりません。
他のサイトを見てもわからず、
どういう理由で使われているのか、
さ??パリわかりません。
#contents:after {
#content:".";
display:block;
を使うと、書かれていただいたのですが、
意味がわかりませんでした。
#contents:after {
#content:".";
これはどういう時に使うのでしょうか？
教えていただけませんでしょうか？
よろしくお願いします。
よろしくお願いします
2010年6月 2日 13:57
4 - えど
さん
>>たっちゃんさん
コメントありがとうございます。
#contents:afterですが、「after擬似要素」で検索してみてください。
色々と情報が出てくると思います。
簡単に説明すると、擬似要素、という名前からわかる通り、
「擬似的に要素を生成するもの」
となります。
そして続く「content: "hoge";」という部分で、その要素内のコンテンツ（テキストなど）を
指定しているわけです。（hogeは任意のテキスト）
ただ今回の場合は「clearfix」というテクニックのために使用しているものになります。
こちらについては「clearfix」で検索してみるとより詳しい解説が見つかるかと思います。
2010年6月20日 23:53