ホームページのクオリティアップ術：制作編（全11回）
第9回：HTMLとCSSに挑戦！項目に背景色や枠線をつける方法
執筆：赤間 公太郎（株式会社マジカルリミックス）
"ホームページのクオリティアップ術：制作編"のコラムを担当する、マジカルリミックスの赤間です。全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行目に</di v>を書き入れます。いずれも、すべて半角英小文字で指定します。
この「<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個」をご紹介します。（つづく）
次回のコラムを見る »
赤間 公太郎（あかま・こうたろう）
株式会社マジカルリミックス 代表取締役CEO／JimdoExpert http://www.magical-remix.co.jp/
http://www.kotalog.net/
宮城県出身。コンピューター系の専門学校を卒業後、仙台のデザイン会社に入社。
Webサイトのデザイン・コーディングをはじめとし、各種デジタルメディアのデザインに従事。2002年に退職し、
しばらくフリーランスとして活動。2007年に株式会社マジカルリミックスを設立。社内での業務担当は、Webサ イト運用に関するコンサルティング、社内向けITトレーニング、セミナー出演、執筆など。2005年より仙台市内の 専門学校において、非常勤講師としてWeb制作の講義を担当。
主な著書に『HTML5+CSS3の新しい教科書
基礎から覚える、深く理解できる。』（共著、エムディエヌコーポレーション）、『基礎から覚える、深く理解できる。
Webデザインの新しい教科書』（同）、『ああしたい、こう変えたいが手にとるようにわかるCSS基礎』（同）。
Copyright 2016 はじめてＷＥＢ All Rights Reserved.
http://hajimeteweb.jp/
