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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

1. 余白をうまく入れる

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

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

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

2. 背景色を変える

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

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

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

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