ID:pzwsps さんの質問

2カラムレスポンシブwebを、1カラムレスポンシブwebにカスタマイズする方法
.
HTMLやCSSに慣れている方なら、簡単なことなのかもしれませんが、初心者なのでよくわかりません。
.
よろしくお願いします。
.
.
.
1カラムレスポンシブwebにカスタマイズするというのは、2カラムレスポンシブwebのサイドバーを削除して、2カラムレスポンシブwebの文章や記事が書いてあるコンテンツエリア(テキストエリア?)を、その分拡大するという意味です。
.
細かいデザインは変えないで、大枠だけを変えたいと思っています。
.
画像は使わないので、考える必要はありません。
.
.
.
たとえば、
.
このテンプレート
http://template-party.com/template/tp_biz33/tp_biz33_green01.zip/
http://template-party.com/temp_responsive_biz.html
.

.
このテンプレート
http://www.coolwebwindow.com/html5/template/src/HTML5_001/index.html
.
みたいに、1カラムレスポンシブwebにカスタマイズするには、どうすればよいでしょうか?
.
よく見る典型的な2カラムテンプレートの構造になって気がしますが、初心者のためよくわかりません。
.
<div id="sub">を削除して、
<div id="main">をギリギリまで横に引き伸ばして、
<h2>無料テンプレートのご利用前に必ずお読み下さい</h2>もギリギリまで横に引き伸ばして、
.
というようにやっていけばよい気がしますが、よくわかりません。うまくできません。
.
慣れている方なら、何か所かちょっといじればいいだけのような気がしますが・・・
.
HTMLやCSSのどこを修正すればよいのか、教えて頂けないでしょうか?
.
よろしくお願いします。
.
<body>
<div id="container">
<header>
<nav id="menubar">
<div id="contents">
<aside id="mainimg">
<div id="main">
<div id="sub">
<p id="pagetop">
</div>
</div>
<footer>
</body>

みんなの回答 1 件

ID:Jwohce さんの回答

メインコンテンツの横幅を100%指定にする。
サブコンテンツ〔サブの方のカラム〕は
下に落とす

ID:pzwsps

ありがとうございます。

width: 700px;を、width: 100%;にしたら、デザイン的にはうまくいきました。

ただ、ブラウザの横幅をマウスで変えても、ある一定の幅まで、縮めないと文字が折り返されません。

おそらく、CSSの@mediaをいじればよいのではないのか、というところまでは何とかわかりましたが、
@media (min-width: 481px) and (max-width: 800px) {
を単純に削除しただけではデザインが崩れてしまいます。

再びよろしくお願いします。

@media (max-width: 480px) {

@media (min-width: 481px) and (max-width: 800px) {

ID:yoWvFv

トピ主です。

解決できたので終了させていただきます。

ありがとうございました。

最終更新日:2016-01-10 (1,383 views)

関連するトピックス

ページ上部に戻る