- 締切済み
CSSでクラス内にクラスを横並びに配置したい
CSSでクラスを使用してレイアウトしているのですが、 クラス内に小さなクラスを二つ横並びに配置したいのですが改段落されてしまいます。 IDだと可能なのですがクラスではできません。 クラスにしたい理由は、同じdivタグを1ページに３０個以上使用したいためです。
- みんなの回答 （4）
- 専門家の回答
みんなの回答
- 牧野 結菜（@makino03）
- ベストアンサー率40% (4/10)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
- 神崎 渉瑠（@taloo）
- ベストアンサー率44% (1016/2281)
- outbrave
- ベストアンサー率60% (231/380)
関連するQ&A
- cssでテキストを内容ごとに３つ横並びにしたいのですが、floatなど
cssでテキストを内容ごとに３つ横並びにしたいのですが、floatなどではうまくいかずこまっています。 ２カラムのレイアウトにしたあとに、テキストを横並びに３つしてみたいというような感じです。 リストタグを使ってレイアウトするべきでしょうか？ この場合、<div>タグの中にIDを設定してもうまくいきません。 初心者なので、なにかよい方法があったら教えてください。 レイアウトのイメージは添付画像にしてあります。黒い四角のところがテキストのまとまりだと考えてください。
- ベストアンサー
- デザイナー・クリエイティブ職
- 横並びにするCSS
以下のdivタグ内のimgタグを横並びに表示するCSSは .container{ display:flex; } で合っていますか？ <body> <section class="container cf"> <div class="hoge"><img src="img1.jpg" alt=""></div> <div class="hoge"><img src="img2.jpg" alt=""></div> <div class="hoge"><img src="img3.jpg" alt=""></div> <div class="hoge"><img src="img4.jpg" alt=""></div> </section> </body>
- ベストアンサー
- CSS
- CSSで横並び
divタグ内のimgタグを横並びに表示するCSSは、 .container cf{ display:flex; } で合っていますか？ <body> <section class="container cf"> <div class="hoge"><img src="img1.jpg" alt=""></div> <div class="hoge"><img src="img2.jpg" alt=""></div> <div class="hoge"><img src="img3.jpg" alt=""></div> <div class="hoge"><img src="img4.jpg" alt=""></div> </section> </body>
- ベストアンサー
- CSS
- ナビゲーションを横並びにして真ん中配置にしたい
ナビゲーションをulタグを使って作り、横並びにしています。 さらにそれをブラウザの真ん中に配置したいのですが、真ん中になってくれません。 HTMLは以下のようにしています。 <div id="menu_top"> <ul> <li>Profile</li> <li>Information</li> <li>History</li> <li>Invitation</li> </ul> </div> CSSは以下のとおりです。 #menu_top{ margin:auto; width:90%; height:20px; text-align: center; } #menu_top li{ float:left; list-style-type:none; margin:15px; } あとbody要素にはtext-align:centerを入れています。 現状では、ナビゲーション自体は横並びになるものの、左に寄っています。横並びのまま、真ん中に表示させるにはどのようにしたらいいでしょうか。 よろしくお願いいたします。
- ベストアンサー
- HTML
- CSSでの配置方法
今学校の課題でCSSをやっています。 画像を「position」のタグで自分のやりたいように配置できません。 本やHPを参考にまねをしてみているのですが、それでもうまく配置できません。 -------------------------------------- <html> <head> <title>MY RADIO FLYER</title> <link rel="stylesheet" type="text/css" a href="stop.css"> </head> <h1><div class="section"> <img id="top" src="image/myradioflyer.gif"> </div></h1> <h2><div class="section2"> <img id="spec" src="image/spec.gif"> <img id="photo" src="image/photo.gif"> <img id="top photo" src="my radio flyer/a.jpg" alt=""> </div></h2> </html> ------------------------------------------ body {background-color: #ff0000;} div.section{align:center;} div.section2{align:left;} img#top photo{ position: absolute; right:80px; top:40px;} ------------------------- 今こんな感じでやっています。 ひとつひとつの画像それぞれを操りたいのですが、全くできません。 また、配置には関係の無いはずのタグを追加しただけでも、配置が換わってしまったりと、全くもってわからなくなってしまいました。 どなたかよろしければ配置方法教えてください。
- ベストアンサー
- HTML
- cssでボックスの配置について。
cssを使ったレイアウト作りでボックスを横並びにし、それぞれの横幅をピクセルで設定したいのですが、どのようなプロパティをどのように使用すればいいでしょうか。
- ベストアンサー
- HTML
- CSSの三段組みレイアウトについて教えて下さい。。
CSSレイアウト初心者ですが、CSSの作成段組みを作る時に <div id="container"> <div id="header"> </div><!--/header--> <div id="contents"> <div id="left_bar"> </div><!--/left_bar--> <div id="main"> </div><!--/main--> </div><!--/contents--> <div id="right_bar"> </div><!--/right_bar--> <div id="footer"> </div><!--/footer--> </div><!--/container--> と三段組固定レイアウトを作成したいのですが、 一度目は何回やり直してもfloatの設定でleft_bar,mainの横並びが上手くいかずに、 contentsの中でleft_bar,mainが縦並びになってしまい何回何が原因か様々なサイトで考えを模索してソースを直しても何故かleft_bar,main がcontentsの中で何回書き直しても縦並びになりもう一度一からCSSを組み直してみると、 どうした訳かようやくcontentsの中でleft_bar,mainが横並びになってくれました。 これは一体根本的に何が原因で横並びにさせるつもりが、縦にボックスが並んでしまうのでしょうか？ CSSのfloatの概念からハックかなと思いハック親ボックスにハックをかけてみてでも全く関係ないみたいでしたし、親ボックスにピクセルを指定していないからかと思い親ボックスにピクセルで指定しても何故か縦並び？！ CSSをもう一度書きなすことで意図したレイアウトになると言う事は一番は何が原因していると見られるのでしょうか？
- 締切済み
- CSS
- 外部ＣＳＳからクラスを呼び出すとき
ＣＳＳスタイルシート初心者です。 ネットショップを運営しているのですが、ほぼ同じレイアウトの商品紹介ページが多数あるため、外部ＣＳＳファイルを読み込ませて統一したいと思っています。 Ｈ１などのＨＴＭＬタグはちゃんと外部ファイルで設定して読み込ませることができるのですが・・・、 .text01{ text-align : left; margin-left : 10px; font-size : 14px; } 上記のように自分が作ったクラスをＨＴＭＬソースの中でどのように呼び出してよいのかいまいちわかりません。 本を読んでいると埋め込み方は、<div class="text01">・・・</div>のような感じで<div>でくくって記述するように書いてあるのですが、外部ＣＳＳの場合もこのような形で記述してよいのでしょうか？ ホームページビルダーを使っていて、上記のように指定すると、ＣＳＳがテキストに適用はされるのですが、なぜか上記で表示した部分が赤色でエラーになっていることを示してしまいます。 何か文法的に誤っている所があるのでしょうか？ どなたか是非アドバイスを宜しくお願い致します。
- ベストアンサー
- その他（プログラミング・開発）
- レイアウトはテーブルよりＣＳＳですか？
今まで、Webサイトのレイアウトは、テーブルを何重にも入れ子にして、行ってきました。 最近、「レイアウトにテーブルを使うのはよくない」「テーブルで全体を囲っているレイアウトはダサい」などの意見を聞くようになってきました。 奮起して、テーブルでつくったページをＣＳＳに書き換えようと思いましたが、なかなか困難です。 位置を左上基点に、それぞれの<div>をabsoluteで設定すれば、比較的容易にレイアウトを組めるのですが、やはり全体を画面の中心に持っていきたい、そうなると、全体をテーブルで囲って、align="center"が簡単です。 そこで、質問です。 ・ＣＳＳでレイアウトを組むとき、左上を基点にされていますか？全体を中央に配置するようにされていますか？ ・ＣＳＳで、全体を中央に配置するとき、全体を<div>で囲って、その中に<div>を入れ子にして、配置していくと思いますが、なかなか思い通りの配置になりません。このやり方であっていますか？簡単なやり方がありますか？ ・やはり、レイアウトにはテーブルよりも、ＣＳＳを使ったほうがいいですか？ ご意見・ご回答いただきたく、どうぞよろしくお願いします。
- ベストアンサー
- CSS
- pタグ内、一部の画像のみ左に配置したいとき。
ホームページの記事のページをDIVタグでくくって、 その中の「ｐ」タグ内の画像は中央に配置されるように指定しているのですが、 一部の画像のみ、左に配置したいのですが、どのようにすれば良いでしょうか？ できればCSSで行いたいです。 ちなみにホームページは http://www.k-ban.net です。こちらの各コンテンツのページ中央に掲載される画像についてです。 左に配置したい画像前後をdivでくくり、align=left指定したのですが、その<p>～</p>全体のCSS設定が崩れ、且つ画像は真ん中のままでした。 <diV id=""> <p> <img>・・・・</img> </p> </div> という形です。 宜しくお願いします！
- ベストアンサー
- HTML
