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

  1. TOP
  2. みんビズ制作講座 デザインカスタマイズ : 第5回 余白と水平線

エキスパートコラム

みんビズ制作講座:デザインカスタマイズ(全10回)

第5回:余白と水平線

執筆:原 一宣。(株式会社Gazi工房)

2013年1月9日更新

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

閲覧数10,566views

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

「デザインカスタマイズ」の第5回目は「余白と水平線」です。
ページのコンテンツを見やすくするためには、地味ですが余白と水平線が役に立ちます。

余白を追加してみよう

昨年の夏に機能追加された「余白」の追加。
名前の通り、文章と文章、画像の間に「余白」を追加する機能です。

新項目を追加

まず最初に、みんビズにログインし、余白を挿入したい文章があるページを開きます。
余白を追加したい場所の前にあるエレメントにカーソルを移動すると、マウスオーバーしメニューが表示されます。[+(新規項目の追加)]をクリックします。

「余白」を挿入する

[コンテンツメニュー]が表示されます。その中から[余白]をクリックします。

「余白」を調整する

[余白]の画面が表示されます。
画面中央の「つまみ」を下にドラックすると、挿入したい余白の高さを感覚的に調整することができます。
「つまみ」の下には現在の余白の高さが数値(ピクセル)で表示されていますので、ここに直接数字を入力したり、上下の「▲」ボタンをクリックして調整することもできます。
余白の調整が終了したら[保存]をクリックします。

水平線を追加してみよう

新項目を追加

余白と同じ要領で、水平線を追加したい場所の前にあるエレメントにカーソルを移動すると、マウスオーバーしメニューが表示されます。[+(新規項目の追加)]をクリックします。

「水平線」を挿入する

[コンテンツメニュー]が表示されます。その中から[水平線]をクリックします。
これで「水平線」が挿入されました。

ヒント「水平線」を編集する

「水平線」の種類や色を変更したい場合は[スタイル]から編集が可能です。
画面右のツールバーから[スタイル]をクリックし、[フォント設定]を開きます。
[フォント設定]内のメニューから[水平線]をクリック。

「水平線」をクリックすると、スタイルの変更・カラーの変更を行うことができます。
編集が終了したら[保存]をクリックします。

画面上部に「プレビュー」が表示されていますので、変更した内容でOKであれば、[はい]をクリックします。[いいえ]をクリックすると編集前の状態に戻り、[戻る]をクリックすれば[スタイル]の編集画面に戻ります。

コンテンツを見やすくするために

ホームページに見に来ていただいた方に「伝わりやすい」デザインを行うことが大切です。
「伝わりやすい」を言い換えれば、「見やすい」や「読みやすい」ということにもなります。
「見やすい」ページを実現するためには、「余白」や「水平線」の配置も大きく影響します。

ページごとに無計画で「余白」や「水平線」を追加するのではなく、事前に「余白」や「水平線」の統一された配置ルールを設けることで、より「見やすい」ページに変わります。

次回、第6回目「カラム機能を活用してみよう」では、カラム機能を使ってより効果的にページを見やすくする方法を解説します。

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

原 一宣。(はら・かずのり)

原 一宣。(はら・かずのり)

株式会社Gazi工房 代表取締役/JimdoExpert
http://gazikobo.co.jp/

1974年、福島県福島市生まれ。東北福祉大学社会福祉学部社会福祉学科卒業。山形県川西町在住。食品加工会社、電子基板製造会社を経て、フリーランスでWeb制作活動を開始。
2007年に株式会社Gazi工房を設立。Webサイトの企画・設計、制作業務に従事。
イラストやキャラクターデザイン、地域づくりの企画・助言、パソコン教室なども行う。
元東北芸術工科大学 非常勤講師。クリエイティブユニット「gabs」メンバー。
CSS Nite in FUKUSHIMA実行委員。

著書『HTML5+CSS3の新しい教科書 基礎から覚える、深く理解できる。』(共著、エムディエヌコーポレーション)、『ああしたい、こう変えたいが手にとるようにわかるCSS基礎』(同)。

ああしたい、こう変えたいが手にとるようにわかるCSS基礎

  • はじめてWEB 大感謝祭!~新規加入または2年目更新をし、アンケートに答えてギフト券をもらおう!~
  • Jimdoリメイク | プロがあなたのホームページを今なら45,000円(税抜)でリニューアル!
  • 問い合わせ件数をアップさせるなら!「通話料無料・わかりやすい番号」のフリーコール
  • 文具、通信、オフィスのことなら何でもお任せ!まとめてオフィス

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

コラム週間アクセスランキング[期間:2017/3/19~2017/3/25]

おすすめコンテンツ

はじめてWEBおすすめ本

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

  • ソウギョウノート

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

  • 経理通信

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

  • まとめてオフィス

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

  • フリーコールS

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

  • auオフィスナンバー

    事務所開設するなら固定電話番号で信頼アップ
    今ならキャンペーン実施中!