- ベストアンサー
CSSを使用したページレイアウト
purplebossaの回答
このサイトはなかなか刺激してくれますよ。 http://www.csszengarden.com/tr/japanese/ 様々なデザイナーが同じHTMLにCSSでレイアウトしています。
関連する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サービス）
お礼
ありがとうございます。 素敵なサイトですね～ デザインも含め、色々と勉強になりそうです。