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

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

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

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

HTML

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

Q&A

解決済

3回答

5264閲覧

上部に固定ヘッダー

ryohasegawa

総合スコア437

HTML5

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

HTML

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

0グッド

0クリップ

投稿2016/09/04 06:07

編集2016/09/04 12:06

すべてのページの上部に固定ヘッダーを付けたいのですが、ヘッダーを変えた際(デザインなど)ページを一つ一つ作りなおすのは大変なので、ヘッダーのHTMLをすべてのページで呼び出したいんですが、どう記述すればいいですか?
index.htmlのファイルの上部にheader.htmlを持ってきて固定にしたいです。

html

1<iframe id="header" src="ヘッダー/header.html" height="70" width="100%">

css

1#header{ 2 position: fixed; 3}

と書いたんですが、こうすると、ファイルが呼び出されはするんですが、index.htmlの文字が表示されなくなります。

またposition: fixedを使えばいいと教えてもらったんですが、どのように使えばいいいんでしょうか?

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

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

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

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

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

guest

回答3

0

現状、htmlにhtmlをincludeするような方法はありません。
SSIを使うかjavascriptで読み込んで追加するか、そんな感じになると思いますが。

漠然としているので、もうちょっと詳しく書くか、ご自身でやってみた結果、分からないことを書込んでください。

投稿2016/09/04 06:25

shi_ue

総合スコア4437

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

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

ryohasegawa

2016/09/04 07:05

自分でやるにも、やり方がわからないので出来ない状況にあります。
shi_ue

2016/09/04 07:28

残念ながら、一からhtmlを教えるような感じになるので、もう少しご自身で努力されてみてください。
ryohasegawa

2016/09/04 07:39

ちなみにこのページも上部に固定されてますよね?
shi_ue

2016/09/04 07:45

そうですね。Chromeのデベロッパーツールなどでどんな風になっているか見てみてください。 cssでposition: fixedが付いています。
ryohasegawa

2016/09/04 08:43

position: fixedなるほど、SCCで場所指定してあるんですか。
guest

0

ベストアンサー

HTML

1<iframe id="header" src="ヘッダー/header.html" frameborder="no"></iframe>

CSS

1#header{ 2 position: fixed; 3 height: 70px; 4 width: 100%; 5}

投稿2016/09/04 12:13

kei344

総合スコア69366

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

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

ryohasegawa

2016/09/04 12:27 編集

なんか上手いこと行きそうなんですが、`index.html`のファイルの上部(読み込んだヘッダー)と被ってる部分が見えないんですが、これはどのように対処すればいいですか? 解決しました。CSSでpadding-top: 70px;を記述すればよかったですね
ryohasegawa

2016/09/04 12:28

質問いいですか? frameborder="no" はどのような意味なのでしょうか?
kei344

2016/09/04 12:43

ボーダーを消しています。 質問を追加せずに、新たに質問するようにしてください。上部に固定ヘッダーが出たなら、ひとまず「解決済」にしてください。
guest

0

CSSのposition: fixed;が邪魔をしていたみたいでした。消してみたら上手いこと表示されました。
回答頂いた方ありがとうございました。

投稿2016/10/02 11:34

ryohasegawa

総合スコア437

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問