- ベストアンサー
CSSを使用したページレイアウト
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
このサイトはなかなか刺激してくれますよ。 http://www.csszengarden.com/tr/japanese/ 様々なデザイナーが同じHTMLにCSSでレイアウトしています。
その他の回答 (3)
tableのような段組(テーブルレイアウト)をCSSで代替する場合は、一般的にfloatを使います。 floatの説明は下のサイトが参考になります。 http://www.motchie.com/article/multicolumn.html http://members.jcom.home.ne.jp/pctips/www/faq/Dangumi.html http://dhr.at.infoseek.co.jp/simple_style21.htm#float 補足ですが HTML+CSSのみでページを構成する場合、XHTMLの記述方法・構成が参考になると思います。 http://www.tg.rim.or.jp/~hexane/ach/lbxh/
お礼
ありがとうございます。 どのページもとても参考になりました。 XHTMLについても勉強してみようと思います。
- mfu
- ベストアンサー率33% (1/3)
私も以前は質問者様と同じような状態でした。とりあえず「スタイルシート スタンダード・デザインガイド（毎日コミュニケーションズ）」本を一冊買って、見よう見まねで1ページ作ってみたら大まかな構成は理解できました。 （参考URLにアマゾンのURLを貼っておきます） この本は、CSSの考え方から順番に説明してくれているので理解しやすかったです。ですが、実際に業務でCSS組みを始めると、ブラウザによってバグがボロボロ出てきます。 もう一つ、参考URLに貼ったサイトはバグ回避のコツや裏技などが載っていますので役に立ちました。 ちなみに、CSS組みのデバッグはFirefoxで行うと良いですよ。CSSの解釈に関しては一番標準規格に沿っています。
お礼
ありがとうございます。 本屋さんで探してみようと思います。
- AirRock_Fan
- ベストアンサー率48% (42/86)
私が使っているのは「スタイルシートサンプルブック」という本です。 ISBN4-88337-405-X 1900円(税別) 全ページカラーでブラウザごとの特徴とサンプルコードも掲載されていますので、比較的理解しやすいですよ。 参考URLにアマゾンへのリンクを貼っておきます。 ==================================== スタイルシートは、いろいろなものにクラス付けできるので実際に使い出すとおもしろいですよ。 画像にクラス付けしたり、テーブルにクラスつけてみたり。。。 いろいろやってみると楽しいですよ。
お礼
ありがとうございます。本屋で探してみようと思います。 検索してみたら初心者向けの評判の良い本ですね。勉強になりそうです。 その本にはclassやidの使用法等ではなく。CSSを使用したページレイアウトについて書かれていますでしょうか？ ちなみに、以下のサイトのような事をしたいと思っています。 今までずっとtableを使用したゴテゴテのサイトしか作った事がなかったので、これを期にCSSに切り替えてみようと思いました。 http://www.geocities.co.jp/SiliconValley/4466/
関連するQ&A
- ＣＳＳレイアウトの中にテーブルのような使い方でＣＳＳを入れ子にする方法で質問です。
テーブルを一切つかわないでサイトを作成したいと思っていて、 現在ＣＳＳで２カラムのレイアウトをしています。 困っているのが、 ページの下部に”前のページ ＨＯＭＥ 後ろのページ” という風に横に３つならべたいと思っています。 テーブルであれば簡単にできることなのですが、 それをＣＳＳでできないかと思っております。 そこで外部ＣＳＳに .table{ width: 10px ; background-color: #ffffff; margin: 5px; border: solid 0px ; padding: 0.5em; } と記述し、ＨＴＭＬ部分に <p><span class="table">前のページ</span> <span class="table">ＨＯＭＥ</span> <span class="table">後ろのページ</span></p> という風に記述してみたのですが、 文字を打っていくとどんどんよこに伸びて、横幅を指定している意味がないような感じです。 私のようなＣＳＳの使い方をしたい場合はどのように記述すればよろしいのでしょうか？
- ベストアンサー
- 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
- htmlでテーブルタグを使わずにCSSのみでテーブルを作成する方法を教
htmlでテーブルタグを使わずにCSSのみでテーブルを作成する方法を教えて下さい。 現在私はブログを所有しており、ブログ内の記事の中に小さな1.2行程度のテーブルを入れたいと思っています。 記事の中に直接テーブルのタグを書き込むと、ものすごい量のタグになってしまい、検索エンジンの読み込みに不利ですので、CSSにて記事の中用のテーブルタグを作り、それを<div class="">～略～</div>の形で省略して記事の中で使用していきたいと思います。 全くの初心者の為、質問が上手にできていないかと思いますので、具体的には下記のサイトを拝見して頂くと幸いです。 http://www.operationcheck.com/seo/seomeasure6.html サイト内で書かれている、中程の「じゃあ、なぜCSSが必要なのか？」以降が、私の質問したい内容です。しかし、このサイトでは、CSSの具体的な使用方法については、書籍の紹介になっていました。 その上記サイトに記載されております、「CSSだけで書いた方」（グレーのテーブルの中の文です）は、 『<div class="box2"> <p>普通に見る限りでは、大した違いを感じることは出来ません。<br> ちなみに、こちらはHTMLを使わずCSSのみを使って作成しました。 </p> </div>』 <div class="box2">～略～</div>という風に、<table>のタグを使わずに、divのみで構成されています。 このように、記事の中でテーブルを省略し、divのみで、反映させるCSSの記載方法（タグなど）を教えて下さい。 また、具体的に、CSSのどこに、そのテーブルタグを書きこんでいけばよろしいのでしょうか。 例えば、/* エントリー部分の設定 */ もしくは、/* 各部のテキスト設定 */ の中でしょうか？
- ベストアンサー
- HTML
- ＣＳＳでのレイアウトについて
私は現在サイトを開設しているのですが、一から独学でHTMLを学んで分からない事があれば調べて作成してきました。 使用しているのはHTML、CSS、JavaSceript、SSIです。 見た目は自信あります。ただある程度知識がある方がソースを見たら”全然分かってないだろうな”というのがすぐにバレるぐらい酷いです。 調べて分かった事は積極的に取り入れてきました。 以前はHTMLのみで作成していたんですが、外部ファイルを使いJavaScriptやCSSをまとめています。以前に比べだいぶ簡潔なソースになり、汎用性も上がったと自負しています。 ただレイアウトは依然tableレイアウトです。 その為レイアウトをいじろうと思うと全てのファイルを修正しなければなりません。ファイル数は100を超えてます。 そこで詳しい方にお聞きしたいのですが、 ・tableレイアウトからCSSでのレイアウトに移行するのは難しい事ですか？ レイアウトって聞くだけで避けてきたので、いざ移行してみて今まで作成してきたデザインが崩れるのではないかと不安になってきます。 ・下記のサイトのようなレイアウトを最近結構見かけます。 http://www.yamaga-fc.com/ 私もいづれこのようなレイアウトにしたいのですが、これは何というレイアウトでしょうか？ 検索してもこのようなレイアウトの作り方が掲載されてるサイトが見つからなくて困ってます。 ヘッダーとフッターが100％。真ん中が80％ぐらいのレイアウト。 ご存知の方いらっしゃいましたらご教示ください。 よろしくお願いします。
- ベストアンサー
- CSS
- 一部ページのtableのボーダーをCSSで消す方法。
一部ページのtableのボーダーをCSSで消す方法。 あるページのtableだけボーダーを消したいと思い、 そのページの<table></table> を <div class="item"></div> で囲い以下のようにCSS側に書き込みました。 .item table,th,td{ border:none } が、この命令が<div class="item"></div>で囲まれていない全ページに適応されてしまい、全てのtable要素のボーダーが消えてしまいます。。 所定のページのtable要素のボーダーのみの消し方を教えて頂けないでしょうか？ CSS側の記述する順番にも影響があるのでしょうか？ 宜しくお願い致します。
- ベストアンサー
- HTML
- CSSでのレイアウトについて
現在、table、flameタグを使わず、CSSだけでレイアウトを組んでいるのですが、その際、BOX同士が離れてしまってどうしてもBOX同士をくっつけれません。。Illustratorで作った画像をスライスしてそれをつなげたいのですが。。。marginも0にしてるのに、どうもBoxの底辺にわずかな隙間ができてしまうのです。。 css body { width:800px; margin:0; padding:0; border:0; } #outline { width:800px; margin:0; padding:0; border:0; } <!-- endheader --> <div class="center-free1"> <div class="main"> メインスペース </div> <div class="free1"> </div> <br class="clear"> </div> <div class="free2"> 灰色back </div> <div class="clear"> </div> <div class="under"> </div> </div> </BODY> 一応ソースも載せてみました。。周りでcssを使ってる人がいないので、誰にも聞けず、途方に暮れています。。どうかご教授願います。。
- ベストアンサー
- CSS
- CSSの複数使用について、（一つのページで）
CSSの複数使用について、（一つのページで） <head> <META http-equiv="Content-Style-Type" content="text/css"> <link rel="stylesheet" href="./table2.css" type="text/css"> <link rel="stylesheet" href="./table.css" type="text/css"> </head> <body> <div style='width:35%'> <span class="roundcorner_box"> <span class="roundcorner_box1"><span></span></span> <span class="roundcorner_box2"><span></span></span> <span class="roundcorner_box3"></span> <span class="roundcorner_box4"></span> <span class="roundcorner_box5"></span> </span> <div class="roundcorner_box_content"> ここに文字 </div> <span class="roundcorner_box"> <span class="roundcorner_box5"></span> <span class="roundcorner_box4"></span> <span class="roundcorner_box3"></span> <span class="roundcorner_box2"><span></span></span> <span class="roundcorner_box1"><span></span></span> </span> </div> このようなソースで、（外部ファイルは略）として、外部ファイルと「table」と「table2」にしたときに、 二つ指定する方法が分かりません。どうしたらいいですか？ 外部ファイルのtableとtable2の内容は別になっている。
- ベストアンサー
- HTML
- CSSでのページ作成＜こまかなレイアウト＞
CSSを勉強しながらページ作成をしています。 今まではテーブルをつかって組立てをしていました。 初歩的な質問かもしれないのですが、どのたかお教えください。 テーブルを使って細かいレイアウトを設定する際には、<table>を入れ子にして、spacer.gifで空白の部分を構成しますが、 CSSを使っての場合は、どのような方法がありますか？マージンなどを駆使するのでしょうか？ それとも、spacer.gifを使うのでしょうか？ それと、<table>の入れ子のように、<div>も入れ子にしていいのですか？あまり多用しない方がいいですよね？ 本を見たのですが、そのような実践上の細かい説明が載っていなく、困っています。 慣れている方には初歩的な質問で大変申し訳ないのですが、やさしく教えて頂けると有難いたいです。 どうぞ宜しくお願い致します。
- 締切済み
- ホームページ作成ソフト
- tableレイアウトについて。
自分は ＨＴＭＬ ， ＣＳＳを勉強して、ホームページをつくっていたのですが、いざ、就職をしてみると、ホームページのソースが自分が今まで、勉強してきた ＨＴＭＬ， ＣＳＳは使われておらず、tableレイアウトでつくったホームページを沢山、目にします。特に楽天やＹａｈｏｏなどＥＣサイトなどで多くみられます。自分は ＨＴＭＬ， ＣＳＳをつかって <div></div>でレイアウトをするのが正しいとおもいやってきたのですが、このさき、tableレイアウトで作るやり方も勉強するべきでしょうか？
- ベストアンサー
- HTML
- 「css」 と 「div」の使い方について
例えば、「CSS」でページ全体の要素をクラス「contents」で設定した場合、 HTML では次のどちらの記述が正しいのでしょうか？ １．<body class="contents">・・・ </body> ２．<body> <div="contents">・・・ </div> </body>
- ベストアンサー
- その他（インターネット・Webサービス）
お礼
ありがとうございます。 素敵なサイトですね～ デザインも含め、色々と勉強になりそうです。