エキスパートコラム
「はじめて相談室」では、「はじめてWEB」を使ったホームページづくりが初めての方のお悩みや不安にナビゲーターがお答えします!「こんなこと聞いていいのかな…」という方大歓迎の相談室です。
今回は、ホームページの余白の入れ方がよくわからないというご相談です。
おたより
こんにちは。はじめてのホームページ作りに試行錯誤しています。
なんだかしっくりこないんです。
文章とか画像とかを入れる操作はできるんですけど、どうも「スペース」がうまくいきません。
パソコンではいい感じに見えるけど、スマホで見るとスペースが空きすぎている感じがするんです。僕が細かいことを気にしすぎなのでしょうか?このままでもいいものですか?
(たけのこの里派!さん)
ナビゲーターからの回答
ポイントは「余白を入れる方法」
たけのこの里派!さんのホームページを見せていただいたところ、スペースがうまくいかない原因は「余白を入れる方法」にあることがわかりました!
たけのこの里派!さんは、文章の下にいくつか改行を入れることで余白をとっているんです。こんな感じで。
この方法だと、パソコンでもスマホでも同じように余白があきます。パソコンに合わせて調整をすると、幅のせまいスマホでは、バランス的に余白が多すぎるように見えることがあります。
改行ではなく「余白」でスペースをとってみよう
実はJimdoには「余白」というコンテンツがあります。
これは、ほんとうに「余白をとるだけ」のコンテンツです。
入れても余白が空くだけなのでとっても地味ですが、重要コンテンツなんですよ。
余白コンテンツを入れた直後は「50px」の余白があきますが、空き具合は調整できます。
「px(ピクセル)」は大きさ(高さ)を示す単位で、数字が大きくなるほど余白が大きく空きます。
数字を入れることで調整ができますが、感覚的に調整をしたい場合は図の部分をドラッグすることでも調整できます。
「余白」コンテンツでスペースを入れる3つのメリット
1. スマホで見たときに余白が自動調整される
一番のメリットは、スマホで見たときの余白が自動調整されることです!
図のように、「文章」コンテンツ内で改行を入れたときと、「余白」コンテンツで調整したものとでほぼ同じ高さでスペースを入れたときに、スマホで見ると「余白」コンテンツで設定したスペースがかなり縮んでいるのがわかります。
2. 見出しや画像の前後の余白が調整できる
改行で調整できない「見出し」や「画像」の前後の余白が調整できることもメリットのひとつです。Jimdoでホームページを作ると、コンテンツの前後には自動的にある程度の余白が空くのですが、もっと空けたい!というときには「余白」を使うと思い通りにスペースを空けられます。
3. 余白の大きさが自由に調整できる
3つ目のメリットは、余白が自由に調整できること。改行で余白を入れると「◯行分」の余白が空きますが、たとえば「3行分だと少ないけど4行だと多い」というときに、細かな調整ができるので便利です。
今回は「余白」についてお話してきました。
ホームページの見た目は、余白がうまく取られているかどうかでかなり左右されます。「余白」コンテンツをうまく使って、しっくりくるホームページを作っていきましょう!
おたよりお待ちしています!
「はじめて相談室」では、みなさまからの「はじめてWEB」の素朴な疑問をお待ちしています!
「こんなこと聞いたら恥ずかしいかも。。。」というご質問大歓迎です!
「はじめてWEB」ナビゲーターがなんでもお答えしちゃいます!
おまちしてまーす!
ナビゲーターへの質問はこちらから!
小さなお店&会社のホームページ Jimdo入門
「Jimdo」で会社やお店のホームページを作りたい方は本書を読めばバッチリ!
Jimdoの基本操作から、「会社のホームページ作りの考え方」「会社のホームページに必要な情報/内容」「ホームページを見る人のためのデザイン」「運用して改善していくための方法」といった本格的な知識までを、「プロ」の視点からしっかり解説します。
「会社やお店のホームページをこれから作る方」、「満足のいくホームページにしていきたい方」のどちらへもおすすめの1冊です。
たけのこの里派!さん、こんにちは。
はじめてWEBナビゲーターの立花かずみです。
スペースへのこだわり、とっても大事です!細かいことどころか、ホームページのデザインの良し悪しを左右するとても大切なポイントです。
今回は、たけのこの里派!さんのお悩みを解決する方法をお伝えしますね。