- ベストアンサー
CSS入門で仕事にすぐ使える参考書またはサイトを教えて下さい！
仕事復帰したはいいのですが、CSSレイアウトに苦戦しております。 いろいろ本を買ってみたものの、あまりいい参考書がみつかりません。 やたら<div>でclassやidをしすぎるのも良くないと聞きます。シンプルで書き込みすぎないのがいいとも。分かりやすくシンプルな記述スタイルの参考書はご存じないでしょうか？サイトでも構いません。よろしくお願いします！
- ayajone
- お礼率50% (8/16)
- その他（ITシステム運用・管理）
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
ご質問の内容は、CSSについて知りたいというよりも、どういったシーンでCSSを使うのが有効か、という事を仰っているように見えます。 ご存じの事とも思いますが、divばかり多様する事を嫌うタイプの人々もいれば、その逆もまた然りです。 回答にはなっていませんが、ある程度の期間は自分の思うように作ってみて、その中で自分なりの方法を模索するのが良いかと思います。 参考までに２つサイトを紹介します。 それから、CSSなどの情報を探す際には、googleなどの検索エンジンで「CSS デザイン」「CSS サンプル」「CSS サイドメニュー」などが参考になるかもしれません。
関連するQ&A
- CSSについて
はじめまして、今日の質問内容は、サイト制作に使うCSSについてです。 あるサイトのコードを見ていてどうしてもわからない部分がありまして、ご質問させていただきました。 まずhtml部分で <html> (略） <body> <div id="itemCanvas"> <div class="item"> (略） </div> </div> という風にdiv itemCanvasブロックの中にdiv itemブロックを作ります。その後、CSS部分で CSS部分 #itemCanvas .item >*{ display:block; } という記述がでてきます。 この >* という意味がわかりません。 どなたか詳しい方で存知の方はいないでしょうか？よろしくお願いします。
- ベストアンサー
- CSS
- ＣＳＳで、ＩＤとＣＬＡＳＳを同時に設定することは可能ですか？
<div ID="main" CLASS="sub"></div>のように スタイルシートで、IDにメインのスタイル CLASSにサブのスタイルを設定してみて、 とりあえず、firefox、IE6、で確認してみたところ、うまく動きました。 しかし、グーグルで”ＩＤ ＣＬＡＳＳ 同時”等で検索してみても、 同時に使えることが解説されたサイトが大変少なく、 果たして、同時使いは、CSSの構文違反にならないのか不安になり 質問させていただきました。 <div ID="main" CLASS="sub"></div>のようなセレクタ同時使いは、 やっても大丈夫なものなのでしょうか？ サポートされていないブラウザがあったりすることはないのでしょうか？
- ベストアンサー
- HTML
- DreamweaverでのCSS操作
CSSの勉強をしているのですが、 他サイトのCSSを見ていると <ul id="navi">との記述があるのですが、 Dreamweaverでどのように操作すればこのような記述ができるのでしょうか？ 私の操作方法では、 タグセレクタで<ul>を選択 <div>の挿入 新規CSSルール作成 の流れなので、 <div id="navi"> <ul> </ul> </div> となってしまい、全体を見ると<div>だらけになってしまいます。 先にCSSルールで"navi"をクラスで作成して、 プロパティインスペクタから適用すると <ul class="navi"> とはできるのですが…。 勉強のために見る他サイトのCSSは h1#○○ や dl#○○ と言う記述を沢山見かけるし、 CSSを見た時に分かりやすいなと思います。 学校の先生はCSSを手打ちなんてしないよ。 ミスの元だし…と言われていましたので、 手打ちをせずに出来る方法が知りたいです。 それとも、後でCSSを打ち変えてるだけなのでしょうか？ 解答よろしくお願い致します。 また、分かりにくい説明ですみません。
- ベストアンサー
- HTML
- ホームページのCSSについて
ホームページのCSSについて教えてください。IDとCLASSとDIVについて 理解できないものですから、分かりやすく教えていただけませんか？ID,CLASS,DIVの理論は理解できるのですが、実際の使い方・・・特にIDとCLASSが分かりません・・・・
- ベストアンサー
- その他(ソフトウェア)
- ＣＳＳについて教えてください。ｉｄ，ｃｌａｓｓ
<body> <div class="style1" id="header"> <div id="logo"><img src="images/banner.gif" alt="見本1"/></div> <ul id="globalNav"> <li><a href="index.html">見本2</a></li> </ul> </div> <div id="contentWrapper"> <div id="content"> <div id="primary"> ※参考書に上記の様な書き出し記述があるのですが、1.まず素人考えでコンテナの様な土台となるボックスはないと考えていいですか？ 2.ｉｄがｄｉｖに包含されいくつも出てきますが，ｉｄは一つしか使用できないため慎重にって事は無いのですか？ 固有を確定するために便利なのですか？ 3.div classのあとｉｄが使われている様に思うのですが、ｃｌａｓｓにもｉｄは使えますか？？ 的外れですみません
- ベストアンサー
- レンタルサーバ・ASP
- CSSで高さ100％のレイアウト
テーブルを使用せずCSSでのレイアウトなのですが フッター位置をブラウザの一番下にマージン無しで指定したいのですが出来ません。 テーブルでは <table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0"> <tr> <td valign="top">内容</td> </tr> <tr> <td valign="bottom">フッター</td> </tr> </table> というように指定していたのですが CSSでのレイアウトはHTMLを <div id="container"> <div class="content">内容</div> <div id="footer">フッター</div> </div> .CSS では #container { height: 100%; } は無効なのでしょうか？ 他のやり方でもフッターをブラウザの一番下にマージン無しでレイアウトできる方法があったら教えて下さい。
- ベストアンサー
- CSS
- CSS : IEとFirefoxの表示差異を改善したい
grandswellと申します。 よろしくお願いいたします。 サンプルをIE、Firefoxそれぞれで見ていただけると わかっていただけると思うのですが、Firefox側が 意図した通りのレイアウトになっていません。 サンプルをIEで表示したレイアウトを Firefoxでも同じCSSで実現するにはどのような 工夫が必要でしょうか。 ぜひご教示くださいますよう、お願いいたします。 以下、サンプルのCSSとHTMLとなります。 *cssサンプル(style2.css) ---------- div.main { border-style : dashed; width : 100%; } div.main div.contents{ border-style : dashed; width : 75%; float : left; } div.contents div.contentsmain{ border-style : dashed; width : 100%; } div.contentsmain div.sidebar{ border-style : solid; float : left; width : 32%; } div.contentsmain div.entry{ border-style : solid; float : right; width : 66%; } div.main div.subspace { border-style : dashed; float : right; width : 23%; } div.footer { border-style : dashed; } ---------- *htmlサンプル ---------- <html> <head> <meta http-equiv="Content-Style-Type" content="text/css"> <link rel="stylesheet" href="./style2.css" type="text/css"> </head> <body> <div class="main"> <p>main</p> <div class="contents"> <p>contents</p> <div class="contentsmain"> <p>contentsmain</p> <div class="sidebar"> <p>sidebar</p> </div> <div class="entry"> <p>entry</p> </div> </div> </div> <div class="subspace"> <p>subspace</p> </div> </div> <div class="footer"> <p>footer</p> </div> <body> </html> ----------
- ベストアンサー
- CSS
- IEにおいて、CSSの記述順番によって表示が異なる？！
CSSの外部ファイルを読み込んで、スタイルを効かせているのですが、 ブラウザIEだとスタイルの書き順によってスタイルが効いたり効かなかったりします。 例えば、 <html> <head> <meta http-equiv="Content-Style-Type" content="text/css"> <link rel="stylesheet" type="text/css" href="http://sample.com/style.css"/> </head> <body> <div id="style0"> <!--style0の始まり--> <div id="style1"><p>■■■</p></div> <p id="style2">■■■</p> <ul class="style3"> <li id="style4">■■■</li> <li id="style4">■■■</li> </ul> </div> <!--style0の終わり--> </body> </html> というHTMLにおけるCSSの書き順は、 #style0{ ▲▲▲ } #style1{ ▲▲▲ } #style2{ ▲▲▲ } .style3{ ▲▲▲ } #style4{ ▲▲▲ } の様に、HTMLファイル内でスタイルを指定した順に（スタイルの登場順に）、CSSファイル内ではスタイルを記述しきゃならないのでしょうか？ もっとも、登場順に指定した方が良いかどうかも、私には分かっていません。ただ言えるのは、IEにおいて、書き順によって表示に違いが生じるということだけです。 なお、私が知りたいことは、 ・こういう現象が起こることは一般的にあることなのかどうか ・この現象の発生メカニズム ・IEにおけるCSSの正しい記述法（記述順番） 以上３点です。 ちなみに、FireFoxやOperaでは、順不同で問題なさそうです。 くどくなりますが、IEで問題が生じる場合というのは、 例えば、上の例で言えば、 スタイルの書き順を、 style3{ ▲▲▲ } style2{ ▲▲▲ } style4{ ▲▲▲ } のように順番を変えて記述した場合です。 この問題についてネット上で色々と調べたのですが、解決に至りませんでした。 リンクのスタイルなど、書き順が重要なものがあるということは知っているのですが、本件とはまた別の話だと思っています。 質問の記載方法に不備がありましたら、適宜補足をさせて頂きます。 以上、どなたか回答をよろしくお願い致します。
- 締切済み
- HTML
- 外部ＣＳＳからクラスを呼び出すとき
ＣＳＳスタイルシート初心者です。 ネットショップを運営しているのですが、ほぼ同じレイアウトの商品紹介ページが多数あるため、外部ＣＳＳファイルを読み込ませて統一したいと思っています。 Ｈ１などのＨＴＭＬタグはちゃんと外部ファイルで設定して読み込ませることができるのですが・・・、 .text01{ text-align : left; margin-left : 10px; font-size : 14px; } 上記のように自分が作ったクラスをＨＴＭＬソースの中でどのように呼び出してよいのかいまいちわかりません。 本を読んでいると埋め込み方は、<div class="text01">・・・</div>のような感じで<div>でくくって記述するように書いてあるのですが、外部ＣＳＳの場合もこのような形で記述してよいのでしょうか？ ホームページビルダーを使っていて、上記のように指定すると、ＣＳＳがテキストに適用はされるのですが、なぜか上記で表示した部分が赤色でエラーになっていることを示してしまいます。 何か文法的に誤っている所があるのでしょうか？ どなたか是非アドバイスを宜しくお願い致します。
- ベストアンサー
- その他（プログラミング・開発）
お礼
ありがとうございました！とても参考になりそうなサイトですね。勉強させて頂きたいと思います。
補足
仕事で使うに適しているCSSがいいです。結構CSSは記述する人によって癖が出ますよね。誰が見ても分かりやすいCSSレイアウトというのがあれば教えて頂きたいです。