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

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

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

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

CSS

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

解決済

ヘッダー高さを均一にしたい

yamaneko0210
yamaneko0210

総合スコア2

HTML

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

CSS

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

2回答

0リアクション

0クリップ

1106閲覧

投稿2020/10/05 08:59

編集2020/10/06 08:15
ここに言語を入力 ``` コード ```ヘッダー右側(コードではheader-right)の4つの項目の高さを揃えようとすると、全体が動いてしまい タイボグラフィーだけ少しずれてしまいます。 超初心者で初歩的なミスを犯していると思いますが解決策がわかりません。どうかご教授よろしくお願い申し上げます。 ![イメージ説明](41372741e6a1d0bd435fd0abc907c0de.png) css添付しています。 ```/* html5doctor.com Reset Stylesheet v1.6.1 Last Updated: 2010-09-17 Author: Richard Clark - http://richclarkdesign.com Twitter: @rich_clark */ html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video { margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent; } body { line-height:1; } article,aside,details,figcaption,figure, footer,header,hgroup,menu,nav,section { display:block; } nav ul { list-style:none; } blockquote, q { quotes:none; } blockquote:before, blockquote:after, q:before, q:after { content:''; content:none; } a { margin:0; padding:0; font-size:100%; vertical-align:baseline; background:transparent; } /* change colours to suit your needs */ ins { background-color:#ff9; color:#000; text-decoration:none; } /* change colours to suit your needs */ mark { background-color:#ff9; color:#000; font-style:italic; font-weight:bold; } del { text-decoration: line-through; } abbr[title], dfn[title] { border-bottom:1px dotted; cursor:help; } table { border-collapse:collapse; border-spacing:0; } /* change border colour to suit your needs */ hr { display:block; height:1px; border:0; border-top:1px solid #cccccc; margin:1em 0; padding:0; } input, select { vertical-align:middle; } body { font-size: 15px; font-family: Georgia, 游明朝, YuMincho, "Hiragino Mincho ProN", Meiryo, serif; line-height: 1.8; } a { text-decoration: none; color: #444444; } ul{ list-style: none; } header{ height: 152px; margin-top: 50px; width:100%; } .container{ width: 1040px; margin: 0 auto; } .header-left{ float:left; } .header-left h1{ font-size: 36px; line-height: 48px; } .header-left p{ font-size: 18px; } .header-right{ padding-top: 42px; float:right; } .fas{ margin-left: 10px; } .gnav li{ float:left; font-size: 16.88px; padding:0 15px; position: relative; } .gnav li ul{ position: absolute; top:45px; left: -5px; height: 0; visibility: hidden; } .gnav li a{ display: block; padding-bottom: 14px; } .gnav li li{ width: 200px; border: solid 1px #f0f0f0; padding:10px 20px 0 20px; box-shadow: 0.5px 0.5px #f0f0f0; background-color: white; opacity: 0; transition: all 0.3s; } .gnav li:hover ul li{ visibility: visible; opacity: 1; } .gnav li a:hover{ color: #c49029; } .gnav{ padding: 0 200px 0 0; } .search-wrapper{ height: 40px; display: inline-block; float: right; position: relative; } .search{ height: 34px; width: 0; background: url(icons8-search-50.png) left center no-repeat; background-size: 26px 26px; padding-left: 30px; font-size: 16px; border: 1px solid #e0e0e0; position: absolute; right: 0; top:-5px; outline: none; border: none; cursor: pointer; transition: 0.5s; } .search:focus{ width: 210px; height: 34px; border: 1px solid #e0e0e0; background-color: white; cursor: text; } .top-wrapper{ height: 780px; background-color: pink; } .top-wrapper p{ font-size: 27px; color: #777777; padding-top: 90px; } .main-wrapper{ height: 1440px; } .main-wrapper .container{ border-bottom: 1px solid #ccc; padding-bottom: 150px; } .date{ float: left; margin-right: 220px; font-size: 16.8px; color: #999999; padding-top: 10px; opacity: 0.5; } .date:hover{ opacity: 1; } .textarea{ width: 700px; display: inline-block; } .text-heading{ color: #111111; font-size: 22.4px; padding-bottom: 20px; } .text-heading a:hover{ color: #C49029; } .text{ font-size: 16.8px; color: #666666; } .text-box{ padding-bottom: 60px; } .page-list li{ float: left; font-size: 16.8px; color: #777777; display: inline-block; border: 1px solid #ccc; padding: 8px 18px; margin-left: 6px; opacity: 0.5; } .page-list li:hover{ opacity: 1; } .page-list{ margin-left: 320px; } .page-list .this{ background-color: #EEEEEE; color: #333333; opacity: 1; } .profile-wrapper{ height: 460px; } .profile-wrapper .container{ border-bottom: 1px solid #ccc; height: 380px; } .photo{ border-radius: 50%; width: 100px; height: auto; float: left; } .profile{ width: 300px; float: left; } .profile-text{ color: #666666; font-size: 16.8px; width: 260px; } .profile-heading{ font-size: 19px; padding: 20px 0 40px 20px; display: inline-block; } .fab{ color: #666666; padding-right: 10px; opacity: 0.7; } .fab:hover{ opacity: 1; transition: 0.5s; } .sub{ float: left; width: 210px; margin-left: 35px; } .sub-heading{ font-size: 14.4px; padding-bottom: 35px; } .sub-text{ font-size: 15.8px; color: #666666; } .sub li a{ font-size: 16.9px; color: #666666; text-decoration: underline; } .sub li a:hover{ color: #c49029; } .sub1 p{ font-size: 14.6px; color: #666666; padding-bottom: 10px; } .sub2 li{ padding-bottom: 10px; } .sub-input{ margin-top: 85px; height: 40px; width: 220px; border: 1px solid #e0e0e0; } ::placeholder{ padding-left: 5px; color: #777777 } footer{ height: 115px; } .footer-icon{ float: left; } .footer-logo{ text-align: center; color: #666666; font-size: 15.8px; } コード ```

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

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

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

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

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

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

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

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

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

kuma_kuma_

2020/10/05 09:04

cssまたはstyleの内容の追記をお願いします。
m.ts10806

2020/10/05 09:14

>※初心者ですみません 「初心者アイコン」を質問につけられるのでタイトルや本文に書く必要はありません。 質問は編集できますので適宜追加・編集してください。

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

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

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

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

ただいまの回答率
86.12%

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

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

質問する

関連した質問

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

HTML

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

CSS

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