ウェブサイトを作るときのまとめ

はじめに

html, css, javascriptをイチから書いてオリジナルのウェブサイトを作る際に気をつけることをまとめています。 内容は順次加筆、修正予定。

ここでの目標はできるだけシンプルにPC、スマートフォンのどちらにも対応したウェブサイトを作ることです。

スマートフォン向けのページ

画面サイズの設定

viewport

▼html

<meta name="viewport", content="width=device-width, initial-scale=1">

1pxの見た目の大きさは機種によって異なります（例えば、FHDのスマートフォンと24inchモニターでは同じ10pxでも見た目の大きさが全然違う）。

この一文でページの横幅をデバイスの横幅に設定して、ページの表示を最適化します。

スマートフォン向けのレイアウトに切り替える

▼html

<link rel="stylesheet" href="theme00.css" type="text/css">
<link rel="stylesheet" media="(max-width:600px)" href="theme_mobile.css">
<link rel="stylesheet" media="(min-width:601px)" href="theme_desktop.css">

ページサイズが600px以下のときはtheme_mobile, ページサイズが601px以上のときはtheme_desktopが適用されます（max-width: n pxは幅がnまでの意味）。 theme_commonはPC版、スマートフォン版 共通のスタイルシートです。配色の設定などを書いています。 theme_desktopにはデスクトップ向け、theme_mobileにはスマートフォン向けの設定（表のサイズなど）を書いています*1。

faviconを取得

ページ全体に適用されるファビコンはHOSTNAME/favicon.icoにあります。 以下の方法でページ全体に適用されるファビコンを取得して表示することができます。

①ファビコン保存先のURLを取得する

▼javascript

var url = new URL(URL);
var imageUrl = url.protocol + "//" + url.hostname + "/favicon.ico";

imageUrlにファビコンのURLが格納されます。

②ファビコンを表示する

取得したURLをimgタグのsrcにセットすると画像が表示されます。

▼javascript

$(document).ready(function() {
    $("#image").html("<img src='" + imageUrl + "' alt='favicon'>");
});

▼html

<div id="image"></div>

参考

Quick Tip: Adding a Favicon To Your Website - DWUser.com Education Center

変更履歴

日付	変更内容など
2020年2月10日	初版

参考

Responsive Web Design Basics  |  Web Fundamentals  |  Google Developers

*1:スタイルシートを別ファイルに記載しておくとメンテナンスが容易な上、同じスタイルを複数のページに適用する際に便利です。すべてのページに共通載設定、あるページ固有の設定などを分けて記載しておくと便利です。