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

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

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

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

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

CSS

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

Q&A

解決済

2回答

1013閲覧

HTMLで初期ロードを綺麗に見せる良い方法はありませんか?

hasshy

総合スコア102

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

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

CSS

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

0グッド

0クリップ

投稿2018/11/07 11:32

編集2018/11/07 11:59

画像要素が多いサイトの場合、
面がキービジュアルや商品画像などの大きい画像やパーツのような小さな画像無造作に置かれているように見えます。
一瞬だけなのですが、結構圧迫感が出てしまいます。

私の場合、下記のように処理でマスクして、用意ができたら外すという処理をしていました。
(考え方が古くて恐縮ですが)jsを使わないユーザーの対策をしろと言われた時代からの名残です…。

  1. document.ready()の段階で全体に単色divを展開。
  2. window.onload()でそのDivを隠す

document.readyでマップをかけるため、かける数秒前の要素は見えてしまいごちゃごちゃしてしまいます、

しかし、色々なサイトを見ても最初にごちゃごちゃしていません。
最初にマスクをする事も考えるのですが、サイトに関係ない要素を置くのはいいのかなと、ひねくれた事を考えてしまいがちですが、
実際のところはどのように実装しているのでしょうか?

vueやreactのようなヴァーチャルドムはできそうですが、静的に書いたHTMLでそういう事をやる場合はどうするのが良いのでしょうか?

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

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

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

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

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

maisumakun

2018/11/07 11:41

「初期画面がごちゃごちゃしてしまいます。」とありますが、具体的にどのような状況を「ごちゃごちゃ」と表現していますでしょうか。
hasshy

2018/11/07 11:51

ご返答ありがとうございます。キービジュアルやサイト内で使う大きな画像が出てきたり、ボタン等の要素が出てきたりしてしまう状態です。追記させていただきます。
guest

回答2

0

ベストアンサー

imgタグで画像を指定しているならwidthやheightで正しいサイズを指定し
altを記載しておけばロード後にずれることはなくなるでしょう

投稿2018/11/07 11:58

yambejp

総合スコア114572

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

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

hasshy

2018/11/07 12:06

ありがとございます。 ロード後はスタイルが当たるので問題ありません。 ただ、ロードのタイミングに一瞬画像が見えるのを気にされる方がいて、 しょうがないかなと…と思う反面、もし、方法があればお伺いしたいです。
think49

2018/11/07 13:00

width属性、height属性はロード前から有効です。
hasshy

2018/11/07 13:47

なるほどですね。
guest

0

  1. 隠しておきたい領域をdivで囲み、そのdivを最初は非表示とする。
  2. window.onload()で、上記のdivを表示する。

上記のやり方ですと、現在のマスクをかけているやり方と近い動きになるかと思います。
ただ、自身の環境で検証したところ、Handsontableで生成しているテーブルの描画がおかしくなりました。(Handsontableでテーブルを生成する前に、div要素を表示すれば、大丈夫でした。)

検証の際は、少し注意をお願いします。
静的に書いたHTMLとのことですので、大丈夫だとは思いますが。

投稿2018/11/07 12:49

ZeroultR2

総合スコア27

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問