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

  1. TOP
  2. はじめて相談室 : 第46回 縦の区切り線って入れられるの?

エキスパートコラム

はじめて相談室

第46回:縦の区切り線って入れられるの?

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

2019年2月12日更新

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

閲覧数116views

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

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

今回は、縦の区切り線って入れられるの?というご相談です。

おたより

旅の写真を掲載したHP作成に活用させていただいております。
各項目の区切りに水平方向は「水平線」で設定できますが、コラム欄で垂直方向の区切りをしたいのですがそれは可能なのでしょうか。 よろしくお願いします。(にしゃさん)

ナビゲーターからの回答

ナビゲーター

にしゃさん、こんにちは。はじめて相談室ナビゲーターの立花かずみです。
おたよりありがとうございます!
旅の写真のホームページ、行ったことがない人にも案内ができるし、自分でも振り返れるし、いいですよね☆

さて、ご質問は「カラム」で段組みをしたときに間に「縦線」を入れたいということかと思います。多分これはたくさんの方が感じていることではないかと思うので、今回はこのお話をしてみたいと思います。

残念ながら、Jimdoの機能では入れることができません

まず最初にお伝えしておくと、Jimdoには「水平線」というコンテンツはあるのですが、「垂直線」というコンテンツはありません。つまり、Jimdoの機能を使って垂直方向の区切りのために線を入れることはできないのです。

そもそも実は、今どきのホームページではあまり「縦の区切り線」というものは使わなくなってきています。今回はなぜ使えないのかというお話をして、代わりにどんな方法が使われているのかをお話したいと思います。

なぜ横はよくて縦はだめなの?

縦線を入れるためにカラムで「区切り専用」の列を作っておいて、そこに縦棒を入れたらできるじゃん!と思った方、きっといらっしゃいますよね。
これ、ちょっとやってみましょう。たとえば、図のように並んだ写真の間に線を入れたいとします。

このカラムの真ん中にひとつ列を追加して、そこに縦線を入れます。今回は「文章」コンテンツで「|」という文字を縦並びにして入れてみました。

パソコンで見ると、きれいに縦線が入っています。

これをスマホでのプレビューで見てみましょう。

2枚めの写真が画面から消えてしまいました。スマホでは縦線が写真の下に入ってしまっています。

なんでスマホでは見え方が違うの?

Jimdoの編集画面は「パソコン用」と「スマホ用」に分かれていません。なのに、公開されているページはパソコンとスマホで見え方が違います。つまり、同じ内容のページをJimdoが自動的にパソコンとスマホでレイアウトを変えて表示しているんです。

ちなみに今回のお話に出ている「カラム」という段組のコンテンツは、パソコンでは横並びになりますがスマホでは各列が縦に並びます。図にしてみると、パソコンではこんな感じに見えていても、

スマホでは、こうなるんです。

なので、さきほどのように縦線を一つの列に入れるとその列も縦並びになってしまい、スマホではレイアウトがおかしくなってしまうんです。

スマホはパソコンよりもずっと画面幅が小さいので、横並びにすると内容がはみ出してしまうことがあります。このため、小さな幅でも内容がきちんと見えるように縦並びになっているわけです!

Jimdoだけではなく、これは近年のホームページによく見られるレイアウト手法です。スマホでのアクセスがどんどん増えているこの時代ならではという感じですね。

線を入れないでどうやって区切るの?

ここでは、よく使われている区切り方を2つ紹介します。

1. 余白をうまく入れる

人は「余白」を見て自然に「内容のグループ分け」をして区切りだと理解すると言われています。
たとえば、次の図のように余白が均等のカラムの場合、どこが区切りなのかわかりません。

でも、余白を入れると左の2枚と右の1枚の間に「区切り」があるように見えることがわかります。

この例はちょっと極端にしていますが、このような感じで区切りを意識してもらう、というやり方です。

2. 背景色を変える

これはJimdoの基本機能ではできないのでかなり応用編なのですが、カラムの各列の色を変えることで、内容が違うことを知ってもらう方法です。

こうすると、左右で内容が違うことははっきりわかりますよね。

ちなみにこれのやり方はちょっとコードを書かなければならないので難しいのですが、はじめてWEBの「ホームページのクオリティアップ術:制作編 第9回:HTMLとCSSに挑戦!項目に背景色や枠線をつける方法」という記事が参考になると思います。

今回は、残念ながら「できません」というお答えになってしまいましたが、にしゃさんが「何に区切り線をつけたいか」を教えてくださったら、もしかすると別の方法もお伝えできるかもしれません!もし気になったら、またおたよりくださいね☆

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

ナビゲーター

「はじめて相談室」では、みなさまからの「はじめて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円(税抜)でリニューアル!

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

コラム週間アクセスランキング[期間:2019/2/10~2019/2/16]

おすすめコンテンツ

はじめてWEBおすすめ本

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

  • ソウギョウノート

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

  • 経理通信

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

  • まとめてオフィス

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

  • フリーコールS

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

  • auオフィスナンバー

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