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

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

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

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Q&A

解決済

1回答

214閲覧

3つのsectionのうち一つの要素だけ下に回り込んでしまいます。

S.K1994

総合スコア34

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

0グッド

0クリップ

投稿2018/05/14 14:08

編集2018/05/14 15:11

https://u-d-l.jp/
サイト制作の練習をしている初心者プログラマーです。
上記のサイトのServiceの部分を練習で作っているのですが、

<section class="last"> の部分だけが下に回り込んでしまいます。 どうすれば他のseviceの横に回り込むのか教えてくださいお願いします。

コードはこちらです。
HTML

<html lang="ja"> <head> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div id="main"> <section id="sevice"> <h1 class="ttl">Service</h1> <section> <h2 class="ttl">ディレクション</h2> <p class="ttl">DIRECTION</p> <p class="icon"> <img src="https://u-d-l.jp/wp-content/themes/underline/images/icon_service01.jpg"> </p> <p class="text01">お客様の要望をヒアリングし、現状の問題点を洗い出し、効果的なプランを作成いたします。 制作ではデザインに入る前の事前の準備が特に重要になります。何が必要で何が必要でないのかを判断し、費用対効果の高いWebサイトを作るための土台を作ります。</p> </section> <section> <h2 class="ttl">デザイン</h2> <p class="ttl">DESIGN</p> <p class="icon"> <img src="https://u-d-l.jp/wp-content/themes/underline/images/icon_service02.jpg"> </p> <p class="text01">ヒアリングに基づいたプランに沿って、デザインを作成いたします。 人の使うものであることを常に意識して、使う人が迷わない、目的を達成できるデザインを心がけています。 インターフェースの重要性が増す中でデザインの役割を理解し、そのプランに最適な提案をさせていただきます。</p> </section> <section class="last"> <h2 class="ttl">コーディング</h2> <p class="ttl">CODING</p> <p class="icon"> <img src="https://u-d-l.jp/wp-content/themes/underline/images/icon_service03.jpg"> </p> <p class="text01">デザインの意図を理解し、動きや効果を適切に使用することでWebサイトの仕上がりは大きく変わります。 スマートフォンサイト、ワードプレスを使用した更新性の高いサイト、Javascriptを使用した動きのあるサイトなど、様々なサイトのコーディングを行っております。</p> </div> </section> </section> </div> </body> </html> コード

CSS

sevice{ width:920px; margin:0 auto 130px auto; padding:0; } #sevice section{ float:left; width:280px; height:auto; margin-right:40px; margin-bottom:40px; } #sevice section .last{ padding:0; margin:0; } #main h1.ttl{ margin-bottom: 65px; text-align: center; line-height: 1.0; font-family: 'Lato', sans-serif; font-weight: 100; font-size: 50px; letter-spacing: 0.05em; } #main h2.ttl{ margin-bottom:12px; text-align:center; line-height:1.0; font-size:25px; color:#505050; } #main p.ttl{ margin-bottom: 20px; text-align: center; line-height: 1.0; font-family: 'Lato', sans-serif; font-weight: 400; font-size: 14px; letter-spacing: 0.1em; color: #a5a5a5; } .icon{ margin-bottom:20px; text-align:center; } #sevice section .icon img{ width: 49px; height: 51px; } .text01{ margin:0; padding:0; border:0; outline:0; font-size:14px; font-weight:normal; } コード

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

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

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

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

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

kszk311

2018/05/14 14:16

ソースコードは<code>ボタンで囲って下さい。
S.K1994

2018/05/14 14:27

知らなかったです。ご指摘ありがとうございます。
guest

回答1

0

ベストアンサー

css

1#sevice section .last

の要素は存在しないですね。

css

1#sevice section.last

もしくは下記でもいいです、

css

1#sevice .last

投稿2018/05/14 14:49

kszk311

総合スコア3404

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

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

kszk311

2018/05/14 14:51

あと、<code>ボタンの使い方として ```html ソースを記述 ``` ```css ソースを記述 ``` としておいて貰えると。 cssの一行目が消えています。
S.K1994

2018/05/14 15:12

度々ありがとうございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問