teratail
回答率
85.36%
teratail header banner
teratail header banner
質問するログイン新規登録

『🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中！

＼teratail特別グッズやAmazonギフトカード最大2,000円分が当たる！／

詳細はこちら
トップBootstrapに関する質問
Bootstrap

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

HTML

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

CSS

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

Q&A

解決済

1回答

1037閲覧

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

sasakihina
sasakihina

総合スコア6

Bootstrap

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

HTML

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

CSS

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

0グッド

0クリップ

投稿2019/09/14 03:01

0

0

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
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
mouse_484

総合スコア759

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

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

sasakihina
sasakihina

2019/09/14 03:26

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

2019/09/14 03:30

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

2019/09/14 05:22

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

2019/09/14 05:23

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

2019/09/15 00:14

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

2019/09/15 00:15

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

2019/09/15 02:31

できました！！！ ありがとうございます；；
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

質問の解決につながる回答をしましょう。 サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。 また、読む側のことを考えた、分かりやすい文章を心がけましょう。

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

ただいまの回答率
85.36%

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

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

質問する

関連した質問

トップBootstrapに関する質問

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