- ベストアンサー
HTMLとCSSで軽いWEBサイトを作るには？
HTMLとCSSでWEBサイトを作ったのですが、 読み込みに時間がかかることがあります。 画像をいれたりしてないのになぜこんなに重いかわかりません。 どのようなことに気を付ければ読み込みの早いWEBサイトがつくれますか？ HTMLやCSSで読み込みが遅くならないサイト作りのアドバイスを よろしくお願いいします。(*´ω｀)
- tasukete2018
- お礼率86% (7024/8149)
- CSS
- 回答数7
- ありがとう数7
- みんなの回答 （7）
- 専門家の回答
質問者が選んだベストアンサー
>回答ありがとうございます。 >自分のサイトにここでリンク張ると >質問が削除されるはずなので >リンクは張れないですが そうなんですね。 それは失礼しました。 具体的なリンクを求めた理由として、htmiとcssだけで構成されたページであれば、重いはずはない。と言うのがまず第一の考えなので、その確認のためです。 >一般論としてサイトが重くなるCSSやHTMLのタグがあれば教えてほしいです。 基本的なWebページの表示の仕組みがわからないってことですね。 まずは、ページのURLに対してサーバーにリクエストする。 サーバーがそのリクエストに対してレスポンスする。 その後、CSSや画像などのメディアファイルの参照があれば、一つ一つサーバーにブラウザからリクエストが行って、レスポンスがあったものが表示される。 簡単に言うとこれだけです。 JavaScript等もなければ、ブラウザは単純処理だけで負荷も少ないので、速さに影響されるのは、データサイズと参照するメディアの数とそのデータサイズのみと言う事になります。 htmlとcssについては、単なるテキストデータなので、よほど無駄な記述がない限り、この容量が要因で重くなることは考えづらいです。 >自分は画像やテーブルタグなどを多用すると重くなるようなイメージがありました。 画像は上記の理由、テーブルタグはレンダリングに負荷がかかるのか実験したわけではないですが、テキストデータに軽さを求めても、期待できる軽量化はないですね。 >CSSについてはあまり知識がないのでよくわかりません。 >テキストのデコレーションやページレイアウトなどに CSSをつかっているのでそのせいかなぁとも思うのですが、 クライアントのスペックが貧弱なんじゃないでしょうか。クライアント側の要因で重くなることを感じることはないと思います。
その他の回答 (6)
- t_ohta
- ベストアンサー率38% (5078/13270)
＞ DNSサーバーは光ファイバーのプロバイダーで使っているものいがいに変えられるものなのですか？ Google Public DNS や 1.1.1.1 や IIJ Public DNSサービスと言ったパブリックDNSサービスがあります。 応答の速さや安全性の高さを売りしているサービスになります。
お礼
回答ありがとうございます。 そういうのがあるのですね。 (*´ω｀) 勉強になりました。
- t_ohta
- ベストアンサー率38% (5078/13270)
＞ HTMLやCSSでページを軽くするのを行う以外に ＞ 具体的な方法が思い浮かばないのですが、 ＞ どのようにやるのでしょうか？ サイト管理者が出来るのはサーバのリソースをチェックしてボトルネックが無いか確認し、サーバOSやHTTPサーバソフトのチューニングを行ったり、ネットワークを高速なモノに変えるくらいですかね。 ユーザー側として出来るのは高速な回線でインターネットに接続するとか、PCやスマホを高性能なモノにするとか、動作が軽いブラウザに変えるとかですかね。 あと、DNSサーバを高速なサービスに接続するようにするという手もありますね。
お礼
回答ありがとうございます。 自分が運営しているサイトの運営者としてですが、 レンタルサーバーのWEBスペースなので たいしてできることがないかなぁという印象です。 このサイトをみるユーザーの立場からすると 高速回線をwi-fiで使ったりというのぐらしか思いつかばないのですが、 DNSサーバーは光ファイバーのプロバイダーで使っているものいがいに変えられるものなのですか？ (;^ω^)
- t_ohta
- ベストアンサー率38% (5078/13270)
サイトの表示に掛かる時間は ・DNS正引き処理 ・ブラウザとサーバのネゴシエーション ・サーバのリクエスト処理 ・サーバからのデータ転送 ・ブラウザのレンダリング処理 の何処で時間が掛かっているかで対策が違います。 いくらHTMLやCSSでサイトのデータそのモノを軽くしても、サーバ自体の処理速度が遅ければネゴシエーションやリクエストの処理に時間が掛かりますし、通信経路にボトルネックがあればデータ転送に時間が掛かります。 ブラウザの処理が重かったりPCやスマホの処理能力が低ければレンダリングに時間が掛かって表示されるまで待たされます。 何処に原因があるのか一つずつ潰していくしかありません。
お礼
回答ありがとうございます。 具体的にはどのような作業をしていけばいいですか？ HTMLやCSSでページを軽くするのを行う以外に 具体的な方法が思い浮かばないのですが、 どのようにやるのでしょうか？ ((+_+)) アドバイスいただけると幸いです。
- dragon-man
- ベストアンサー率19% (2701/13651)
＞PCで自分のサイトを見ると サクサク表示されるのですが、 スマホだとえらい時間がかかります。 そうであればサーバの問題ではなくスマホの問題です。WiFiの通信速度が遅いのでしょう。
お礼
回答ありがとうございます。 スマホやタブレットはPCと同じwi-fiで つないだ場合でも スマホやタブレットでの表示は遅くなります。 スマホでほかのヤフーやグーグルなどのサイトを 表示する場合は素早く表示されます。 ((+_+)) なぞです。
- dragon-man
- ベストアンサー率19% (2701/13651)
「読み込み時間」（ブラウザのレスポンス）はWebサーバが使っている帯域に依存します。広帯域を割り当てているサーバなら早くなるでしょう。どんなサーバをお使いですか。
お礼
回答ありがとうございます。 無料サーバーの忍者サーバーとFC2を使っています。 PCで自分のサイトを見ると サクサク表示されるのですが、 スマホだとえらい時間がかかります。 これは、自分のサイトがマイナーな過疎地みたいな 扱いなのでスマホだと表示が遅いみたいな理由なのでしょうか？ 画像とかほとんどつかっていないのですが なぜかスマホだと表示が遅いです。 CSSで入れ子のようにソース組んでるからそのせいか とも思うのですが、なぜだか理由がよくわかりません。 ((+_+))
- okwavey6
- ベストアンサー率17% (99/553)
見えないものに対してアドバイスのしょうがないです。
お礼
回答ありがとうございます。 自分のサイトにここでリンク張ると 質問が削除されるはずなので リンクは張れないですが 一般論としてサイトが重くなるCSSやHTMLの タグがあれば教えてほしいです。 自分は画像やテーブルタグなどを多用すると 重くなるようなイメージがありました。 CSSについてはあまり知識がないのでよくわかりません。 テキストのデコレーションやページレイアウトなどに CSSをつかっているのでそのせいかなぁとも思うのですが、 謎です。((+_+))
関連するQ&A
- 簡素化したHTMLを書けるようCSSを勉強中です
出来るだけ簡素化したHTMLを書けるよう、CSSを勉強中なのですが、今はドリームウィーバーのCS5.5なのですが、ホームページビルダーでホームページ作りを勉強し始めたため、どうしてもホームページビルダーの癖が出てしまいますし、ＣＳＳの云わんとするところは理解出来るのですが、「じゃあ具体的にどうしたらいいの？！」ってなってしまいます。 具体的には、ＨＴＭＬだけで、TABLEを多重化させ書いていたページを、見た目を変えずに、ＴＡＢＬＥを使わずに、HTML（出来ればＸＨＴＭＬ）＋ＣＳＳ（外部ファイル）でweb2.0で書くとどうなるかとか、 画像のロールオーバーを≪<body onload=≫で書いていたのを同じくHTML（出来ればＸＨＴＭＬ）＋ＣＳＳ（外部ファイル）で書くとどうなるかとか、比較してあると「私は」分かりやすいのですが、そういうサイトをなかなか探し出せないでいます。 こういう事を比較して書いてあるサイトがありましたら、教えて頂きたいです。 また、検索エンジン最適化（Search Engine Optimization、SEO）にもＣＳＳは有効だという事ですが、≪<meta name="Keywords" content=≫等は、ＨＴＭＬファイルに書くか、ＣＳＳファイルに書いた方が良いのか、ＣＳＳに書くなら書き方は同じで良いのか等、分からない事だらけです。 よろしくお願いします。
- 締切済み
- CSS
- HTML、CSSについて
アメーバブログをやっています。 ＣＳＳの使用の仕方を覚えたくて、 いろいろやり方を調べてるんですけど、 教えてgooで検索すると、 「まずHTMLタグから覚えるとよいでしょう。」 と、回答者さんがよく答えています。 CSS＝ブログのデザインなどを細かいところまで自己流に改造する。 だと思うんですけど、 HTML＝？？？？？ HTML、HTMLタグとはなんなんですか？？ そして、読みかたは？？ 「エイチティーエムエル」ですか？ HTMLとは何をするもので、 どういうものですか？？ HTMLの例か、 HTMLの仕方（？） が詳しく載っているサイトを教えてください。 あと、CSSは 変えたいところ 英語でヘッダーと書いてあるところのあとに、 画像のURLを入力するだけでいいんですか？？ 詳しく教えて下さい。 お願いします
- ベストアンサー
- ブログ
- HTML・cssを使いこなせないとダメでしょうか？
サイトを使ってアフィリエイトで稼ぎたいのなら HTML・cssを使いこなせないとダメでしょうか？ アフィで稼ぐことを頑張る前にまずはサイト作りのお勉強をしないとダメですか？
- ベストアンサー
- インターネットビジネス
- HTMLやＸＨＴＭＬやＣＳＳ
HTMLやＸＨＴＭＬやＣＳＳについてわかりやすく書かれている入門書みたいなのはあるでしょうか？？ Web標準の教科書―XHTMLとCSSでつくる“正しい”Webサイトを見たのですが、難しくて頭がついていきませんでした。 こんな私でも理解できるようなのを探しています。よろしくお願いします。
- ベストアンサー
- その他（インターネット・Webサービス）
- HTML5＋CSS3 でしかできないこと
長年、趣味や一部仕事で XHTML+CSS のサイトを作っています。 数年前から、サイト内にCGIを入れたり、色んな動きを楽しむため javascriptを導入してサイト作成を楽しんでいたりもします。 言語も html css javascript jquery php など、色々楽しみながら勉強してきました。 ほんの数年前から、HTML５＋CSS３ が登場しましたが、 様子を見ていると、どんどん独創的なサイトが出てきています。 スマートフォン用のサイトも作れるようになりたいな、と思っていましたが ようやく重い腰を上げて作業に取り掛かろうと思っています。 そこで質問なのですが、HTML5＋CSS3で作られたサイトで まるでjavascriptで制御されたような軽快なスクロールや動きが散見されます。 こうしたサイトを見ると、javascriptで動かしているのかHTML5で動かしているのか 判別がつきません。 HTML5やCSS3で新しく実装された機能については、ネットで調べると色々出てきます。 例えば、リンクタグをブロック要素化することが簡単になったとか、 角が丸い四角形を充てることができるようになったとか、電話番号をタップすると 「通話」ボタンが出るようになったとか、個別の機能についてはなんとなく把握しました。 しかし、「HTML5+CSS3で作られたサイト全体」で見ると、 いまいちピンと来ないのです。 そこで、お詳しい方に是非、以下のような形で 教えてもらえたらと思い、投稿しました。 ------------------------------------- 実際にHTML5+CSS3で作られたサイトを基に、 どこをどのように設定したのかを見せて欲しい ------------------------------------- 例えば、 http://www.hotakubo-seikei.com/ は、ソースを見るとHTML５で作られていますが（section タグや header タグがありますね） XHTML+CSSでサイトを長年作ってきた人間からすると、 どうしてこんなサイトができるのか全く分からないのです。 javascriptもいくつか利用されていますが、どれがjavascriptによるもので どれがHTML5+CSS3によるものなのかわかりません。 また、一番驚いたのが、サイトの構成です。 サイト全体の横幅が無く全画面表示になっており、 ３カラムで、縦スクロールするとディレクトリが変わるなんて XHTML+CSSの常識では考えられません。 もちろん、デザイナーによるデザインでこうなったと言ってしまえばそれまでですが、 それを実装できていることに感動しているのです。 ↑↑↑ こんな感じで、何かサンプルサイトを基に XHTML+CSSとの違いや、HTML5+CSS3だからこそ実現できることを 分かりやすく教えてもらえたらとても有難いです。 サンプルサイト付きで、なるべく詳しく教えて頂いた方に ポイントを付与させていただきたいと考えております＾＾ どうぞ宜しくお願い致します！
- ベストアンサー
- その他（インターネット・Webサービス）
- HTML5の普及状況を教えて下さい。
Webサイト作りの初心者です。 最近、覚えたことを自分なりに整理してみました。 そこで、気になることがありますので、以下にご質問を致します。 現在、Webサイトは一般的にHTML4.01で書かれていると思いますが、W3Cが近い将来に正式勧告するであろうと言われているHTML5の普及状況はどうなっているのでしょうか？ どこかのサイトで見たのですが、すでに一部ではありますがHTML5で作られたWebサイトがあるようです。ちなみに、このHTML5で作られたWebサイトは、どんなユーザエージェント（ブラウザ、スマホ、携帯）にも対応しているのでしょうか？いや、というよりも、ユーザエージェントがHTML5に対応しているのでしょうか・・・逆かな？ どんなユーザエージェントでもHTML5で作られたWebサイトが見れるなら、HTML4.01じゃなくてHTML5でWebサイト作りを学習したほうがいいのかなと思いまして。 あとCSSについてですが、現在、一般的に使われているのはCSS2.1だと思いますが、W3CはHTML4.01からHTML5の勧告と同時期にCSS2.01からCS3.0の勧告をするのでしょうか？ 質問は以上になります。 誤った理解があるかもしれませんが、いろいろな方からのご回答を頂きたいです！！
- ベストアンサー
- CSS
- 現在のweb製作(HTMLとCSS)
現在webデザイナーがweb製作時に使用するHTMLのバージョンはHTML5なのでしょうか？ それと、CSSのバージョンはCSS3なのでしょうか？ もしHTML5だった場合、HTML5に対応したおすすめテキストツールなんかを教えてくださると助かります。 どなたかわかる方回答のほう宜しくお願いします。
- ベストアンサー
- その他（ITシステム運用・管理）
- イラレからWEBサイト
大学の課題でWEBサイトの作成があるため こちらのサイトを参考にイラストレーターからWEBサイトを作ろうと考えました。 https://blogs.adobe.com/creativestation/web-start-illustrator-web-design-06-export-images しかしチュートリアルはこのページの画像のスライスで終わってしまっています。 イラストレータからHTMLやCSSまで書き出すことはできないのでしょうか？ 画像のみを作成し、あとは位置などのHTMLやCSSの設定は 自分でコードを書かなければならないのでしょうか？ この画像のスライスの後どうしたら良いのか教えていただきたいです！
- 締切済み
- CSS
- サイトの著作権について。HtmlやCssは著作権？
ある有名サイトがあり、htmlや外部Cssが非常に手が込んでいて、 かなり時間がかかったであろうサイトがあります。 そのサイトとほぼ同じレイアウトや配置で、 HTMLとCSSを見てみると、これまた全く同じでした！ メモの部分も同じで、驚きました。 しかし、デザインや文章などは自分でつくったらしく、 サイトのHTMLやCSSの構造部は同じだけれど、 デザインや文章は盗作していないようです。 これは著作権侵害になりますでしょうか？
- ベストアンサー
- その他（法律）
お礼
回答ありがとうございます。 スマホやタブレットとPCで スマホ用のサイトにしていないので 表示が遅いなどということはないですかね？ (*´ω｀)