テンプレートのレイアウト構成
（更新 ）
ホームページのレイアウトには、「右サイドバー」や「左サイドバー」、あるいは「ワンカラム」などがあります。いずれの場合でも、HTMLソース上は「サイドバー」よりも「コンテンツ」が上になるように設定することをおすすめします。
もし、サイドバーをコンテンツよりも上に設定してしまった場合、レスポンシブウェブデザインでスマホに最適化する際に、本文のコンテンツ部分が表示されるまでスクロールする必要が出てきてしまいます。
そのため、HTMLソース上、コンテンツ部分を上部に設定し、サイトにアクセスした際にメインコンテンツがすぐに表示されるようにしましょう。
その上で、デスクトップPC用にはcssにfloatを設定して、サイドバーを回り込ませることをおすすめします。
右サイドバーと左サイドバーの作り方
一般的なPCサイトのテンプレートレイアウトは右サイドバーがおすすめです。
この場合、コンテンツ部分に「float:left;」を設定することで対応することができます。
■右サイドバーの例
右サイトバーについては、「float:left;」なら左寄せ、「float:right;」なら右寄せになりますが、全体のwidth幅と合わせて隙間の出ないようにぴったり設定しておけば、どちらの場合でも表示に違いはありません。
■左サイドバーの例
一方、左サイドバーにする際は、コンテンツ部分に「float:right;」を設定しておくとよいでしょう。
この場合、サイドバー部分には何も設定しなくても左に寄りますが、「float:left;」などと設定しておくことをおすすめします。ただし、左サイドバーで作成しているサイトはそれほど多くはないかもしれません。
■ワンカラムの例
また、最近ではfloatを何も設定せず、ワンカラムのレイアウトも多くなってきました。
コンテンツ部分やサイドバー部分に「margin: 0 auto;」を設定することでセンタリングされますが、width幅を広くとりすぎると１行の文字数が多くなり、読みにくくなってしまいます。そのため、width幅については800px～900px程度に設定しておくのが無難かと思います。
テンプレートのwidth幅の取り方
ホームページのレイアウトを決める際、横幅のwidth幅はデバイスの解像度のシェアに応じて決めることをおすすめします。
シェアを調べる際はこちらのサイトが便利です。
StatCounter Global Stats
現在、主流の解像度は「1920 × 1080」となっているため、パソコンの解像度を変更して実際の表示を確認されてみるとよいでしょう。
この「1920 × 1080」を100％でそのまま使っている人が多いと思いますが、なかには125％や150％で拡大して使用している人もいます。
125％の場合は「1920 × 1080」をそれぞれ1.25で割って「1536 × 864」、150％の場合は1.5で割って「1280 × 720」の解像度になりますが、このあたりでも正常に表示されるかをチェックしておくことをおすすめします。
例えば、当サイト運営者の環境は「1536 × 864」ですが、この解像度でヤフーを閲覧した場合は以下のように表示されています。
一方、100％の「1920 × 1080」で閲覧した場合、以下のように表示されます。
この場合、おそらくはブラウザを最大化せず、デスクトップと両方を表示しながら閲覧している人が多いものと感じています。そのため、閲覧環境の解像度が「1920 × 1080」だからといって、実際のブラウザの表示までも「1920 × 1080」とは限りません。
一般的に、ホームページのwidth幅は980～1000px程度のレイアウトが多いですが、余白が大きいからといって、あまりにwidth幅を広げるのは避けた方が良いかと思います。
ただ、最近ではホームページのwidth幅を広めにとり、1100～1200px程度で設定されることも多くなってきました。もし広めのレイアウトにした場合には、フォントサイズも18pxあたりの大きめに設定して調整することをおすすめします。
当ホームページでは、スマホ、タブレット端末、デスクトップPC、大画面デスクトップの4パターンで調整してますが、レスポンシブウェブデザインのメディアクエリでブレイクポイントを設定することで、解像度に応じてレイアウト幅やフォントサイズの調整ができます。シェアの多い主要な解像度については、実際の表示をチェックしておくとよいでしょう。
ちなみに、広告の関係からか、サイドバーのwidth幅は300pxで設定しているサイトが多いと感じています。一方、コンテンツの部分については650px～800px程度でまちまちですが、Chromeデベロッパーツールを使えば、リアルタイムで実際の表示を確認しながら調整できるため、大手メディアなどを参考にしながら設定していくことをおすすめします。
グリッドデザインで余白や高さを統一
グリッドは、サイトの余白や高さに意味を与えます。
何となく「余白は10pxぐらいかな？」という曖昧さを排除し、グリッド線上に乗る数値を正確に設定することで、paddingやheightの値に根拠を与えます。設定した余白や高さの数値に根拠ができれば、ホームページにも自信と安心感が生まれてきます。
以下は当サイトをグリッドで表示したものですが、デフォルトのフォントサイズである「16px」を基準に、余白や高さは16pxの１つ分、２つ分といった形で統一しています。
概ね、8の倍数である8px、16px、24px、32pxのラインで統一すると自然な印象に仕上がるはずです。
このグリッドは、JavaScriptでサイト上に表示することができますが、Chromeデベロッパーツールのコンソールにて、以下のコードをコピペで貼り付けると便利です。
JavaScript｜ソースコードを表示する
(() => {
// 既存のオーバーレイ削除
const old = document.getElementById("grid-overlay");
if (old) old.remove();
// オーバーレイ作成
const overlay = document.createElement("div");
overlay.id = "grid-overlay";
Object.assign(overlay.style, {
position: "fixed",
top: "0px",
left: "0px",
width: "100%",
height: "100%",
pointerEvents: "none",
zIndex: "999999",
backgroundSize: "10px 10px",
backgroundImage:
"linear-gradient(rgba(0,120,255,0.20) 1px, transparent 1px)," +
"linear-gradient(90deg, rgba(0,120,255,0.20) 1px, transparent 1px)"
});
document.body.appendChild(overlay);
let topPos = 0;
let leftPos = 0;
let grid = 10; // 初期値
const updateGrid = () => {
overlay.style.backgroundSize = `${grid}px ${grid}px`;
};
// Shift＋矢印のスクロール抑止
window.addEventListener(
"keydown",
(e) => {
if (e.shiftKey && ["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"].includes(e.key)) {
e.preventDefault();
}
// 通常矢印も無効化（スクロール防止）
if (!e.shiftKey && ["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"].includes(e.key)) {
e.preventDefault();
}
},
{ passive: false }
);
// キー操作
const handler = (e) => {
// Esc → 終了
if (e.key === "Escape") {
overlay.remove();
window.removeEventListener("keydown", handler);
console.log("%cグリッドオーバーレイを終了しました。", "color:#ff4444;font-size:14px;");
return;
}
// Shift＋矢印で 1px 移動
if (e.shiftKey) {
if (e.key === "ArrowUp") topPos -= 1;
if (e.key === "ArrowDown") topPos += 1;
if (e.key === "ArrowLeft") leftPos -= 1;
if (e.key === "ArrowRight") leftPos += 1;
overlay.style.top = topPos + "px";
overlay.style.left = leftPos + "px";
}
// グリッド切り替え
if (e.key === "1") grid = 10;
if (e.key === "2") grid = 20;
if (e.key === "3") grid = 30;
if (e.key === "4") grid = 8;
if (e.key === "5") grid = 16;
if (e.key === "6") grid = 24;
if (e.key === "7") grid = 32;
updateGrid();
};
window.addEventListener("keydown", handler);
console.log(
"%cグリッドオーバーレイ ON\nShift＋矢印キーで1px移動\n1=8px, 2=16px, 3=24px\nEsc で終了",
"color:#0070ff;font-size:14px;"
);
})();
コピー
初回の実行時には安全確認のエラーが出ますが、"allow pasting"と入力すれば実行できます。
「Shift＋矢印キー」で移動し、「1」を押せば10pxの升目、「2」を押せば20pxの升目などと変わり、Escで終了します。詳細は上記コードのコメントの箇所に記載しています。
あるいは、以下のJavaScriptをページの<head>タグ内に直接貼り付けても良いかと思います。
JavaScript｜ソースコードを表示する
<script>
document.addEventListener("DOMContentLoaded", () => {
(() => {
const old = document.getElementById("grid-overlay");
if (old) old.remove();
const overlay = document.createElement("div");
overlay.id = "grid-overlay";
Object.assign(overlay.style, {
position: "fixed",
top: "0px",
left: "0px",
width: "100%",
height: "100%",
pointerEvents: "none",
zIndex: "999999",
backgroundSize: "10px 10px",
backgroundImage:
"linear-gradient(rgba(0,120,255,0.20) 1px, transparent 1px)," +
"linear-gradient(90deg, rgba(0,120,255,0.20) 1px, transparent 1px)"
});
document.body.appendChild(overlay);
let topPos = 0,
leftPos = 0,
grid = 10;
const updateGrid = () => {
overlay.style.backgroundSize = `${grid}px ${grid}px`;
};
window.addEventListener(
"keydown",
(e) => {
if (
(!e.shiftKey || e.shiftKey) &&
["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"].includes(e.key)
) {
e.preventDefault();
}
},
{ passive: false }
);
const handler = (e) => {
if (e.key === "Escape") {
overlay.remove();
window.removeEventListener("keydown", handler);
console.log(
"%cグリッドオーバーレイを終了しました。",
"color:#ff4444;font-size:14px;"
);
return;
}
if (e.shiftKey) {
if (e.key === "ArrowUp") topPos -= 1;
if (e.key === "ArrowDown") topPos += 1;
if (e.key === "ArrowLeft") leftPos -= 1;
if (e.key === "ArrowRight") leftPos += 1;
overlay.style.top = topPos + "px";
overlay.style.left = leftPos + "px";
}
if (e.key === "1") grid = 10;
if (e.key === "2") grid = 20;
if (e.key === "3") grid = 30;
if (e.key === "4") grid = 8;
if (e.key === "5") grid = 16;
if (e.key === "6") grid = 24;
if (e.key === "7") grid = 32;
updateGrid();
};
window.addEventListener("keydown", handler);
console.log(
"%cグリッドオーバーレイ ON\nShift＋矢印キーで1px移動\n1=10px, 2=20px, 3=30px, 4=8px, 5=16px, 6=24px, 7=32px\nEsc で終了",
"color:#0070ff;font-size:14px;"
);
})();
});
</script>表示を終了する際は、貼り付けた<script>タグを削除するだけです。
ちなみに、ブラウザの窓にJavaScriptを直接入力しても実行はされませんが、ブックマークに追加してアクセスすることで実行することができます。ただ、このブックマークでJavaScriptを利用するには、改行などを削除する必要があります。
ChromeやFirefox、Edgeなどのブラウザにて、gridなどの名前でブックマークを作成し、以下のコードをURLの代わりに貼り付けて利用するとよいでしょう。
JavaScript｜ソースコードを表示する
javascript:(()=>{const o=document.getElementById("grid-overlay");if(o)o.remove();const e=document.createElement("div");e.id="grid-overlay",Object.assign(e.style,{position:"fixed",top:"0px",left:"0px",width:"100%",height:"100%",pointerEvents:"none",zIndex:"999999",backgroundSize:"10px 10px",backgroundImage:"linear-gradient(rgba(0,120,255,0.20) 1px, transparent 1px),linear-gradient(90deg, rgba(0,120,255,0.20) 1px, transparent 1px)"}),document.body.appendChild(e);let t=0,n=0,d=10;const a=()=>{e.style.backgroundSize=`${d}px ${d}px`};window.addEventListener("keydown",l=>{(["ArrowUp","ArrowDown","ArrowLeft","ArrowRight"].includes(l.key))&&l.preventDefault()},{passive:!1});const r=l=>{if("Escape"===l.key)return e.remove(),void window.removeEventListener("keydown",r);if(l.shiftKey){if("ArrowUp"===l.key)t-=1;if("ArrowDown"===l.key)t+=1;if("ArrowLeft"===l.key)n-=1;if("ArrowRight"===l.key)n+=1;e.style.top=t+"px",e.style.left=n+"px"}"1"===l.key&&(d=10),"2"===l.key&&(d=20),"3"===l.key&&(d=30),"4"===l.key&&(d=8),"5"===l.key&&(d=16),"6"===l.key&&(d=24),"7"===l.key&&(d=32),a()};window.addEventListener("keydown",r);console.log("%cグリッドオーバーレイ ON\nShift＋矢印キーで1px移動\n1=10px, 2=20px, 3=30px, 4=8px, 5=16px, 6=24px, 7=32px\nEsc で終了","color:#0070ff;font-size:14px;");})();上記のように、Chormeのデベロッパーツール、<script>タグの直接貼り付け、あるいはブックマークなど、いずれかの方法でJavaScriptを実行してグリッド表示を確認することをおすすめします。