ホームページのクオリティアップ術 : 制作編 ( 全 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 double groove ridge dashed dotted 1 本線 2 本線立体的に窪んだ線立体的に隆起した線破線で表示点線で表示 コードの意味を解説 今回使用したいくつかのコードをざっくり解説します 人に例えると このようなイメージで考えることができます 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 はじめて WEB All Rights Reserved. http://hajimeteweb.jp/