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

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

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

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

CSS

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

Q&A

1回答

551閲覧

Youtube動画を参考にhtml, cssでサイトを作成したら、おかしくなりました。

iceicebaby

総合スコア10

HTML

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

CSS

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

0グッド

0クリップ

投稿2022/09/26 10:03

前提

以下のような良さげなHPを見つけたので真似してみましたが、画像のように3つの画像の右側に「News」がくっついて、
「instagram」ボタンの幅もおかしくなりました。
最後の方まで来たら、「instagram」ボタンが画像に被るように成ってしまいました。
ソースも公表していないので、どこが悪いのかわかりません。
分かる方教えて下さい。
これをなんとか作って、ポートフォリオに付け加えたいので、よろしくお願い致します。

html編
https://www.youtube.com/watch?v=GldVF-XuxOU&list=PLxrakBOjpR8hr4l_VvBaA6vMv4xgD84QU&index=47&ab_channel=KawaiShotaro%2F%E6%B2%B3%E7%9B%B8%E5%8B%9D%E5%A4%AA%E9%83%8E

css編
https://www.youtube.com/watch?v=XlNPebwSCpo&list=PLxrakBOjpR8hr4l_VvBaA6vMv4xgD84QU&index=46&ab_channel=KawaiShotaro%2F%E6%B2%B3%E7%9B%B8%E5%8B%9D%E5%A4%AA%E9%83%8E

イメージ説明

実現したいこと

ここに実現したいことを箇条書きで書いてください。

  • ▲▲機能を動作するようにする

発生している問題・エラーメッセージ

エラーメッセージ

該当のソースコード

html

1<!DOCTYPE html> 2<html lang="ja"> 3 4 <head> 5 <meta charset="utf-8"> 6 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 7 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 8 <title>CHILLOUT - COFFEE & FOOD</title> 9 <!--25.36~ https://www.youtube.com/watch?v=XlNPebwSCpo&ab_channel=KawaiShotaro%2F%E6%B2%B3%E7%9B%B8%E5%8B%9D%E5%A4%AA%E9%83%8E --> 10 <meta name="discription" content="おしゃれなカフェのサイトです"> 11 <link rel="stylesheet" href="css/format.css"> 12 <link href='https://fonts.googleapis.com/css?family=Oswald' rel='stylesheet'> 13 14 15 </head> 16 17 <body> 18 <h1>CHILLOUT<br><span>COFFEE & FOOD</span></h1> 19 20 <ul class="globalNavi"> 21 <li>HOME</li> 22 <li>NEWS</li> 23 <li>CONCEPT</li> 24 <li>MENU</li> 25 <li>ACCESS</li> 26 <li>RESERVE</li> 27 </ul> 28 29 <div class="mainImage"> 30 <img src="images/main.jpg"> 31 </div> 32 33 <div class="aboutSection"> 34 <h2 class="hStyle">お店について<br><span>ABOUT</span></h2> 35 <ul> 36 <li> 37 <img src="images/about01.jpg"> 38 <h3>CAFE</h3> 39 <p>ゆったりとした時間の流れるカフェテリア</p> 40 </li> 41 <li> 42 <img src="images/about02.jpg"> 43 <h3>SWEETS</h3> 44 <p>パティシエ特性のオリジナルスイーツ</p> 45 </li> 46 <li> 47 <img src="images/about03.jpg"> 48 <h3>BOOK</h3> 49 <p>洋書専門のブックストアを併設</p> 50 </li> 51 </ul> 52 </div> 53 54 <div class="newsSection"> 55 <h2 class="hStyle">お知らせ<br><span>NEWS</span></h2> 56 <table> 57 <tr> 58 <th>2020.02.15</th> 59 <td>4/1はお休みさせていただきます</td> 60 </tr> 61 <tr> 62 <th>2020.02.10</th> 63 <td>新しい本を入荷しました</td> 64 </tr> 65 <tr> 66 <th>2020.02.01</th> 67 <td>リニューアルオープンしました</td> 68 </tr> 69 </table> 70 </div> 71 72 <div class="instagramBt"> 73 <a href="#">INSTAGRAM</a> 74 </div> 75 76 <div class="copyright"> 77 <p>2020 CHILLOUT COFFEE & FOOD</p> 78 </div> 79 <body> 80</html>

該当のソースコード

css

1body { 2 padding-top: 50px; 3 padding-bottom: 50px ; 4} 5 6h1 { 7 text-align: center; 8 font-size: 40px; 9 font-family: 'Oswald', sans-serif; 10 font-weight: normal; 11 letter-spacing: 1px; 12 line-height: 25px; 13} 14h1 span { 15 font-size: 15px; 16} 17.globalNavi { 18 text-align: center; 19 margin-bottom: 10px; 20} 21 22 23 24.globalNavi li { 25 display: inline-block; 26 margin-right:40px ; 27 font-family: 'Oswald', sans-serif; 28 font-size: 19px; 29 letter-spacing: 1px; 30} 31 32.globalNavi li:last-child { 33 margin-right: 0; 34} 35 36.mainImage { 37 width: 1000px; 38 margin-right: auto; 39 margin-left: auto; 40 margin-bottom: 50px; 41} 42 43.mainImage img { 44 width: 100%; 45 height: auto; 46} 47 48.aboutSection, 49.newSection { 50 width: 1000px; 51 margin-right: auto; 52 margin-left: auto; 53 margin-bottom: 50px; 54} 55 56.hStyle { 57 text-align: center; 58 font-size: 11px; 59 margin-bottom: 40px; 60 line-height: 25px; 61} 62 63.hStyle span { 64 font-size: 35px; 65 font-family: 'Oswald', sans-serif; 66 border-bottom: 2px solid #000000; 67} 68 69.aboutSection ul { 70 overflow: hiddden; 71 padding: 0; 72} 73 74.aboutSection li { 75 float: left; 76 list-style: none; 77 width: 32%; 78 margin-right: 2%; 79} 80 81.aboutSection li:last-child { 82 margin-right: 0; 83} 84 85.aboutSection li img { 86 width: 100%; 87 height: auto; 88} 89 90.aboutSection h3 { 91 font-size: 25px; 92 font-family: 'Oswald', sans-serif; 93 font-weight: nomal; 94 margin: 0; 95 letter-spacing: 1px; 96} 97 98.aboutSection p { 99 font-size: 14px; 100 margin: 0; 101 letter-spacing: 1px; 102} 103 104.newSection table { 105 width: 100%; 106 border-top: 10px; 107} 108 109.newSection th { 110 font-family: 'Oswald', sans-serif; 111 font-weight: nomal; 112 font-size: 14px; 113 border-bottom: 1px; solid #dddddd; 114 padding-bottom: 15px; 115 padding-top: 15px; 116 width: 10%; 117 118} 119 120.newSection td { 121 font-size: 14px; 122 border-bottom: 1px; solid #dddddd; 123 padding-bottom: 15px; 124 padding-top: 15px; 125 width: 90%; 126} 127 128.instagramBt { 129 width="200px"; 130 margin-right: auto; 131 margin-left: auto; 132 margin-bottom: 30px; 133} 134 135.instagramBt a { 136 background: #000000; 137 color: #ffffff; 138 display: block; 139 text-align: center; 140 padding-top: 15px; 141 padding-bottom: 15px; 142 text-decoration: none; 143 border-radius: 4px; 144 font-family: 'Oswald', sans-serif; 145 font-weight: nomal; 146} 147 148.copyright { 149 text-align: center; 150 font-size: 11px; 151}

試したこと

ここに問題に対して試したことを記載してください。

補足情報(FW/ツールのバージョンなど)

ここにより詳細な情報を記載してください。

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

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

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

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

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

guest

回答1

0

HTMLもCSSも文法的に間違っているものが沢山あります(CSSは致命的なものもある)。

以下のような文法チェックサービスを利用するか、
http://www.htmllint.net/html-lint/htmllint.html#
https://jigsaw.w3.org/css-validator/#validate_by_input

文法チェック機能のあるテキストエディタを利用してください。

以下のような良さげなHPを見つけたので真似してみましたが

もしそのままを再現しようとしているなら、それはポートフォリオとして不適当です。
「作品集」なのでオリジナルのものでないといけませんし、バレます。

※そうでなくても明らかな構文間違いに気づかない状態で本当にポートフォリオ公開できるレベルなのか?
よく考えてみてください。コピペや真似をするなとは言いませんが、基礎がある程度できていることと、コピペ元のコードが理解できていることが大前提です

想定のレイアウトを目指すのも構文間違いがなくなってからようやくスタートラインです。
※つまり、構文間違いを全てなくしたらからと、想定のレイアウトが出来上がるわけではない

投稿2022/09/26 10:34

編集2022/09/26 11:03
m.ts10806

総合スコア80850

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.48%

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

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

質問する

関連した質問