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

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

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

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

HTML5

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

HTML

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

CSS

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

Q&A

解決済

3回答

1782閲覧

widthが適用されないです...

newyee

総合スコア213

CSS3

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

HTML5

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

HTML

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

CSS

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

0グッド

0クリップ

投稿2018/11/08 05:04

css

1.header_logo{ 2 margin:10px; 3} 4.display_flex{ 5 6} 7.header_menu_wrap{ 8 display:flex; 9 align-items:center; 10} 11 12.header_menu{ 13 display:flex; 14 padding:0; 15 height:55px; 16 width:75%; 17 18} 19.header_menu li + li{ 20 border-left:1px solid #DDDDDD; 21} 22.header_menu li { 23 height:55px; 24 width:16.666%; 25 /* margin:10px 0; 26 padding:0 34px; */ 27 list-style:none; 28 font-family:'Quicksand',sans-serif; 29 /* text-align:center; 30 padding:20px; */ 31} 32 33 34.header_menu li a{ 35 text-decoration:none; 36 color:#666; 37 font-size:15px; 38 font-weight:bold; 39 display:table-cell; 40 vertical-align:middle; 41 text-align:center; 42 height:55px; 43 width:16.666%; 44 45} 46.header_menu li a:hover{ 47 color: #999; 48} 49.header_menu_ruby{ 50 color:#999; 51 margin:0; 52 font-size:10px; 53 font-weight:400; 54 55} 56 57 58 59 60.yoyaku_box a{ 61 text-decoration:none; 62 background-color:#FF9999; 63 color:#fff; 64 padding:14px 45px; 65 position:relative; 66 67} 68.yoyaku_box a:before{ 69 content:""; 70 width:20px; 71 height:20px; 72 background-image:url(img/common_sprite.png); 73 position:absolute; 74 background-size:110px; 75 top:15px; 76 left:17px; 77} 78 79

html

1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="utf-8"> 5 <title>heair_salon</title> 6 <link rel="stylesheet" type="text/css" href="normalize.css" > 7 <link rel="stylesheet" type="text/css" href="heair_salon.css" > 8 <link href="https://fonts.googleapis.com/css?family=Quicksand" rel="stylesheet"> 9</head> 10<body> 11 <header> 12 <div class="header_menu_wrap display_flex"> 13 <h1 class="header_logo"><a href="#"><img src="img/header_logo.webp" alt="blandlogo"></h1></a> 14 <ul class="header_menu display_flex" > 15 <li><a href="#">HOME<p class="header_menu_ruby">ホーム</P></a></li> 16 <li><a href="#">SALON<p class="header_menu_ruby">サロン検索</p></a></li> 17 <li><a href="#">SPECIAL<p class="header_menu_ruby">特集コンテンツ</p></a></li> 18 <li><a href="#">CATALOG<p class="header_menu_ruby">ヘアカタログ</p></a></li> 19 <li><a href="#">RECRUIT<p class="header_menu_ruby">採用情報</p></a></li> 20 <li><a href="#">CONCEPT<p class="header_menu_ruby">コンセプト</p></a></li> 21 </ul> 22 <p class="yoyaku_box "> 23 <a href="#">サロンからweb予約</a> 24 </p> 25 </div> 26 </header> 27</body> 28 29</html>

上記コードの、yoyaku_box内のaタグにwidth18%とし、全体の18%のwidthを与え、全体の横幅に対して背景色を18%分適応させたいと考えているのですが、aタグに対してwidthを設定しても適応されません。
aタグにwidthを設定するにはどのようにしたらよろしいでしょうか?
以下の画像は、上記コードを実行した際の画像となります。
イメージ説明

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

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

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

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

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

yoshinavi

2018/11/08 10:01

HTMLタグの閉じ方や、「%の基準はどこにあるのか」「インライン要素とブロック要素の性質の違いはどういうものか」を再度確認されると良いかと思います。
newyee

2018/11/08 11:01

そうなんですよね...僕自身そこらへんが曖昧な部分がありまして...勉強不足を実感しております。。。
yoshinavi

2018/11/08 11:35

最初から理解出来る人は一人もいませんので、1歩づつ積み重ねていけば大丈夫ですよ。
guest

回答3

0

ベストアンサー

全体というのが<div class="header_menu_wrap display_flex">ということであれば、
<p class="yoyaku_box">のwidthを18%にし、adisplay: block;をすることでおそらく希望に近いことができるのではと思います。

css

1/* 追加 */ 2.yoyaku_box{ 3 width:18%; 4} 5.yoyaku_box a{ 6 display:block; 7}

aに18%を指定しても.yoyaku_boxに対する18%なので。

投稿2018/11/08 06:35

dit.

総合スコア3235

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

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

newyee

2018/11/08 09:20

ご回答ありがとうございます。 ご回答の通り試させていただきましたら、実現できたのですが、一点だけお聞きしたいことがございます。 何故、「yoyaku_box a」に対して、display_blockを設定する必要があるのでしょうか?
dit.

2018/11/09 07:41

display:block;を指定しない場合、aタグはインライン要素なので文字+余白分しか横幅がありません。 .yoyaku_box内にピンクのボタン以外のものが入るならそのままでも構いませんが、全体の18%を取った.yoyaku_boxいっぱいにボタンが表示され、その領域が全てリンクになって欲しいのであればブロック要素にしてしまうのが一番楽かと思いこの記述をしました。
newyee

2018/11/09 07:56

ご返信ありがとうございます。 勉強不足な為、ブロック要素、インライン要素に関して理解できていない部分があり、申し訳ないです。 aタグに、「display:block」とすることで「.yoyaku_box」に設定した、widthが継承されるからといった理解で合っていますでしょうか?
dit.

2018/11/12 04:58

なかなか返信ができなかったのですでに理解されているかもしれませんが一応返信しておきます。 詳しい方には怒られそうですが、あまり難しく考えずに「blockは横いっぱいに広がる」程度でもいいんじゃないかなと思います。 aタグのdisplay:blockを消してみて、どんな動作になるか確かめてみてください。
newyee

2018/11/12 05:15

ご返信ありがとうございます。 そうですよね... あまり難しく考えすぎなくても良いかもしれませんよね...
newyee

2018/11/12 05:48

ありがとうございます!
guest

0

<h1><a></h1></a> になっている。
HTMLが崩れるとブラウザがどう解釈するかはブラウザしだいなので、正しいHTMLにしてみては。

HTML

1<h1 class="header_logo"><a href="#"><img src="img/header_logo.webp" alt="blandlogo"></h1></a> 2```↓ 3```HTML 4<h1 class="header_logo"><a href="#"><img src="img/header_logo.webp" alt="blandlogo"></a></h1>

投稿2018/11/09 09:51

kei344

総合スコア69366

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

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

newyee

2018/11/10 00:01

ありがとうございます! 修正してみます。
guest

0

css

1a { 2 display: inline-block; 3}

を指定したら動きませんか?

投稿2018/11/08 05:11

kunai

総合スコア5405

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

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

newyee

2018/11/08 05:34

ご回答ありがとうございます。 display:inline-blockとし、widthにパーセント指定をし、設定したら、確かにwidthは適用されたのですが、全体の幅に対しての割合ではありませんでした。なんといいますか、数値が小さい場合は、縦に伸びた状態となり、数値を大きく70%近くまであげると、元の形にもどり横に伸びるといった感じでした...
kunai

2018/11/08 05:56

display: block ではどうですか? せっかくソースを提示頂いていますが、こちらでは画像が表示されず、どういう状態が正かもよくわからないので五月雨式になってすみませんが。。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問