質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

3607閲覧

画像を改行させずに1列で配置したいです

Akaho

総合スコア39

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2019/03/31 11:10

編集2019/03/31 11:23

下の画像の見本のように画像を改行されず一列で配置したいです。
イメージ説明

自分の書いたコードが下です.

HTML

1コード<!DOCTYPE html> 2<html> 3 <head> 4 <meta charset="utf-8"> 5 <title>Progate</title> 6 <link rel="stylesheet" href="stylesheet.css"> 7 </head> 8 <body> 9 <!-- ここからHTMLを書き始めてください --> 10 <div class="header"> 11 <div class="header-logo">Progate</div> 12 <div class="header-list"> 13 <ul> 14 <li>プログラミングとは</li> 15 <li>学べるレッスン</li> 16 <li>お問い合わせ</li> 17 </ul> 18 </div> 19 </div> 20 <div class="main"> 21 <div class="copy-container"> 22 <h1>HELLO WORLD<span>.</span></h1> 23 <h2>プログラミングの世界へようこそ</h2> 24 </div> 25 <div class="contents"> 26 <h3 class="section-title">学べるレッスン</h3> 27 <div class="contents-item"> 28 <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/html.svg"> 29 <p>HTML & CSS</p> 30 </div> 31     <div class="contents-item"> 32 <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/php.svg"> 33 <p>PHP</p> 34 </div> 35 <div class="contents-item"> 36 <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/ruby.svg"> 37 <p>Ruby</p> 38 </div> 39 <div class="contents-item"> 40 <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/swift.svg"> 41 <p>Swift</p> 42 </div> 43 </div> 44 </div> 45 46 </body> 47</html>`` 48 49 50 51```CSS 52コード

/* CSSのリセット(消さないでください) */
html, body,
ul, ol, li,
h1, h2, h3, h4, h5, h6, p,
form, input, div {
margin: 0;
padding: 0;
}

li {
list-style: none;
}
/* ここからCSSを記述してください */
body{
font-family:"Avenir Next", "Hiragino Kaku Gothic ProN W3", sans-serif;
}
li{
float:left;
}
.header{
color:white;
background-color:#26d0c9;
height:90px;
}
.header-logo{
float:left;
font-size: 36px;
padding:20px 40px;
}
.header-list{
font-size:16px;
padding:33px 20px;
}
.copy-container h1{
white-space:nowrap;
width:820px;
height:562px;
font-size:140px;
font-weight:700;
position:relative;top:100px;left:70px;
}
.copy-container h2{
white-space:nowrap;
width:820px;
height:180px;
font-size:60px;
font-weight:700;
position:relative;top:-280px;left:78px;
}
span{
color:#ff4a4a;
}
.section-title{
border-bottom: 2px solid #dee7ec;
font-size:28px;
padding-bottom:15px;
margin-bottom:50px;
position:relative;top:-360px;left:90px;
}
.contents{
width:820px;
height:500px;
margin-top:100px;
white-space:nowrap;
style="display:inline"
}
.contents-item{
white-space:nowrap;
float:left;
margin-right:40px;
position:relative;top:-360px;left:90px;
}
.contents-item p{
font-size:24px;
margin-top:30px;
}

どこをどう変えたら実現できますか? 自分の中でよくわからない点が2点あります。 余裕のある方は教えて下さい。 1点目、 今、困っているのは画像の改行ですが、先ほどもcssの.copy-container h1,h2の所で、同じ現象が起きました。 その際、white-space:nowrap;と入れたら、改行されていたのが一列で配置されました。 でも、今回はうまく行きませんでした。その理由がわからないです。 2点目、htmlで <div class="header-logo">Progate</div>や<h3 class="section-title">学べるレッスン</h3>みたいに、書く理由がわからないです。 <div class="header-logo">Progate</div>の方は、 自分は、divは要素のまとまりなのだから、今、上に挙げたものの中にはまとまりはないんじゃないかと思うんですが、、、 h3 class="section-title">学べるレッスン</h3>の方は、 いちいちクラス付けなくてもcssで指定する際にh3タグで指定すればいいんじゃないかと思うんですが、、、

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kei344

2019/03/31 11:13

CSSがコードブロックになっていません。CSS先頭行で「```CSS」といれてその前後には改行を入れてください。PCであれば記入エリアの右部分あたりにリアルタイムに結果が表示されていると思うので、そこを見ながら調整してください。
guest

回答1

0

ベストアンサー

ざっと見ましたがレイアウトにおいてfloatpositionは使わないほうがよいです。
現代では Flexgrid があるので、そちらを使うようにしてください。(いまだにfloatを使っている教材も有りますが、正直お勧めしません)

少なくともposition:relative;top:-数値px;left:数値px;は使わないほうがよいです。レイアウト的に組むのがかなり難しくなると思ってください。

なので、全体的に組み直すことをお勧めします。(修正が1箇所や2箇所でないため)

CSS

1.contents{ 2 width:820px; 3 height:500px; 4 margin-top:100px; 5 white-space:nowrap; 6 style="display:inline" /* ← これは文法間違い */ 7}

【CSS flexible box の利用 - CSS: カスケーディングスタイルシート | MDN】
https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes

【CSS グリッドレイアウト - CSS: カスケーディングスタイルシート | MDN】
https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Grid_Layout

【よこ並びのCSS。】
http://lopan.jp/layout/

【段組みのCSS。】
https://lopan.jp/layout2/

投稿2019/03/31 11:30

kei344

総合スコア69366

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問