• ベストアンサー

CSSレイアウトのTIPSやテクニック本（辞典ではない）探してます

こんにちは。 スタイルシート辞典 アンク著(所持) XP SP2 CSSレイアウトのTIPSやテクニック本（辞典ではない）探してます。 Web Designingなのどに載っているCSSの使い方。たとえば、x,y,(0,0)の位置から、width=100,height=100のところまで、aとbという画像を重ねて表示するといったような、TIPSやテクニック本を探しています。 CSS辞典は持っているのですが、テクニック集が載っている本です。 よろしくお願い致します。

  • CSS
  • 回答数2
  • ありがとう数5

質問者が選んだベストアンサー

  • ベストアンサー
  • LAIT
  • ベストアンサー率32% (25/78)
回答No.1

http://www.openspc2.org/reibun/css/index.html TIPS多いですよ。

参考URL：
http://www.openspc2.org/reibun/css/index.html
ycqxs765
質問者

お礼

TIPSおおいですね。 試してみます。 ありがとうございます。

全文を見る
すると、全ての回答が全文表示されます。

その他の回答 (1)

  • DM9
  • ベストアンサー率37% (43/115)
回答No.2

こんにちわ。私は次の2冊を買いました。 HTML+CSS Webデザインスタイルガイド 毎日コミュニケーションズ スタイルシートビジュアルサンプル辞典 ソーテック社 前者の方はだいぶ前に買ったヤツなんでちょと古いかもです。ソーテックの方はさいきん買いました。たぶんこっちのほうがいいかも。cssに限らず、技術本を買うときは奥付を見て新しい書物かどうか確認するとよいですよ。わかりやすそうにみえて、かってみたら１年前の本で、いまのversionと仕様がちがうじゃんかーと泣いた覚えがあります。不注意な私が悪いんですけど。

ycqxs765
質問者

お礼

DM9 様 ありがとうございます。 早速本屋見に行ってみてみます。 初版と言う事ですね?わかりました、気をつけます。バージョンが古かったら、使い物にならないときがありますよね。 ありがとうございました。

全文を見る
すると、全ての回答が全文表示されます。
  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. CSS

関連するQ&A

  • CSSレイアウト

    CSSのレイアウトについてお聞きしたいのですが、 レイアウトを決めるときwidthとheightだけを指定して 作ったボックスを重ねていく感じでレイアウトをしているですが 画面最大化にしておかないとレイアウトが崩れてしまいます。 やはりCSSでのレイアウトの場合positionで絶対値を一つ一つ 指定していかなければなれないのでしょうか？ またCSSレイアウトのコツのようなものがありましたら教えて下さい どうぞよろしくお願いいたします。

  • CSS：区画のレイアウト1

    現在、CSSの練習中なんですが、 http://kokoro.es.land.to/HTML/Rensyuu.html 上記のURLで、最終的にURL内の下の図（CSSによる区画のレイアウト）のようなレイアウトにしたいのですが、Kukaku4_3（class名、色：red）のところで画面のあるとおり、Kukaku4_2（class名、色：navy）から下の方に範囲が伸びてしまい、うまくいきません。ほかにもいろいろ試したのですが、URL内の下の図（CSSによる区画のレイアウト）のようにするにはどうすればよいでしょうか？ 回答よろしくお願いします。 div { float: left;} div.Kukaku1 { background-color:blue; width: 900px; height: 179px } div.Kukaku2_1 { background-color:green; width: 300px; height: 20px } div.Kukaku2_2 { background-color:aqua; width: 300px; height: 20px } div.Kukaku2_3 { background-color:gray; width: 300px; height: 20px } div.Kukaku3_1 { background-color: black; width: 250px; height: 300px; } div.Kukaku3_2 { background-color: fuchsia; width: 650px; height: 150px } div.Kukaku3_3 { background-color: lime; width: 650px; height: 150px } div.Kukaku4_1 { background-color: maroon; width: 500px; height: 80px } div.Kukaku4_2 { background-color: navy; width: 500px; height: 70px } div.Kukaku4_3 { background-color: red; width: 400px; height: 150px }

    • ベストアンサー
    • HTML
  • cssの使い方について

    cssの使い方について imgやswfのheightやwidthはcssで設定することはできないのでしょうか？ div classで囲ってcssでwidthとheightを設定しましたが、レイアウトの前面のように浮き上がるだけでサイズ変更できませんでした。 その他の文字やボックスはcssでwidthやheightの設定ができるのに、なぜimgなどはできないのでしょうか？できるものとできないものが他にもたすうあるのでしょうか？

    • ベストアンサー
    • HTML
  • 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
  • このようなレイアウトをＣＳＳで記述すると・・・？

    恐縮ですが、単刀直入に質問させてください。 図のようなデザインを作りたいのですが、レイアウトと幅に関する部分だけＣＳＳで書いて頂けませんか？ 僕自身勉強して書いてみたのですが、ブラウザによって幅が微妙にズレる事があるようです。 出来れば、そうならないよう記述して頂けると助かります。 どうかよろしくお願いします。 （もちろん、補足要求にもお答えさせて頂きます） ：(id名):幅 高さの順で all :width 740px height 560px header :width 720px height 90px news :width 720px height 30px menu :width 150px height 320px main :width 555px height 370px footer :width 720px height 20px allの中にある全ての枠組み（header,news,menu,main,footer）はそれぞれ他の枠組みと10pxだけ空いているようにしたいです。

    • ベストアンサー
    • CSS
  • CSSのレイアウト指定だけが無効に。

    CSSでデザインを始めたばかりの初心者です。 Mac環境で制作しておりますが、WIN環境に限り、レイアウト指定がうまく反映されません。（MacではIEとsafariで確認済み。） というか、レイアウトの記述部分だけ、無効になっているような印象です。 文字・リンク・imageの指定はきちんと反映されています。 現象が起きているページは下記です。 http://www.artbox-int.co.jp/seek/foragent/illust_a.html CSSの問題の部分です。 /*レイアウト*/ .head { border-width:0px; } .mainhead { width:200px; height:45px; margin-top:15px; margin-left:15px; border-width:0px; } .menu { width:250px; height:45px; margin-top:-42px; margin-left:230px; border-width:0px; } .select { margin-top:-25px; margin-left:35px; border-width:0px; } .table { margin-left:15px; margin-top:15px; width:480px; height:180px; border-color:#D9D9D9; border-width:1px; border-left-width:5px; border-style:solid; background-color:#FFFFFF; } .image { margin-top:15px; margin-left:15px; border-width:0px; } .Artistname { margin-top:-148px; margin-left:180px; width:200px; height:45px; border-width:0px; } .history { margin-top:-31px; margin-left:180px; width:280px; height:100px; border-width:0px; overflow:auto; } .other { margin-left:180px; width:280px; height:30px; border-width:0px; } どうぞよろしくご教授お願い致します。

    • ベストアンサー
    • CSS
  • CSSのレイアウトについて

    CSSのレイアウトをダウンロードしました。 初心者ながら調べてやっていたのですが、2点ほど分からない点があります。 ・ヘッダー、フッター含め全ての幅を画面いっぱいにしたい。 widthを100%にしてみたのですが、レイアウトが崩れるだけで画面幅いっぱいにはなりませんでした。 ・3カラムの真ん中を固定幅900pxにしたい。 ご存知の方いらっしゃいましたらご教示ください。よろしくお願いします。 以下がCSSのソースです。 * { padding: 0; margin: 0; } body { font-family: Arial, Helvetica, sans-serif; font-size: 13px; } #wrapper { width: 922px; } #header { color: #333; width: 900px; float: left; padding: 10px; height: 200px; background: #E7DBD5; } #navigation { float: left; width: 900px; color: #333; padding: 10px; margin: 0px 0px 0px 0px; background: #BD9C8C; } #leftcolumn { color: #333; background: #E7DBD5; margin: 0px 0px 0px 0px; padding: 10px; height: 350px; width: 200px; float: left; } #content { float: left; color: #333; background: #F2F2E6; margin: 0px 0px 0px 0px; padding: 10px; height: 350px; width: 460px; display: inline; } #rightcolumn { color: #333; background: #E7DBD5; margin: 0px 0px 0px 0px; padding: 10px; height: 350px; width: 200px; float: left; } #footer { width: 900px; height: 200px; clear: both; color: #333; background: #BD9C8C; padding: 10px; }

    • 締切済み
    • CSS
  • CSSで作ったテンプレートがのレイアウトが崩れます

    はじめまして。 今、初心ながらにdreamweaverでサイトを作っています。 CSSスタイルを使用し、テンプレートを作成して作ってるのですが、サイトはよくある左にサイドのバーがあって、上にタイトルがあるようなレイアウトなんです。 そこでサイドに画像スペースはheightをautoにしているんですが、ある一定以上高さを大きくすると、画像よりしたのスペースが画像の右側に引っかかるように回り込んでしまいます。 しかし、実際にテンプーレートを適用したファイルを見てみると、レイアウトは崩れていません。 原因はおそらくですが、メインの右部分のコンテンツがテンプレートだとCSSスタイルを指定しているだけで、高さがないためだと思うのですが、これはこのままでも問題ないのでしょうか？ 初心な質問かとは思いますがどうかよろしくお願いします。

    • ベストアンサー
    • HTML
  • ブラウザによってCSSレイアウトが崩れる

    個人でサイトを運営しています。ビルダー等のソフトを使わず、ＨＴＭＬタグ打ちで作っています（独学です）。テーブルでページをレイアウトするのは好ましくないと言われているので、最近になってＣＳＳでレイアウトするようになりました。 普段ブラウザはＩＥ６を使用していて、一つ一つレイアウトを確認しながら作り上げたのです。しかし、Ｆｘを導入して確認してみると、レイアウトが無茶苦茶に崩れてしまいました。両方で崩れないように調整できたと思ったんですが、次にＩＥ７を導入して確認すると、また大きく崩れるようになってしまいました。これは単に自分のミスなのか（widthやheight、margin、paddingなどで間違いがある）、それともブラウザによって微妙なズレが生じるのは仕方のないことなのか、よくわかりません。どなたかご教授お願いします。

  • 助けてください。。　CSSのレイアウトについて。

    CSSのレイアウトについてのアドバイスをお願い出来ましたらと 思います。m(_ _)m 添付画像の様なレイアウトがしたく、いろいろやってみましたが、 何時間かかっても上手く行かなくて。。 A(画像）、（B ○の部分がテキストでリスト）、（C ○の部分が 画像を三段重ね）、D（画像）という様に、float: left;で配置して いき、 Bの○のテキストはリストで左頭揃えにしながら、 Bのブロックごとは右寄せで右にパディングで余白を取る。 Cの○の画像は左頭揃えにしながら三段重ね、 Cのブロックごとは左寄せでパディングはゼロにしたいと いう部分で上手く行かずに悩んでいます。。 元から書かれた物を直すという作業の上で、 戸惑っています。 自分では下記の様にやってみて途中やり直しを繰り返し して混乱して頭が止まってしまいました。。 よろしければ、アドバイスの方をお願い致します。m(_ _)m ☆　HTML <div id="header"> <!-- A--> <h1><img src="hogehoge.gif" alt="" width="175" height="64" /></h1> <!-- /A--> <p class="g_navi"><a href="@"><img src="hogehoge.gif" alt="" width="42" height="10" /></a><br> <a href="@"><img src="hogehoge.gif" alt="" width="42" height="10" /></a><br> <a href="@"><img src="hogehoge.gif" alt="" width="42" height="10" /></a> </p> <ul class="s_navi"> <li>テキスト</li> <li>テキスト</li> <li>テキスト</li> </ul> <!--D--> Dの部分は省略。 <!--/D--> </div> ☆CSS #header { margin: 0 10px 0; padding: 28px 0 0; width: 950px; height: 102px; position: relative; line-height: 1; } #header h1{ float: left; } #header .g_navi{ margin: 8px 0 0; padding: 0 32px 0 0; float: left; width: 270px; height: 70px; text-align: right; } #header .s_navi{ margin: 8px 0 0; padding: 0 0 0; float: left; width: 238px; height: 70px; line-height: 1; font-size: 1px; } #header .s_navi li{ margin: 0 0 10px; } -------　以下D部分は略　－－－－－－－－－

    • ベストアンサー
    • CSS

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する