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

  1. TOP
  2. はじめて相談室 : 第22回 文章などを横に並べるには?

エキスパートコラム

はじめて相談室

第22回:文章などを横に並べるには?

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

2017年2月13日更新

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

閲覧数343views

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

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

今回は、コンテンツをパソコンでは横並び、スマホでは縦並びにしたいというご相談です。

おたより

こんにちは。結構前にはじめてWEBでホームページを作ったのですが、ずっと納得がいかないままで、どうしたらいいか相談したいです。
ページの中の文章があまり長くないので3つの文章を横並びにしたいのです。でも、スマホでは横並びにしたくないと思っています。今はスマホのことを考えてみんな縦並びにしているので、パソコンで見ると文章が横に長くなってしまって読みづらいような気がするのです。
パソコンでは横に並んで、スマホでは縦に並ぶなんてことはできますか?
難しいんでしょうか?教えていただきたいです!よろしくお願いします。
(ぐーぐーがんもどきさん)

ナビゲーターからの回答

ナビゲーター

ぐーぐーがんもどきさん、こんにちは!ナビゲーターの立花かずみです。
おたよりありがとうございます。これは難しい問題ですね……。

パソコンとスマートフォンでは画面の幅がかなり違うので、見た目、気になりますよね。はじめてWEB(Jimdo)には、残念ながら「スマホだけの見た目調整」という機能はありませんので、パソコンの幅に合わせるとスマホで見づらい、スマホの幅に合わせるとパソコンで見づらい…ということになってしまい、バランスが難しいところです。

でも、ぐーぐーがんもどきさんの希望は「カラム」というコンテンツで叶えられそうです!ということで、今回は「カラム」についてお話しますね。

やりたいことを図にしてみます

今回の質問をまずは図にしてみます。いまは、パソコンで見るとこんな感じになっているのではないかと思います。

これを、以下の図のようにしたい、ということではないかと思います。

これは、「カラム」というコンテンツで実現できるんです!カラムを使ってレイアウトをすると、スマートフォンで見たときには自動的に縦並びになるんです。こんなふうに。

いい感じですよね☆ どのようにすればよいか、見ていきましょう!

カラムを入れてみよう

「コンテンツを追加」をクリックすると、下の段に「カラム」があります。「カラム」は「列」という意味の英単語なのですが、聞き慣れない言葉なので、なんとなく目に入りづらいかもしれません。これを選択して挿入します。

すると、左右に2つの「コンテンツを追加」が表示されます。つまり左右の両方に文章や画像などのコンテンツが入れられるんです!

最初にカラムを追加したときには2つしか出ませんが、カラムの段(列)の数は増やすことができます。まず、カラムの上にマウスカーソルを乗せてから「カラムを編集」をクリックします。

その状態でよく見ると、列と列の間に「+」アイコンがあります。これをクリックしてみましょう。

すると、列が1つ追加されて3列になりました。
この3つの列にそれぞれコンテンツを入れてみましょう。

カラムにコンテンツを入れてみよう

すでに縦並びで存在しているコンテンツをカラムに入れるのは、ドラッグして移動すればできます。たとえば見出しを移動させたい場合は、見出しのところにマウスカーソルを乗せて(クリックはしません)、右にある4方向の矢印アイコンのところでマウスの左ボタンを押しながらカラムの一番左の列にドラッグします。

(移動については「第21回:文字や写真の順番を入れ替えたい!」も参考にしてくださいね!)

以下の図のように、一番左の列に「コンテンツを追加」が表示されなくなっていれば成功です!

あとは、同じように文章とボタンを入れていくだけです!
見出しの下に文章、その下にボタン、という順番で移動して、左側の列を完成させます。

その下の見出し、文章、ボタンも、同じようにカラムの中央と右の列に移動させると、こんな風になります。3つの内容が横に並びました!

カラムで横にレイアウトするときの注意点

カラムを使ってコンテンツをレイアウトするときは、いくつか注意点があります。

カラムの中にカラムは入れられない

カラムのそれぞれの列に「コンテンツを追加」が出ますが、ここで「カラム」を選択することはできず、エラーになります。カラムの中にカラムを入れるような複雑なレイアウトはできません。

レイアウトのズレに気をつけよう

今回のように見出し、文章を横並びにする場合、パソコンで見たときの見た目を考えて、できれば文章の分量を揃えたほうがきれいに見えます。特に最後にボタンがある場合は、使いやすさを考えて横に揃うように調整をしたほうがよいでしょう。

カラムとコンテンツの編集状態の違いに気をつけよう

カラムの中のコンテンツをクリックして編集状態にすると、カラム自体の編集はできません。カラム全体を削除したり移動したりしたいときには、「カラムを編集」をクリックする必要があります。カラムを選択する方法はこちらの解説を参考にしてください

カラムを活用すると、特にパソコンでの見た目の幅が大きく広がります!
ぜひぜひ、チャレンジしてみてくださいね。

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

ナビゲーター

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

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

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

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

お名前(ペンネーム)

メールアドレス

質問

確認する

はじめてWEB

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

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

さあ、はじめよう!

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

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

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

JimdoExpert
http://fc0.vc/

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

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

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

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

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

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

おすすめコンテンツ

はじめてWEBおすすめ本

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

  • ソウギョウノート

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

  • 経理通信

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

  • まとめてオフィス

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

  • フリーコールS

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

  • auオフィスナンバー

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