スマートフォンサイトを表示する

  1. TOP
  2. はじめて相談室 : 第36回 余白の入れ方がよくわからない

エキスパートコラム

はじめて相談室

第36回:余白の入れ方がよくわからない

執筆:#fc0(株式会社エフシーゼロ)

2018年4月16日更新

  • このエントリーをはてなブックマークに追加

閲覧数712views

このコラムをPDF形式でダウンロードする

「はじめて相談室」では、「はじめてWEB」を使ったホームページづくりが初めての方のお悩みや不安にナビゲーターがお答えします!「こんなこと聞いていいのかな…」という方大歓迎の相談室です。

今回は、ホームページの余白の入れ方がよくわからないというご相談です。

おたより

こんにちは。はじめてのホームページ作りに試行錯誤しています。
なんだかしっくりこないんです。
文章とか画像とかを入れる操作はできるんですけど、どうも「スペース」がうまくいきません。
パソコンではいい感じに見えるけど、スマホで見るとスペースが空きすぎている感じがするんです。僕が細かいことを気にしすぎなのでしょうか?このままでもいいものですか?
(たけのこの里派!さん)

ナビゲーターからの回答

ナビゲーター

たけのこの里派!さん、こんにちは。
はじめてWEBナビゲーターの立花かずみです。
スペースへのこだわり、とっても大事です!細かいことどころか、ホームページのデザインの良し悪しを左右するとても大切なポイントです。
今回は、たけのこの里派!さんのお悩みを解決する方法をお伝えしますね。

ポイントは「余白を入れる方法」

たけのこの里派!さんのホームページを見せていただいたところ、スペースがうまくいかない原因は「余白を入れる方法」にあることがわかりました!

たけのこの里派!さんは、文章の下にいくつか改行を入れることで余白をとっているんです。こんな感じで。

この方法だと、パソコンでもスマホでも同じように余白があきます。パソコンに合わせて調整をすると、幅のせまいスマホでは、バランス的に余白が多すぎるように見えることがあります。

改行ではなく「余白」でスペースをとってみよう

実はJimdoには「余白」というコンテンツがあります。

これは、ほんとうに「余白をとるだけ」のコンテンツです。
入れても余白が空くだけなのでとっても地味ですが、重要コンテンツなんですよ。

余白コンテンツを入れた直後は「50px」の余白があきますが、空き具合は調整できます。
「px(ピクセル)」は大きさ(高さ)を示す単位で、数字が大きくなるほど余白が大きく空きます。
数字を入れることで調整ができますが、感覚的に調整をしたい場合は図の部分をドラッグすることでも調整できます。

「余白」コンテンツでスペースを入れる3つのメリット

1. スマホで見たときに余白が自動調整される

一番のメリットは、スマホで見たときの余白が自動調整されることです!
図のように、「文章」コンテンツ内で改行を入れたときと、「余白」コンテンツで調整したものとでほぼ同じ高さでスペースを入れたときに、スマホで見ると「余白」コンテンツで設定したスペースがかなり縮んでいるのがわかります。

2. 見出しや画像の前後の余白が調整できる

改行で調整できない「見出し」や「画像」の前後の余白が調整できることもメリットのひとつです。Jimdoでホームページを作ると、コンテンツの前後には自動的にある程度の余白が空くのですが、もっと空けたい!というときには「余白」を使うと思い通りにスペースを空けられます。

3. 余白の大きさが自由に調整できる

3つ目のメリットは、余白が自由に調整できること。改行で余白を入れると「◯行分」の余白が空きますが、たとえば「3行分だと少ないけど4行だと多い」というときに、細かな調整ができるので便利です。

今回は「余白」についてお話してきました。
ホームページの見た目は、余白がうまく取られているかどうかでかなり左右されます。「余白」コンテンツをうまく使って、しっくりくるホームページを作っていきましょう!

おたよりお待ちしています!

ナビゲーター

「はじめて相談室」では、みなさまからの「はじめてWEB」の素朴な疑問をお待ちしています!
「こんなこと聞いたら恥ずかしいかも。。。」というご質問大歓迎です!
「はじめてWEB」ナビゲーターがなんでもお答えしちゃいます!
おまちしてまーす!

ナビゲーターへの質問はこちらから!

このコラムでは、パソコン初心者の方からの
「こんなこと聞いてもいいのかしら?」という質問にお答えしています。

  • ※毎月1回程度のコラムですので、急を要する質問にはお答えできません。
  • ※すべての質問にお答えできるわけではありませんので、あらかじめご了承ください。
  • ※Jimdoの操作や、はじめてWEBに関する質問はQ&Aコーナーもご活用ください。

お名前(ペンネーム)

メールアドレス

質問

確認する

はじめてWEB

「はじめてWEB」でホームページを作成しよう!

「はじめてWEB」のホームページ開設支援サービスとは、7つのステップで簡単に無料で作成ができ、さらにその後1年間無料でご利用いただけるサービスです。

さあ、はじめよう!

さあ、はじめよう!

はじめてWEB ホームページ公開の7ステップとポイントを動画でご紹介!!

  • ホームページ公開の7ステップ

    ホームページ公開の7ステップ

    ホームページ公開の7ステップ
  • はじめてWEB サービス紹介

    はじめてWEB サービス紹介

    はじめてWEB サービス紹介
  • このエントリーをはてなブックマークに追加
このコラムをPDF形式でダウンロードする

#fc0(株式会社エフシーゼロ)

#fc0(株式会社エフシーゼロ)

JimdoExpert
http://fc0.vc/

「もっと多くの人に、"Webへの入口"を」をコンセプトに、中小企業や個人商店をメインとしたWebサイトの企画・制作・運営アドバイスなどの業務を行う。また、主に初心者を対象とした講師・執筆も多数。

主な著書に『デザインの学校 これからはじめるFireworksの本』(技術評論社)、『デザインの学校 これからはじめるDreamweaverの本』(同)、『ああしたい、こう変えたいが手にとるようにわかるCSS基礎』(共著、エムディエヌコーポレーション)など。

小さなお店&会社のホームページ Jimdo入門

  • 問い合わせ件数をアップさせるなら!「通話料無料・わかりやすい番号」のフリーコール
  • 文具、通信、オフィスのことなら何でもお任せ!まとめてオフィス
  • 「はじめてWEB」でホームページをはじめよう!
  • Jimdoリメイク | プロがあなたのホームページを50,000円(税抜)でリニューアル!

ホームページを作るのがはじめてのかたはまずこちらをご覧ください

コラム週間アクセスランキング[期間:2018/7/1~2018/7/7]

おすすめコンテンツ

はじめてWEBおすすめ本

創業・経営のお役立ち情報

  • ソウギョウノート

    飲食・小売・サービス業の開業スケジュールから、融資申込に必要な書類までをカンタン作成

  • 経理通信

    経営者と経理ご担当者必見!中小企業・小規模事業者のための経理サポートサイト

  • まとめてオフィス

    文具、通信、オフィスのことなら何でもお任せ

  • フリーコールS

    問い合わせ件数をアップさせるなら!「通話料無料・わかりやすい番号」のフリーコール

  • auオフィスナンバー

    事務所開設するなら固定電話番号で信頼アップ