公太郎(株式会社マジカルリミックス)2016年1月25日更新ツイート閲覧数11,460viewsこのコラムをPDF形式でダウンロードする"ホームページのクオリティアップ術:制作編"のコラムを担当する、マジカルリミックスの赤間です。全11回のこのコラムでは、ホームページづくりに役立つサービスやその利用方法をご紹介していきます。便利な無料のWebサービスを活用して、効率よく質の高いホームページを目指しましょう。今回のコラムでは、Jimdoで挿入した一部の項目に、背景色や枠線をつける方法をご紹介します。背景色や枠線をつける、その前に...Jimdoはそもそもコードを書くことを前提としていないホームページを作るためのサービス「Jimdo」では、マウスクリックとキーボードのタイピングだけで、すばらしいホームページを作ることができます。ホームページ作りは、本来あらゆる専門知識を必要としていましたが、それらを意識することなく、見たままのデザインで仕上げていくような作り方です。誰にでも簡単に使えるようにするためには、「ルール」が必要です。Jimdoに限らず、汎用的にひろく使われるもには必ずルールが存在し、その中でやりくりすることで整合性や操作性が保たれるのです。Jimdoをはじめとするホームページは「HTML(文書構造を指定する言語)」や「CSS(装飾を行う言語)」といった専門の言語で構築されています。私たちは、そのコードを気にすることなく、Jimdoがすべて処理してくれているおかげで、クリックとタイピングだけでホームページ作りが可能となっているのですね。JimdoはHTMLやCSSといった専門知識を意識することなく、ホームページ作りが可能Jimdoはホームページ制作のプロも使用するでは、JimdoでHTMLやCSSなどのコードを利用できないか、というと実はそうではありません。万人が使えるような基本の操作を前提としつつ、コードを書くエリアも整備されています。Jimdoはホームページ制作のプロも使用するサービスです。いった人たちがより高度な表現を行うためにも、コードを管理する機能も用意されているのです。文章項目などの「</>」アイコンをクリックすると、その部分のコードが表示されるプロはこの部分で編集することも多い2016年1月現在、Jimdoでは項目の一部に背景色や枠線をつける方法は実装されていません。今回は、Jimdoの裏側をのぞいて、コードの調整にチャレンジしてみましょう。After今回はとあるホームページの文章部分に、装飾を施してみます。[文章]項目を挿入し、入力したテキストの一部分に適用します。Before通常通り入力した内容After背景と枠線をつけた項目の一部に背景色をつけるコードを表示するまず、Jimdoの[文章]項目を挿入し、通常通り文字を入力します。その後、「</>」アイコンをクリックしてコードを表示してみましょう。<p>お客様のご要請により実施される任意監査につきましても、高品質なサービスをご提供しております。</p>このように、<p>からはじまり、</p>で終わっているのがわかります。この「<p>」は、段落を意味するParagraph(パラグラフ)の頭文字をとったものです。意味としては、「文章中の段落」ということが、HTMLとして書かれています。いった専用のコードをコントロールしていくことで、細かな装飾がなされるのです。装飾のためのコードを書き入れる次に、装飾のためのコードを書き入れます。入っていた一文の前後に改行を入れ、1行目に<div>、3行目に</div>を書き入れます。いずれも、すべて半角英小文字で指定します。この「<div>」は、区切りを意味するDivision(ディヴィジョン)の頭文字をとったものです。コード的には何の意味も持ちません。装飾をするために用いられる記述です。<div><p>お客様のご要請により実施される任意監査につきましても、高品質なサービスをご提供しております。</p></div>色をつける指定を行う1行目の<div>に、文字を書き足します。これらはすべて、半角英数字です。「v」の後ろに半角スペースを挿入し、続いて以下の通りに入力します。※入力が不安な場合、このページにコピー&ペーストができるコードを準備しましたので活用しましょう。20px;"><p>お客様のご要請により実施される任意監査につきましても、高品質なサービスをご提供しております。</p></div>最後に、[保存]ボタンを押せば完了です。背景色と内側の余白がつくそれぞれの指定にはすべて意味があるのですが、深い説明は今回は割愛します。した説明をすると、以下のように考えることができます。background(背景)を青くする、padding(内側の余白)を20ピクセルあける項目の一部に枠線をつけるコードを表示する先ほどの背景色指定と同様、まずは[文章]項目を挿入し、通常通り文字を入力します。その後、「</>」アイコンをクリックしてコードを表示してみましょう。<p>当税理士事務所では、単に監査を実施するだけでなく、監査人としての立場に反しない範囲で、お客様が把握されにくい業務上の改善点について、できる限りアドバイスさせていただきたいと思っております。</p>同じように、<p>からはじまり、</p>で終わっている段落として扱われています。通常、文章項目で文字を入力した際、すべて段落として扱われます。装飾のためのコードを書き入れる背景色と同じように、装飾のためのコードを書き入れます。入っていた一文の前後に改行を入れ、1行目に<div>、3行目に</div>を書き入れます。いずれも、すべて半角英小文字で指定します。<div><p>当税理士事務所では、単に監査を実施するだけでなく、監査人としての立場に反しない範囲で、お客様が把握されにくい業務上の改善点について、できる限りアドバイスさせていただきたいと思っております。</p></div>枠線をつける指定を行う1行目の<div>に、文字を書き足します。これらはすべて、半角英数字です。「v」の後ろに半角スペースを空け、続いて以下の通りに入力します。※入力が不安な場合、同じくこのページにコピー&ペーストができるコードがありますので、活用しましょう。10px;"><p>当税理士事務所では、単に監査を実施するだけでなく、監査人としての立場に反しない範囲で、お客様が把握されにくい業務上の改善点について、できる限りアドバイスさせていただきたいと思っております。</p></div>最後に、[保存]ボタンを押せば完了です。枠線と外側・内側の余白がつく深い説明は割愛しますが、ざっくりした説明をすると、以下のように考えることができます。border(枠線)を2ピクセル・実線・青青くする、margin(外側の余白)を5ピクセルあける、内側の余白を10ピクセルあける「solid」の部分を他の文字に変えると、多様な枠線にすることができます。今回使用したいくつかのコードをざっくり解説します。人に例えると、このようなイメージで考えることができます。人に例えると、肌の色。