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

  1. TOP
  2. ホームページのクオリティアップ術:制作編 : 第9回 HTMLとCSSに挑戦!項目に背景色や枠線をつける方法

エキスパートコラム

ホームページのクオリティアップ術:制作編(全11回)

第9回:HTMLとCSSに挑戦!項目に背景色や枠線をつける方法

執筆:赤間 公太郎(株式会社マジカルリミックス)

2016年1月25日更新

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

閲覧数4,738views

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

"ホームページのクオリティアップ術:制作編"のコラムを担当する、マジカルリミックスの赤間です。全11回のこのコラムでは、ホームページづくりに役立つサービスやその利用方法をご紹介していきます。

便利な無料のWebサービスを活用して、効率よく質の高いホームページを目指しましょう。

今回のコラムでは、Jimdoで挿入した一部の項目に、背景色や枠線をつける方法をご紹介します。

背景色や枠線をつける、その前に…Jimdoはそもそもコードを書くことを前提としていない

ホームページを作るためのサービス「Jimdo」では、マウスクリックとキーボードのタイピングだけで、すばらしいホームページを作ることができます。ホームページ作りは、本来あらゆる専門知識を必要としていましたが、それらを意識することなく、見たままのデザインで仕上げていくような作り方です。

誰にでも簡単に使えるようにするためには、「ルール」が必要です。Jimdoに限らず、汎用的にひろく使われるもには必ずルールが存在し、その中でやりくりすることで整合性や操作性が保たれるのです。

Jimdoをはじめとするホームページは「HTML(文書構造を指定する言語)」や「CSS(装飾を行う言語)」といった専門の言語で構築されています。私たちは、そのコードを気にすることなく、Jimdoがすべて処理してくれているおかげで、クリックとタイピングだけでホームページ作りが可能となっているのですね。

JimdoはHTMLやCSSといった専門知識を意識することなく、ホームページ作りが可能

Jimdoはホームページ制作のプロも使用する

では、JimdoでHTMLやCSSなどのコードを利用できないか、というと実はそうではありません。あくまで万人が使えるような基本の操作を前提としつつ、コードを書くエリアも整備されています。

Jimdoはホームページ制作のプロも使用するサービスです。そういった人たちがより高度な表現を行うためにも、コードを管理する機能も用意されているのです。

文章項目などの「</>」アイコンをクリックすると、その部分のコードが表示される

プロはこの部分で編集することも多い

2016年1月現在、Jimdoでは項目の一部に背景色や枠線をつける方法は実装されていません。今回は、Jimdoの裏側をのぞいて、コードの調整にチャレンジしてみましょう。

Before After

今回はとあるホームページの文章部分に、装飾を施してみます。[文章]項目を挿入し、入力したテキストの一部分に適用します。

Before

通常通り入力した内容

After

背景と枠線をつけた

項目の一部に背景色をつける

コードを表示する

まず、Jimdoの[文章]項目を挿入し、通常通り文字を入力します。その後、「</>」アイコンをクリックしてコードを表示してみましょう。

<p>お客様のご要請により実施される任意監査につきましても、高品質なサービスをご提供しております。</p>

このように、<p>からはじまり、</p>で終わっているのがわかります。この「<p>」は、段落を意味するParagraph(パラグラフ)の頭文字をとったものです。意味としては、「文章中の段落」ということが、HTMLとして書かれています。

こういった専用のコードをコントロールしていくことで、細かな装飾がなされるのです。

装飾のためのコードを書き入れる

次に、装飾のためのコードを書き入れます。もともと入っていた一文の前後に改行を入れ、1行目に<div>、3行目に</div>を書き入れます。いずれも、すべて半角英小文字で指定します。 この「<div>」は、区切りを意味するDivision(ディヴィジョン)の頭文字をとったものです。コード的には何の意味も持ちません。装飾をするために用いられる記述です。

<div>
<p>お客様のご要請により実施される任意監査につきましても、高品質なサービスをご提供しております。</p>
</div>

色をつける指定を行う

1行目の<div>に、文字を書き足します。これらはすべて、半角英数字です。
「v」の後ろに半角スペースを挿入し、続いて以下の通りに入力します。
※入力が不安な場合、このページにコピー&ペーストができるコードを準備しましたので活用しましょう。

<div style="background: #ddf4ff; padding: 20px;">
<p>お客様のご要請により実施される任意監査につきましても、高品質なサービスをご提供しております。</p>
</div>

最後に、[保存]ボタンを押せば完了です。

背景色と内側の余白がつく

それぞれの指定にはすべて意味があるのですが、深い説明は今回は割愛します。ざっくりした説明をすると、以下のように考えることができます。

background(背景)を青くする、padding(内側の余白)を20ピクセルあける

項目の一部に枠線をつける

コードを表示する

先ほどの背景色指定と同様、まずは[文章]項目を挿入し、通常通り文字を入力します。その後、「</>」アイコンをクリックしてコードを表示してみましょう。

<p>当税理士事務所では、単に監査を実施するだけでなく、監査人としての立場に反しない範囲で、お客様が把握されにくい業務上の改善点について、できる限りアドバイスさせていただきたいと思っております。</p>

同じように、<p>からはじまり、</p>で終わっている段落として扱われています。通常、文章項目で文字を入力した際、すべて段落として扱われます。

装飾のためのコードを書き入れる

背景色と同じように、装飾のためのコードを書き入れます。もともと入っていた一文の前後に改行を入れ、1行目に<div>、3行目に</div>を書き入れます。いずれも、すべて半角英小文字で指定します。

<div>
<p>当税理士事務所では、単に監査を実施するだけでなく、監査人としての立場に反しない範囲で、お客様が把握されにくい業務上の改善点について、できる限りアドバイスさせていただきたいと思っております。</p>
</div>

枠線をつける指定を行う

1行目の<div>に、文字を書き足します。これらはすべて、半角英数字です。
「v」の後ろに半角スペースを空け、続いて以下の通りに入力します。
※入力が不安な場合、同じくこのページにコピー&ペーストができるコードがありますので、活用しましょう。

<div style="border: 2px solid #3399cc; margin: 5px; padding: 10px;">
<p>当税理士事務所では、単に監査を実施するだけでなく、監査人としての立場に反しない範囲で、お客様が把握されにくい業務上の改善点について、できる限りアドバイスさせていただきたいと思っております。</p>
</div>

最後に、[保存]ボタンを押せば完了です。

枠線と外側・内側の余白がつく

深い説明は割愛しますが、ざっくりした説明をすると、以下のように考えることができます。

border(枠線)を2ピクセル・実線・青青くする、margin(外側の余白)を5ピクセルあける、内側の余白を10ピクセルあける

「solid」の部分を他の文字に変えると、多様な枠線にすることができます。

効果
solid 1本線
double 2本線
groove 立体的に窪んだ線
ridge 立体的に隆起した線
dashed 破線で表示
dotted 点線で表示

コードの意味を解説

今回使用したいくつかのコードをざっくり解説します。人に例えると、このようなイメージで考えることができます。

  • background … 背景の指定。人に例えると、肌の色。
  • border … 境界線。人に例えると、服。
  • padding … 内側の余白。人に例えると、人間と服の間のすきま。
  • margin … 項目同士の間隔。人に例えると、お互いの距離。

これ以外にもたくさん存在しますが、「background」「border」「padding」「margin」を調整するだけでも見た目をプロっぽく整えることが可能です。

まとめ

  • Jimdoはコードを意識することなくホームページが作成できるツール
  • しかし、それ以上のことを求めると、HTMLやCSSといった専用のコードの扱いが必要

今回のコラムは、専門的な知識が必要となる、高度な内容でした。まずはコピーペーストからでも適用することができますので、ぜひチャレンジしてみてください。

次回は、ホームページ制作に役立つ「無料で使える写真素材サイト20個」をご紹介します。(つづく)

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

赤間 公太郎(あかま・こうたろう)

赤間 公太郎(あかま・こうたろう)

株式会社マジカルリミックス 代表取締役CEO/JimdoExpert
http://www.magical-remix.co.jp/
http://www.kotalog.net/

宮城県出身。IT関連の専門学校を卒業後、仙台のデザイン会社に入社。Webサイトのデザイン・コーディングを中心に従事。2002年退職後すぐに個人事業としてマジカルリミックスを創業。2007年に法人化し株式会社マジカルリミックスを設立。規模を問わずお客様のニーズにあわせたWebサイトの企画立案、制作、アクセスと売上アップをめざした更新サポートまで一貫して手がけている。
また、Web制作だけにとどまらず、社内向けのセキュリティ・IT活用のプライベートトレーニング、セミナー出演、執筆なども意欲的に手がける。全国からの講演依頼も多数。2005年から仙台の専門学校で、非常勤講師としてWeb制作講義を担当。

主な著書に『10日でSEO&アクセスアップ Jimdoデザインブック』(エムディエヌコーポレーション)『10日で作るかっこいいホームページ Jimdoデザインブック』(同)『HTML5+CSS3の新しい教科書 基礎から覚える、深く理解できる。』(共著、同)『基礎から覚える、深く理解できる。Webデザインの新しい教科書』(同)。

[所属]
仙台商工会議所 エキスパートバンク登録/みやぎ産業振興機構 専門家アドバイザー/みやぎ工業会正会員

10日で作るかっこいいホームページ Jimdoデザインブック 改訂新版

  • 「はじめてWEB」でホームページをはじめよう!
  • Jimdoリメイク | プロがあなたのホームページを50,000円(税抜)でリニューアル!
  • 問い合わせ件数をアップさせるなら!「通話料無料・わかりやすい番号」のフリーコール
  • 文具、通信、オフィスのことなら何でもお任せ!まとめてオフィス

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

コラム週間アクセスランキング[期間:2017/7/30~2017/8/5]

おすすめコンテンツ

はじめてWEBおすすめ本

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

  • ソウギョウノート

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

  • 経理通信

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

  • まとめてオフィス

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

  • フリーコールS

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

  • auオフィスナンバー

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