第22回:文章などを横に並べるには?執筆:#fc0(株式会社エフシーゼロ)2017年2月13日更新ツイート閲覧数3,206viewsこのコラムをPDF形式でダウンロードする「はじめて相談室」では、「はじめてWEB」を使ったホームページづくりが初めての方のお悩みや不安にナビゲーターがお答えします!「こんなこと聞いていいのかな...」という方大歓迎の相談室です。今回は、コンテンツをパソコンでは横並び、スマホでは縦並びにしたいというご相談です。前にはじめてWEBでホームページを作ったのですが、ずっと納得がいかないままで、どうしたらいいか相談したいです。ページの中の文章があまり長くないので3つの文章を横並びにしたいのです。スマホでは横並びにしたくないと思っています。今はスマホのことを考えてみんな縦並びにしているので、パソコンで見ると文章が横に長くなってしまって読みづらいような気がするのです。パソコンでは横に並んで、スマホでは縦に並ぶなんてことはできますか?難しいんでしょうか?教えていただきたいです!よろしくお願いします。(ぐーぐーがんもどきさん)ナビゲーターからの回答ぐーぐーがんもどきさん、こんにちは!ナビゲーターの立花かずみです。おたよりありがとうございます。これは難しい問題ですね......。パソコンとスマートフォンでは画面の幅がかなり違うので、見た目、気になりますよね。WEB(Jimdo)には、残念ながら「スマホだけの見た目調整」という機能はありませんので、パソコンの幅に合わせるとスマホで見づらい、スマホの幅に合わせるとパソコンで見づらい...ということになってしまい、バランスが難しいところです。がんもどきさんの希望は「カラム」というコンテンツで叶えられそうです!ということで、今回は「カラム」についてお話しますね。やりたいことを図にしてみます今回の質問をまずは図にしてみます。いまは、パソコンで見るとこんな感じになっているのではないかと思います。これを、以下の図のようにしたい、ということではないかと思います。これは、「カラム」というコンテンツで実現できるんです!カラムを使ってレイアウトをすると、スマートフォンで見たときには自動的に縦並びになるんです。どのようにすればよいか、見ていきましょう!カラムを入れてみよう「コンテンツを追加」をクリックすると、下の段に「カラム」があります。「カラム」は「列」という意味の英単語なのですが、聞き慣れない言葉なので、なんとなく目に入りづらいかもしれません。これを選択して挿入します。すると、左右に2つの「コンテンツを追加」が表示されます。左右の両方に文章や画像などのコンテンツが入れられるんです!最初にカラムを追加したときには2つしか出ませんが、カラムの段(列)の数は増やすことができます。カラムの上にマウスカーソルを乗せてから「カラムを編集」をクリックします。その状態でよく見ると、列と列の間に「+」アイコンがあります。これをクリックしてみましょう。すると、列が1つ追加されて3列になりました。この3つの列にそれぞれコンテンツを入れてみましょう。カラムにコンテンツを入れてみようすでに縦並びで存在しているコンテンツをカラムに入れるのは、ドラッグして移動すればできます。見出しを移動させたい場合は、見出しのところにマウスカーソルを乗せて(クリックはしません)、右にある4方向の矢印アイコンのところでマウスの左ボタンを押しながらカラムの一番左の列にドラッグします。(移動については「第21回:文字や写真の順番を入れ替えたい!」も参考にしてくださいね!)以下の図のように、一番左の列に「コンテンツを追加」が表示されなくなっていれば成功です!あとは、同じように文章とボタンを入れていくだけです!見出しの下に文章、その下にボタン、という順番で移動して、左側の列を完成させます。その下の見出し、文章、ボタンも、同じようにカラムの中央と右の列に移動させると、こんな風になります。3つの内容が横に並びました!カラムで横にレイアウトするときの注意点カラムを使ってコンテンツをレイアウトするときは、いくつか注意点があります。カラムの中にカラムは入れられないカラムのそれぞれの列に「コンテンツを追加」が出ますが、ここで「カラム」を選択することはできず、エラーになります。カラムの中にカラムを入れるような複雑なレイアウトはできません。レイアウトのズレに気をつけよう今回のように見出し、文章を横並びにする場合、パソコンで見たときの見た目を考えて、できれば文章の分量を揃えたほうがきれいに見えます。最後にボタンがある場合は、使いやすさを考えて横に揃うように調整をしたほうがよいでしょう。カラムとコンテンツの編集状態の違いに気をつけようカラムの中のコンテンツをクリックして編集状態にすると、カラム自体の編集はできません。カラム全体を削除したり移動したりしたいときには、「カラムを編集」をクリックする必要があります。カラムを選択する方法はこちらの解説を参考にしてください。カラムを活用すると、特にパソコンでの見た目の幅が大きく広がります!ぜひぜひ、チャレンジしてみてくださいね。おたよりお待ちしています!「はじめて相談室」では、みなさまからの「はじめてWEB」の素朴な疑問をお待ちしています!「こんなこと聞いたら恥ずかしいかも。」というご質問大歓迎です!「はじめてWEB」ナビゲーターがなんでもお答えしちゃいます!おまちしてまーす!ナビゲーターへの質問はこちらから!このコラムでは、パソコン初心者の方からの「こんなこと聞いてもいいのかしら?」という質問にお答えしています。※毎月1回程度のコラムですので、急を要する質問にはお答えできません。※すべての質問にお答えできるわけではありませんので、あらかじめご了承ください。※Jimdoの操作や、はじめてWEBに関する質問はQ&Aコーナーもご活用ください。確認する「はじめてWEB」でホームページを作成しよう!「はじめてWEB」のホームページ開設支援サービスとは、7つのステップで簡単に無料で作成ができ、さらにその後1年間無料でご利用いただけるサービスです。「はじめてWEB」のお申し込みには「Jimdoアカウント」が必要です。1「Jimdoアカウント」を作成した後に、2「はじめてWEB」の登録を行います。1※「Jimdoアカウント」を既にお持ちの方は、「ログイン」から始めます。»ツイートこのコラムをPDF形式でダウンロードする#fc0(株式会社エフシーゼロ)JimdoExperthttp://fc0.vc/「もっと多くの人に、"Webへの入口"を」をコンセプトに、中小企業や個人商店をメインとしたWebサイトの企画・制作・運営アドバイスなどの業務を行う。初心者を対象とした講師・執筆も多数。これからはじめるDreamweaverの本』(同)、『ああしたい、こう変えたいが手にとるようにわかるCSS基礎』(共著、エムディエヌコーポレーション)など。(著)「Jimdo」で会社やお店のホームページを作りたい方は本書を読めばバッチリ!Jimdoの基本操作から、「会社のホームページ作りの考え方」「会社のホームページに必要な情報/内容」「ホームページを見る人のためのデザイン」「運用して改善していくための方法」といった本格的な知識までを、「プロ」の視点からしっかり解説します。「会社やお店のホームページをこれから作る方」、「満足のいくホームページにしていきたい方」のどちらへもおすすめの1冊です。ための経理サポートサイト文具、通信、オフィスのことなら何でもお任せ問い合わせ件数をアップさせるなら!「通話料無料・わかりやすい番号」のフリーコール事務所開設するなら固定電話番号で信頼アップ本コンテンツは、掲載時点の内容となります。「みんなのビジネスオンライン」は「はじめてWEB」にお読み替えいただきますようお願いいたします。Reserved.「はじめてWEB」はKDDIが提供しています。