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

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

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

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

CSS

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

Q&A

解決済

2回答

983閲覧

HTML CSSについてご教授お願いします。

masa_2018_

総合スコア12

HTML

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

CSS

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

0グッド

0クリップ

投稿2018/06/26 16:16

お世話になります。

現在、HTMLとCSSで独学で検索しながら作っているのですが、現在解決できない点が一点ありましてご質問させて頂きます。

ぜひ、回答の程お願いいたします。

<section>と<div=class"box-wrap">の二つの要素を、上の要素よりwidthを狭くし、左右に余白を持たせたデザインにしたいと考えているのですが、widthを狭くできても、極端に二つの要素が左に寄ってしまうなどの現象が出てしまいます。

下記がコードです。

HTML

1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4<meta charseAt="UTF-8"> 5<title>サンプル株式会社</title> 6<link rel="stylesheet" type="text/css" href="style.css"> 7<link rel = "stylesheet" type = "text / css" href = "http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css" > 8<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet"> 9</head> 10<body> 11<!--header 始まり--> 12<header> 13 <ul class="nav-menu"> 14 <li class="logo">SUGOI株式会社</li> 15 <li class="nav"><i class="fas fa-caret-right"></i>会社概要</li> 16 <li class="nav"><i class="fas fa-caret-right"></i>事業概要</li> 17 <li class="nav"><i class="fas fa-caret-right"></i>採用情報</li> 18 <li class="nav"><i class="fas fa-caret-right"></i>お問合わせ</li> 19 </ul> 20</header> 21<!--header 終わり--> 22<main> 23 <p>visual01</p> 24</main> 25 26<!--main 始まり--> 27<section> 28 <h2 class="info-title">お知らせ</h2> 29 <ul class="info-list"> 30 <li> 31 <dl> 32 <dt>2013年10月20日</dt> 33 <dt>NEWS</dt> 34 <dt>テキストテキストテキストテキストテキストテキストテキストテキストテキスト</dt> 35 </dl> 36 </li> 37 <li> 38 <dl> 39 <dt>2013年10月20日</dt> 40 <dt>PRODUCT</dt> 41 <dt>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</dt> 42 </dl> 43 </li> 44 <li> 45 <dl> 46 <dt>2013年10月20日</dt> 47 <dt>NEWS</dt> 48 <dt>テキストテキストテキストテキストテキストテキストテキストテキストテキスト</dt> 49 </dl> 50 </li> 51 <li> 52 <dl> 53 <dt>2013年10月20日</dt> 54 <dt>PRODUCT</dt> 55 <dt>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</dt> 56 </dl> 57 </li> 58 </ul> 59</section> 60<!--main 終わり--> 61<div class="box-wrap"> 62 <h2>イベント</h2> 63 <div class="box"></div> 64 <p>テキストテキストテキストテキストテキストテキストテキストテキストテキスト</p> 65 <div class="box"></div> 66 <p>テキストテキストテキストテキストテキストテキストテキストテキストテキスト</p> 67 <div class="box"></div> 68 <p>テキストテキストテキストテキストテキストテキストテキストテキストテキスト</p> 69 <div class="box"></div> 70 <p>テキストテキストテキストテキストテキストテキストテキストテキストテキスト</p> 71 <div class="box"></div> <p>テキストテキストテキストテキストテキストテキストテキストテキストテキスト</p> 72 <div class="box"></div> <p>テキストテキストテキストテキストテキストテキストテキストテキストテキスト</p> 73 <div class="btn1"></div> 74</div> 75<!--footer 終わり--> 76<footer> 77 <p>copyright(C) 2018 sample.coporation All rights Reserved</p> 78</footer> 79<!--footer 終わり--> 80 81 82</body> 83</html>

CSS

1body { 2 3} 4 5header { 6 width: 100%; 7} 8 9.nav-menu { 10 display: flex; 11 list-style: none; 12 align-items: center; 13} 14 15ul { 16 overflow: hidden; 17} 18 19ul .logo { 20 font-size: 28px; 21} 22 23 24ul .nav { 25 margin: 13px; 26 display: block; 27 padding: px; 28 text-decoration: none; 29} 30 31.nav-menu li:first-child { 32 margin-right: auto; 33} 34 35.fa-caret-right { 36 color: dodgerblue; 37 margin: 5px; 38} 39/* headerここまで*/ 40main { 41 clear: both; 42 position:relative; 43 background-image: url("coolHue-ABDCFF-0396FF.png"); 44 background-position: center center; 45 background-repeat: no-repeat; 46 background-size: cover; 47 height: 500px; 48 text-align: center; 49} 50 51main p { 52 position: absolute; 53 font-weight: bold; 54 color:white; 55 top: 50%; 56 left: 50%; 57 -ms-transform: translate(-50%,-50%); 58 -webkit-transform: translate(-50%,-50%); 59 transform: translate(-50%,-50%); 60 opacity: 0.7; 61} 62/* mainここまで*/ 63 64h2 { 65 text-align: center; 66} 67 68.info-title { 69 border-bottom: 2px solid #0066FF; 70 padding-bottom: 50px; 71 padding-top: 20px; 72} 73/* sectionここまで*/

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

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

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

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

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

yoshinavi

2018/06/26 22:25 編集

><section>と<div=class"box-wrap">の二つの要素を、上の要素よりwidthを狭くし・・・ → HTMLのコードを見ると「上の要素」は「body」しかないのですが、この形で良いのでしょうか? また、質問の要素<section>と<div=class"box-wrap">のCSSがありませんのでご提示ください。 -追記- 良く見直したら私が思いっきり勘違いしていました。スミマセン。
guest

回答2

0

margin を設定しましょう。

http://www.htmq.com/style/margin.shtml

投稿2018/06/26 16:18

退会済みユーザー

退会済みユーザー

総合スコア0

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

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

masa_2018_

2018/06/27 00:17

回答ありがとうございます。 解決できました。
guest

0

ベストアンサー

質問の要素<section>と<div=class"box-wrap">のCSSがありませんので、推測で回答致します。

上の要素よりwidthを狭くし、左右に余白を持たせたデザインにしたい

widthを狭くできても、極端に二つの要素が左に寄ってしまうなどの現象が出てしまいます。

「Kosuke_Shibuya」さんの回答にあるように、余白を作るにはその要素自体に「margin」または「padding」、包括する要素に「padding」等の設定が必要になります。


一般的に、要素の左右(上下)に余白を持たせた「中央寄せ」の方法はいくつかありますので、「CSS 中央寄せ」等で検索してみてください。

中央寄せの方法では「どれが正解」とはありません。状況に合わせて「効く効かない」があるので、より適切な方法を試して経験されることをオススメします。

投稿2018/06/26 22:44

yoshinavi

総合スコア3521

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問