Q&A
CSSを追記していただけませんか？
###前提・実現したいこと
HTMLとCSSを使って以下のような配置のページを作りたいです。
###発生している問題・エラーメッセージ
表示は全てできているのですが、配置の微調整ができずに困っています。
###該当のソースコード
HTML
1<footer> 2 <div class="sponsorship"> 3 <div class ="companyinfo"> 4 <ul> 5 情報 6 <li>1</li> 7 <li>2</li> 8 <li>3</li> 9 <li>4</li> 10 </ul> 11 </div> 12 <div class="news"> 13 <ul> 14 ニュース 15 <li> 16 <a href="https://teratail.com/" target="_blank"><p>1</p></a> </li> 17 <li> 18 <a href="https://teratail.com/" target="_blank"><p>2</p> 19 </a> <li> 20 <a href="https://teratail.com/" target="_blank"><p>3</p> 21 </a></li><li> 22 <a href="https://teratail.com/" target="_blank"><p>4</p> 23 </a></li> 24 25 </ul> 26 </div> 27 <div class ="question"> 28 <ul> 29 問い合わせ 30 <li>1</li> 31 <li>2</li> 32 <li>3</li> 33 <li>4</li> 34 </ul> 35 </div> 36 <div class="clear"></div> 37 </div> 38 <div class="contents"> 39 <div class="ft-social"> 40 <a href="https://teratail.com/" target="_blank"><img src="logo.png" alt="会社"></a> 41 </div> 42 <br> 43 <div alline="left" style ="margine-right=220"> 44 <a href="" target="_blank" class="track" id="Contact">問い合わせ</a> 45 <a href="https://teratail.com/" class="track" id="Privacy">ポリシー</a> 46 <a>all rights reserved.</p> 47 </br> 48 </div> 49</footer>
現状のHTML/CSS
HTML,
1<footer> 2 <div class="sponsorship"> 3 <div class ="companyinfo"> 4 <ul> 5 情報 6 <li>1</li> 7 <li>2</li> 8 <li>3</li> 9 <li>4</li> 10 </ul> 11 </div> 12 <style> 13 .companyinfo { 14 width:33.333%} 15 </style> 16 <div class="news"> 17 <ul> 18 ニュース 19 <li> 20 <a href="https://teratail.com/" target="_blank"><p>1</p></a> </li> 21 <li> 22 <a href="https://teratail.com/" target="_blank"><p>2</p> 23 </a> <li> 24 <a href="https://teratail.com/" target="_blank"><p>3</p> 25 </a></li><li> 26 <a href="https://teratail.com/" target="_blank"><p>4</p> 27 </a></li> 28 29 </ul> 30 <style> 31 .news { 32 width:33.333%} 33 </style> 34 </div> 35 <div class ="question"> 36 <ul> 37 問い合わせ 38 <li>1</li> 39 <li>2</li> 40 <li>3</li> 41 <li>4</li> 42 </ul> 43 <style> 44 .question { 45 width:33.333%} 46 </style> 47 </div> 48 <div class="clear"></div> 49 </div> 50 <div class="contents"> 51 <div class="ft-social"> 52 <a href="https://teratail.com/" target="_blank"><img src="logo.png" alt="会社"></a> 53 </div> 54 <br> 55 <div alline="left" style ="margine-right=220"> 56 <a href="" target="_blank" class="track" id="Contact">問い合わせ</a> 57 <a href="https://teratail.com/" class="track" id="Privacy">ポリシー</a> 58 <a>all rights reserved.</p> 59 </br> 60 </div> 61</footer> 62 63<style> 64.sponsorship {text-align: left 65 } 66 </style> 67
###補足情報(言語/FW/ツール等のバージョンなど)
ウェブサイトのリンクは例のため、全てteratailのホームページにしてあります。
上記のコードだけしか書けていません。
htmlもこれが全文というわけではないですよね？
HTMLもこれが全文です
<html><body>～</body></html>すらもないのですか？
sublime textというエディタではこのコードで動作していました,,
回答2件
0
ベストアンサー
HTMLのみで質問文の画像にあるようなデザインを目指しているのではないかと感じたので、念のため書きますが、HTMLはあくまで構造を定義するもので、HTMLを装飾目的で使用することは推奨されていません。また、HTML5では装飾のためのタグのほとんどが廃止されているので、CSSを使用して行うと良いと思います。HTMLを少し変えてしまいましたが、HTML, CSSを使用して以下のように行うことが出来ます。
HTML
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <title>タイトル</title> 6 <style type="text/css"> 7 * { 8 font-size: 16px; 9 margin: 0; 10 padding: 0; 11 } 12 13 a { 14 text-decoration: none; 15 color: #000; 16 } 17 18 ul { 19 list-style: none; 20 } 21 22 img { 23 width: 100%; 24 } 25 26 .footer-link-list { 27 display: flex; 28 justify-content: space-between; 29 } 30 31 .companyinfo, 32 .news, 33 .question { 34 display: flex; 35 } 36 37 .sponsorship { 38 display: flex; 39 width: 80%; 40 padding-left: 10%; 41 justify-content: space-between; 42 order: 1; 43 } 44 45 .contents { 46 width: 20%; 47 } 48 49 .list { 50 margin: 0 .5em; 51 padding-left: 1.0em; 52 border-left: 5px solid #000; 53 } 54 55 .footer-copyright { 56 display: flex; 57 margin-top: 5px; 58 justify-content: space-between; 59 } 60 </style> 61</head> 62<body> 63<footer> 64 <div class="footer-link-list"> 65 <div class="sponsorship"> 66 <div class="companyinfo"> 67 <h2 class="headline">情報</h2> 68 <ul class="list"> 69 <li>1</li> 70 <li>2</li> 71 <li>3</li> 72 <li>4</li> 73 </ul> 74 </div> 75 <div class="news"> 76 <h2 class="headline">ニュース</h2> 77 <ul class="list"> 78 <li> 79 <a href="https://teratail.com/" target="_blank"> 80 <p>1</p> 81 </a> 82 </li> 83 <li> 84 <a href="https://teratail.com/" target="_blank"> 85 <p>2</p> 86 </a> 87 <li> 88 <a href="https://teratail.com/" target="_blank"> 89 <p>3</p> 90 </a> 91 </li> 92 <li> 93 <a href="https://teratail.com/" target="_blank"> 94 <p>4</p> 95 </a> 96 </li> 97 </ul> 98 </div> 99 <div class="question"> 100 <h2 class="headline">問い合わせ</h2> 101 <ul class="list"> 102 <li>1</li> 103 <li>2</li> 104 <li>3</li> 105 <li>4</li> 106 </ul> 107 </div> 108 </div> 109 <div class="contents"> 110 <div class="ft-social"> 111 <a href="https://teratail.com/" target="_blank"> 112 <img src="https://placehold.jp/3d4070/ffffff/150x150.png?text=logo.png" alt="会社"> 113 </a> 114 </div> 115 </div> 116 </div> 117 <div class="footer-copyright"> 118 <div class="left"> 119 <a href="" target="_blank" class="track" id="Contact">問い合わせ</a> 120 <a href="https://teratail.com/" class="track" id="Privacy">ポリシー</a> 121 </div> 122 <div class="right"> 123 <a href="https://teratail.com/" class="track" id="copyright">著作権</a> 124 </div> 125 </div> 126</footer> 127</body> 128</html> 129
投稿2017/08/02 07:07
編集2017/08/02 07:10総合スコア14731
ご回答ありがとうございます。熟読して勉強したいと思います。
0
「どの部分をどのようにしたいのか？」が無いので、「微調整したい」だけでは、どのようにしたいのかが不明です。
具体的に問題点を提示してもらえれば、皆さんから回答が出てくると思いますよ。
投稿2017/08/02 06:10
総合スコア3523
現状のコードのどこを直せばこのような位置に持っていくとができるのか、調べていますがわからずに質問しました
①大きくブロックを分けて、横並びにするのか、縦並びにする
②そのブロックの中に更に小さいブロックを入れて横並びにするのか、縦並びにする
これが基本だと思います。
CSSが効かないな？と思う時は、ブロック要素しか効かないプロパティをインライン要素で、またはその逆もあるので、一つ一つ検証して見てください。
CSSは最初は分かりづらいかもですが、一つ一つ解決していくと他の使った事ないプロパティも解決策がおのずと見える場合が多いですので、頑張って見て下さい。
可能であれば現状のCSSを提示すると、皆さんから回答してもらえます。丸投げは良くないですが、行き詰まったら聞けば良いです。最初は皆んな素人・初心者です。恥ずかしくありませんよ。
その為のteratailだと私は思っています。
現状のCSSを提示させていただきました。①の大きくブロックを分けて縦並びにするイメージです。
コメントいただきましてありがとうございます。
<div>は基本的にブロック要素の為、縦に並びます。まずは「sponsorship」の中の「情報・ニュース・問い合わせ」の<div>はfloatやflex等で横に並べるのが良いかと思います。
ご回答ありがとうございます。floatを試して、勉強になりました。
あなたの回答
tips
プレビュー
