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

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

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

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

HTML

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

CSS

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

Q&A

解決済

1回答

922閲覧

headerに文字が収まらないです

sasakihina

総合スコア6

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

HTML

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

CSS

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

0グッド

0クリップ

投稿2019/09/14 03:01

html

1<!DOCTYPE html> 2<html> 3<head> 4 <title>fremee5</title> 5 <meta charset="utf-8"> 6 <link href="fremee5.css" rel="stylesheet" type="text/css"> 7 <!-- BootstrapのCSS読み込み --> 8 <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> 9 <!-- fontawesomeの読み込み--> 10 <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous"> 11</head> 12<body> 13 <header> 14 <P class="mgl-10"><</P> 15 <p class="text-center">HOME</p> 16 </header> 17<section> 18 <i class="fas fa-comments"></i> 19 <i class="fas fa-home"></i> 20 <i class="fas fa-bell"></i> 21 <i class="fas fa-user"></i> 22</section> 23<footer> 24<p class="text-center">@Fremee.inc</p> 25<p class="riyou">利用規約</p> 26<p class="pb">プライバシー</p> 27</footer> 28</body> 29</html>

css

1@charset "utf-8"; 2header{ 3 background-color: #7BC5AE; 4 width: 100%; 5 height: 80px; 6} 7header p{ 8 color: #ffff; 9 font-size: 40px; 10} 11.mgl-10{ 12 margin-left: 10px; 13} 14header h1{ 15 color: #ffff; 16 font-size: 40px; 17} 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35footer { 36 background-color: #7BC5AE; 37 width: 100%; 38 height: 100px; 39 bottom: 0; 40} 41 42footer p{ 43 color: #ffff; 44 font-size: 30px; 45} 46.riyou{ 47 float: right; 48 font-size: 16px; 49 margin-right: 40px; 50} 51.pb{ 52 float: right; 53 font-size: 16px; 54 margin-right: 20px; 55}

今の状態ですと、HOMEという文字がheaderの枠の中から飛び出してしまいます。
どうしてか教えてくださると幸いです。

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

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

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

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

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

yoshinavi

2019/09/14 10:42

CSSで言う「ブロック要素」の基本的な状態を再確認されると良いかと思います。
guest

回答1

0

ベストアンサー

headerを

html

1<header> 2 <p class="text-center">HOME</p> 3</header>

と書き換えれば枠に入ります

投稿2019/09/14 03:24

mouse_484

総合スコア759

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

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

sasakihina

2019/09/14 03:26

回答ありがとうございます。 <という記号をheaderの左部分に配置したいのですが、headerにpタグは一つしかつかえないのですか??
mouse_484

2019/09/14 03:30

`<`は間違えて入力していたものだと勘違いしていました HTML上で<を表示したい場合は`&lt;`と入力してください
sasakihina

2019/09/14 05:22

それでやると、やはり“<”のみの表示となってしまいます…。。
mouse_484

2019/09/14 05:23

何をやりたいのかイマイチ理解できないです どのようにしたいかイメージしやすいように説明してもらえますか?
sasakihina

2019/09/15 00:14

< をクリックすると前のページに戻るようにしたいです <が左側にあって 真ん中にHOMEってゆう文字が来るようにしたいです。
mouse_484

2019/09/15 00:15

pではなくdivにしてみてください <div>&lt;</div><div>HOME</div>
sasakihina

2019/09/15 02:31

できました!!! ありがとうございます;;
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問