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

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

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

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

Webサイト

一つのドメイン上に存在するWebページの集合体をWebサイトと呼びます。

HTML

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

CSS

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

CSSフレームワーク

CSSフレームワークは、Webページのスタイルを指定する言語であるCSSを容易に構築するためのツールです。ツイッター社が開発した「Bootstrap」や段組レイアウトが可能な「Foundation」など様々なCSSフレームワークがあります。

Q&A

解決済

2回答

841閲覧

フルスクリーンの中に文字やボタンが記載されない

退会済みユーザー

退会済みユーザー

総合スコア0

HTML5

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

Webサイト

一つのドメイン上に存在するWebページの集合体をWebサイトと呼びます。

HTML

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

CSS

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

CSSフレームワーク

CSSフレームワークは、Webページのスタイルを指定する言語であるCSSを容易に構築するためのツールです。ツイッター社が開発した「Bootstrap」や段組レイアウトが可能な「Foundation」など様々なCSSフレームワークがあります。

0グッド

0クリップ

投稿2020/01/02 06:53

こんにちわ。HTML、CSSでWEBサイトを勉強中のものです。練習として草津温泉に行った思い出をテーマにWEBサイトを作っています。
写真をフルスクリーンにして現在下になってしまっている文字やボタン、ロゴなどを写真の中心に持ってきたいです。

色々調べて実践してみましたが上手くいきません。初心者でお恥ずかしいのですが手助けしていただけるとありがたいです????

『HTML』

<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>草津温泉</title> <meta name="description" content="草津温泉の思い出と美味しかったお肉の紹介"> <link rel="icon" type= href="/kusatu.png">
<!-- CSS --> <link rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css"> <link href="https://fonts.googleapis.com/css?family=Philosopher" rel="stylesheet"> <link href="css/style.css" rel="stylesheet"> </head> <body> <div id="home" class="big-bg"> <!-- トップバナー --> <img src="kusatu.png" id="top-baner"> <header class="page-header wrapper"> <h1><a href="index.html"><img class="logo" src="./images/onsen.png" alt="草津温泉ホーム"></a></h1> <nav> <ul class="main-nav"> <li><a href="news.html">News</a></li> <li><a href="menu.html">Menu</a></li> <li><a href="contact.html">Contact</a></li> </ul> </nav> </header> <div class="home-content wrapper"> <h2 class="page-title">草津温泉ホームページ</h2> <p>草津温泉の思い出と美味しかったご飯</p> <a class="button" href="menu.html">メニュー</a> </div> </div> </body>
</html> -----------------------------------------------------------------------------

『CSS』

@charset "UTF-8";

/* 共通部分
------------------------------- */
html {
font-size: 100%;
}
body{
font-family: "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", sans-serif;
line-height: 1.7;
color: #432;
}
a {
text-decoration: none;
}
img {
max-width: 100%;
}
.wrapper {
max-width: 1100px;
margin: 0 auto;
padding: 0 4%;
}

/* 大きな背景画像 */
.big-bg {
background-size: cover;
background-position: center top;
background-repeat: no-repeat;
}

/* 見出し /
.page-title {
font-size: 5rem;
font-family: 'Philosopher', serif;
text-transform: uppercase;
font-weight: normal;
}
/
HOME
------------------------------- */
#home {
background-image: url(kusatu.png);
min-height: 100vh;
}
#home .page-title {
text-transform: none;
}
.home-content {
text-align: center;
margin-top: 10%;
}
.home-content p {
font-size: 1.125rem;
margin: 10px 0 42px;
}

.sub-title {
font-size: 1.375rem;
padding: 0 8px 8px;
border-bottom: 2px #0bd solid;
font-weight: normal;
}

/* ボタン */
.button {
font-size: 1.375rem;
background: #0bd;
color: #fff;
border-radius: 5px;
padding: 18px 32px;
}
.button:hover {
background: #0090aa;
}

/* iframe */
iframe {
width: 100%;
}

/* HEADER
------------------------------- */
.page-header {
display: flex;
justify-content: space-between;
}
.logo {
width: 210px;
margin-top: 14px;
}
.main-nav {
display: flex;
font-size: 1.25rem;
text-transform: uppercase;
margin-top: 34px;
list-style: none;
}
.main-nav li {
margin-left: 36px;
}
.main-nav a {
color: #432;
}
.main-nav a:hover {
color: #0bd;
}

/* HOME
------------------------------- */
#home {
background-image: url(../images/main-bg.jpg);
min-height: 100vh;
}
#home .page-title {
text-transform: none;
}
.home-content {
text-align: center;
margin-top: 10%;
}
.home-content p {
font-size: 1.125rem;
margin: 10px 0 42px;
}

お手数ですがよろしくお願い致します。

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

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

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

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

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

m.ts10806

2020/01/02 08:58

(質問は編集できます) コードはマークダウンのcode機能を利用してご提示ください https://teratail.com/help#about-markdown https://teratail-v2.storage.googleapis.com/assets/img/help/imgQuestionTips3_3_1.png?1577268946690220 「CSSフレームワーク」は本件とはどのように関係するのでしょうか? また、「うまくいかない」は誰にも何も伝えない表現方法なので、具体的に記載しましょう。 https://teratail.com/help/question-tips#questionTips3-4-1
rsu

2020/01/02 10:10 編集

初心者ということを伝える文より現状をもっと細かく伝えてください。(????こんなマークが編集画面の左上にあるのでそれを使ってください) あとコードは ```ここに言語を入力 コード ```
退会済みユーザー

退会済みユーザー

2020/01/02 17:53

すいません。。。「うまくいかない」は誰にも何も伝えない表現方法なので、具体的に記載しましょう。その通りだと思います。勉強になりました。ありがとうございます
m.ts10806

2020/01/02 21:32

質問は編集できますので適宜調整してもらえればと。そのためのこのコメント欄です
guest

回答2

0

まず、フルスクリーン関連の表示をCSSだけでやることが間違いです。
JSを使うことも考慮しなければいけません。
Appleという強敵がいますので、フルスクリーンの挙動を望む場合に、100vhという値は使えません。
「なんで?」はやめてください、「そうAppleが決めたから。」です。

以上のことを加味してちょちょいと作ると

HTmL

1<div id="home" class="big-bg"> 2 <img src="kusatu.png" id="top-baner"> 3 <header class="page-header wrapper"> 4 <h1><a href="index.html"><img class="logo" src="./images/onsen.png" alt="草津温泉ホーム"></a></h1> 5 <nav> 6 <ul class="main-nav"> 7 <li><a href="news.html">News</a></li> 8 <li><a href="menu.html">Menu</a></li> 9 <li><a href="contact.html">Contact</a></li> 10 </ul> 11 </nav> 12 </header> 13 <div class="home-content wrapper" id="target"> 14 <h2 class="page-title">草津温泉ホームページ</h2> 15 <p>草津温泉の思い出と美味しかったご飯</p> 16 <a class="button" href="menu.html">メニュー</a> 17 </div> 18</div>

CSS

1 2@charset "UTF-8"; 3 4/* 共通部分 5------------------------------- */ 6html { 7font-size: 100%; 8} 9body{ 10font-family: "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", sans-serif; 11line-height: 1.7; 12color: #432; 13} 14a { 15text-decoration: none; 16} 17img { 18max-width: 100%; 19} 20.wrapper { 21max-width: 1100px; 22margin: 0 auto; 23padding: 0 4%; 24} 25 26/* 大きな背景画像 */ 27.big-bg { 28background-size: cover; 29background-position: center top; 30background-repeat: no-repeat; 31} 32 33/* 見出し */ 34.page-title { 35font-size: 5rem; 36font-family: 'Philosopher', serif; 37text-transform: uppercase; 38font-weight: normal; 39} 40/* HOME 41------------------------------- */ 42 43#home { 44background-image: url(kusatu.png); 45position: relative; 46width: 100% 47} 48 49#home .page-title { 50 51text-transform: none; 52} 53.home-content { 54text-align: center; 55position: absolute; 56} 57.home-content p { 58font-size: 1.125rem; 59margin: 10px 0 42px; 60} 61 62.sub-title { 63font-size: 1.375rem; 64padding: 0 8px 8px; 65border-bottom: 2px #0bd solid; 66font-weight: normal; 67} 68 69/* ボタン */ 70.button { 71font-size: 1.375rem; 72background: #0bd; 73color: #fff; 74border-radius: 5px; 75padding: 18px 32px; 76} 77.button:hover { 78background: #0090aa; 79} 80 81/* iframe */ 82iframe { 83width: 100%; 84} 85 86/* HEADER 87------------------------------- */ 88.page-header { 89display: flex; 90justify-content: space-between; 91} 92.logo { 93width: 210px; 94margin-top: 14px; 95} 96.main-nav { 97display: flex; 98font-size: 1.25rem; 99text-transform: uppercase; 100margin-top: 34px; 101list-style: none; 102} 103.main-nav li { 104margin-left: 36px; 105} 106.main-nav a { 107color: #432; 108} 109.main-nav a:hover { 110color: #0bd; 111} 112

Js

1 2window.onload = function(){ 3 const home = document.getElementById('home'); 4 const target = document.getElementById('target'); 5 home.style.minHeight = window.innerHeight + 'px'; 6 target.style.top = (home.clientHeight - target.clientHeight) / 2 + 'px'; 7} 8

サンプル

投稿2020/01/03 14:43

編集2020/01/04 08:24
kyoya0819

総合スコア10429

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

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

taiyakix

2020/01/03 22:54

asuchi0819さん、codepenのサンプルがproユーザーではないので見られないのですが...
kyoya0819

2020/01/04 08:25

ご指摘ありがとうございます。 CodePenのバグのようなのでリンクの張り替えを行いました。 アクセスできますでしょうか?
taiyakix

2020/01/04 08:25

ありがとうございます。
退会済みユーザー

退会済みユーザー

2020/01/04 14:26

taiyakix様初めて質問したので使い方が分かっておらず失礼いたしました。コピペで申し訳なかったです。見直してみたら#homeと記載していたのでコピペ漏れになります。ずっとパソコンの前にいるあなたの様に早急に回答でき無かった事をお詫びします。友達や彼氏と会っていたのでご返信遅くなりました。
taiyakix

2020/01/04 22:25

私は別にずっとパソコンの前にいるわけではなく暇を持て余した中学生というだけです
guest

0

ベストアンサー

ここを見てもらったら、どうやったら書けるかわかると思います。
まず、コードはこうやって書いたほうがいいと思います。

コード

そして、cssに

css

1home { 2 3}

と書いていると思いますが、あなたが指定しているのは、id="home"なので

css

1#home { 2 3}

と書かないと意味がありません。
あと悪いんですけど、

css

1home { 2 3} 4//と 5home.page-title { 6 7}

の2つが重複しているんですけど、これはわざとですか。
そして、

html

1<img class="logo" src="./images/onsen.png" alt="草津温泉ホーム">

などと書かれても、ネイティブの画像ファイルを提示されても、codepen上で実行したところで、なんの画像かわからず、CSSも適用されないのでやめてください。

追記
ごめんなさい。きつく書いてしまったかも。でも、せめて、markdownは正しく使って欲しい。

投稿2020/01/02 09:05

編集2020/01/03 22:56
taiyakix

総合スコア427

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

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

m.ts10806

2020/01/02 12:02

#home ってマークダウンなしで書くと見出しが適用されますからね・・(teratailでよく見る現象)
taiyakix

2020/01/02 12:29 編集

確かに。
退会済みユーザー

退会済みユーザー

2020/01/02 17:55

すいません、、初心者で練習中なので重複してしまいました。お怒りごもっともだと思います。ありがとうございます。
taiyakix

2020/01/03 01:16

とりあえず編集してもらえません?
kyoya0819

2020/01/03 14:24 編集

質問者さん、SNSで愚痴るのはいいですが、まずは修正しましょう。 (某所で特定されていただけで、私が調べたわけではありません。
kyoya0819

2020/01/03 14:25

回答者さん、いくら人の話を聞かないからと言って「あんた」と言う言葉を使うことはよろしくないです。
taiyakix

2020/01/03 22:55

ごめんなさい。あなたの"な"のaが抜けてました。
退会済みユーザー

退会済みユーザー

2020/01/04 13:57

愚痴じゃないです。初めて投稿してこれが当たり前なのかな?って疑問に思ったことをSNSに投稿しただけなのですが、、
退会済みユーザー

退会済みユーザー

2020/01/04 16:16

teiyakixとりあえず敬語使ってくんない?
kyoya0819

2020/01/04 18:42 編集

質問者さん とりあえず、人の言うこと聞け、それからだ。 お前がだれにあってようが、どんな用事があろうとこっちは知ったこっちゃない。そのような書き込みはただのノイズ。 以上、特に怒っているわけではないのでご留意を m.ts10806さんが2度、rsuさんが1度注意しているので、それに従っていただければ幸いです。 (あと、私もずっとパソコンの前にいるわけではないのでそこも合わせてご理解いただければ (加えて、二重人格等々でもないのでそこも併せてご理解いただければ
taiyakix

2020/01/04 22:40

色々言いたいことがあったけど、言いたいだけいって退会するユーザーなのね。 fuck000000は。通報しようかと思ってたからちょうどいいね
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問