ホームページ作成の役立ちリンク集





ホームページ作成の役立ちリンク集


 当ホームページを作成する際に、活用させていただいた他サイト様を紹介します。

 参考にしたサイト様は他にもたくさんありますが、多すぎて覚えていないので、見つけ次第載せていきます。




  • 1時間で作るホームページ
  •  HTML手打ちでホームページを作る方法が、可愛らしいキャラクター達とともに、とても丁寧に書かれています。

     当ページを作成する際、何度も参考にしたサイト様です。

     ただ、このサイト様を見ても、1時間で本格的なページを作れるようになるわけではありません。

     1時間で学べるのは、HTML手打ちの仕方から、ページをサーバーへアップロードするまでの流れという、ホームページ作成の本当に基礎の部分です。

     本格的なサイトを作るには、そこから先の、HTMLやCSSを使ったページレイアウトなどを学ばなければいけません。

     それらは、このサイト様に詳しく書いてありますが、できることが膨大なため、1時間どころか1日かけても満足いくものに仕上がることはありません。

     HTMLとCSSをいじってはページを確認し、納得いくレイアウトになっていなければ、またHTMLとCSSを直して、という地道な作業を、ひたすら続けなければいけません。

     ただページを作りたいだけならば、ワードプレスなどの、サイト作成ツールが豊富な現在、それらを使わない手はありません。

     HTML手打ちでページを作るのは、手打ちで作ることにこだわりがあったり、ホームページ作成の根幹を学びたいなどの目的がない限り、やめた方がいいと思います。

     かく言う私は、ワードプレスなどの便利ツールで作成されたサイトが多い中、HTML手打ちでサイトを作る事に意味があると思い、当サイトを手打ちで作りました。




  • カラーコード[WEBデザイン用]
  •  上で紹介した、1時間で作るホームページ内のコンテンツの一つです。

     CSSなどでサイトをいじっていると、文字やボックス内の色を変えたくなります。

     パソコンで色を指定する時は、#00AAFFのように、RGBのそれぞれを、0~Fまでの16進数で指定しなければいけません。。

     この表記は、慣れるまで、どう記述すれば狙った色が出せるのか、分かりにくいです。

     そんな時に便利なのが、このツールです。

     表示されているカラーパレット中の、気に入った色をクリックするだけで、その色の16進数コードを表示してくれます。




  • HTMLクイックリファレンス
  •  このサイト様には、HTMLのタグや、CSSのコマンドなどが網羅されています。

     なので、ページを1から見ていくのではなく、自分のページに搭載したい機能を、検索で探していくという、辞書的な使い方をすることが多いです。

     JavaScriptのコマンドもたくさん載っていて、ありがたい限りです。




  • サイトマップを作成-自動生成ツール「sitemap.xml Editor」
  •  自サイトの、TOPページURLを入力するだけで、簡単にサイトマップを作成してくれるサイト様です。

     GoogleAnalyticsを使うときに重宝しています。




  • GTmetrix
  •  サイトを作る時に大事なことは、もちろん内容が一番大切ですが、サイトを表示する速度も大切です。

     サイトを作っている時、画像や動画をアップしていくと、段々とサイトが重くなります。

     サイトが重くなり、表示されるまでに時間がかかるようになると、視聴者が内容を見ずに、サイトを離れることが多くなるそうです。

     このサイト様は、自分が作ったページの早さを計ってくれます。

     どうすれば、速度を上げることができるのかが分かるので、サイトの改善に役立ちます。

     ただ、英語のサイトなので、英語が分からないと使いこなすのが難しいです。




  • PageSpeed Insights
  •  こちらも、ページのスピード(というよりユーザービリティ―)を計ってくれるサイト様です。Googleが提供しています。

     ユーザーがページを見た時の、ページの表示速度を早くする手段を提示してくれます。

     また、なんと、ページ内で使われている画像や、CSS、JavaScriptを最適化してくれるので、それをサーバーにアップし直すだけで、表示速度の向上が見込めます。




  • オンラインイメージ最適化ツール
  •  画像を最適化し、容量を大幅に少なくしてくれます。

     このサイト様も、ページの表示速度を向上させるのに役立ちます。

     実際に使ってみると、画像の容量がになることもあり、ある種の爽快感を感じます。

     いくつかの画像圧縮ツールを使ってみましたが、その中では、このサイト様のツールが一番圧縮率が高かったです。




  • YouTubeを埋め込んでも重くならないようにする方法がめっちゃ良かった
  •  YouTubeの動画をページに埋め込むとき、そのまま埋め込んだだけでは、ページがとても重くなってしまいます。

     このサイト様では、動画を埋め込むとき、動画を画像に置き換える方法を紹介しています。

     置き換えられた画像をクリックすることで、YouTubeのプレーヤーが表示され、動画を再生することができるようになります。

     これにより、ユーザーの手間は増えますが、ページの読み込みが格段に早くなります。




  • ICOON MONO
  •  フリーで使えるアイコン素材を、ダウンロードできるサイト様です。

     サイト内の画像は、モノトーンのシックな画像のみです。

     ビットコインのアイコンを、当ページサイドバーの、仮想通貨への投資のリンク画像に使わせてもらっています。








TOPに戻る