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

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

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

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

CSS

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

受付中

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

iceicebaby
iceicebaby

総合スコア10

HTML

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

CSS

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

1回答

0リアクション

0クリップ

306閲覧

投稿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

<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CHILLOUT - COFFEE & FOOD</title> <!--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 --> <meta name="discription" content="おしゃれなカフェのサイトです"> <link rel="stylesheet" href="css/format.css"> <link href='https://fonts.googleapis.com/css?family=Oswald' rel='stylesheet'> </head> <body> <h1>CHILLOUT<br><span>COFFEE & FOOD</span></h1> <ul class="globalNavi"> <li>HOME</li> <li>NEWS</li> <li>CONCEPT</li> <li>MENU</li> <li>ACCESS</li> <li>RESERVE</li> </ul> <div class="mainImage"> <img src="images/main.jpg"> </div> <div class="aboutSection"> <h2 class="hStyle">お店について<br><span>ABOUT</span></h2> <ul> <li> <img src="images/about01.jpg"> <h3>CAFE</h3> <p>ゆったりとした時間の流れるカフェテリア</p> </li> <li> <img src="images/about02.jpg"> <h3>SWEETS</h3> <p>パティシエ特性のオリジナルスイーツ</p> </li> <li> <img src="images/about03.jpg"> <h3>BOOK</h3> <p>洋書専門のブックストアを併設</p> </li> </ul> </div> <div class="newsSection"> <h2 class="hStyle">お知らせ<br><span>NEWS</span></h2> <table> <tr> <th>2020.02.15</th> <td>4/1はお休みさせていただきます</td> </tr> <tr> <th>2020.02.10</th> <td>新しい本を入荷しました</td> </tr> <tr> <th>2020.02.01</th> <td>リニューアルオープンしました</td> </tr> </table> </div> <div class="instagramBt"> <a href="#">INSTAGRAM</a> </div> <div class="copyright"> <p>2020 CHILLOUT COFFEE & FOOD</p> </div> <body> </html>

該当のソースコード

css

body { padding-top: 50px; padding-bottom: 50px ; } h1 { text-align: center; font-size: 40px; font-family: 'Oswald', sans-serif; font-weight: normal; letter-spacing: 1px; line-height: 25px; } h1 span { font-size: 15px; } .globalNavi { text-align: center; margin-bottom: 10px; } .globalNavi li { display: inline-block; margin-right:40px ; font-family: 'Oswald', sans-serif; font-size: 19px; letter-spacing: 1px; } .globalNavi li:last-child { margin-right: 0; } .mainImage { width: 1000px; margin-right: auto; margin-left: auto; margin-bottom: 50px; } .mainImage img { width: 100%; height: auto; } .aboutSection, .newSection { width: 1000px; margin-right: auto; margin-left: auto; margin-bottom: 50px; } .hStyle { text-align: center; font-size: 11px; margin-bottom: 40px; line-height: 25px; } .hStyle span { font-size: 35px; font-family: 'Oswald', sans-serif; border-bottom: 2px solid #000000; } .aboutSection ul { overflow: hiddden; padding: 0; } .aboutSection li { float: left; list-style: none; width: 32%; margin-right: 2%; } .aboutSection li:last-child { margin-right: 0; } .aboutSection li img { width: 100%; height: auto; } .aboutSection h3 { font-size: 25px; font-family: 'Oswald', sans-serif; font-weight: nomal; margin: 0; letter-spacing: 1px; } .aboutSection p { font-size: 14px; margin: 0; letter-spacing: 1px; } .newSection table { width: 100%; border-top: 10px; } .newSection th { font-family: 'Oswald', sans-serif; font-weight: nomal; font-size: 14px; border-bottom: 1px; solid #dddddd; padding-bottom: 15px; padding-top: 15px; width: 10%; } .newSection td { font-size: 14px; border-bottom: 1px; solid #dddddd; padding-bottom: 15px; padding-top: 15px; width: 90%; } .instagramBt { width="200px"; margin-right: auto; margin-left: auto; margin-bottom: 30px; } .instagramBt a { background: #000000; color: #ffffff; display: block; text-align: center; padding-top: 15px; padding-bottom: 15px; text-decoration: none; border-radius: 4px; font-family: 'Oswald', sans-serif; font-weight: nomal; } .copyright { text-align: center; font-size: 11px; }

試したこと

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

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

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

以下のような質問にはリアクションをつけましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

リアクションが多い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

まだ回答がついていません

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

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

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

ただいまの回答率
86.12%

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

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

質問する

関連した質問

同じタグがついた質問を見る

HTML

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

CSS

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