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

Size: px

Start display at page:

Download "Jimdo はホームページ制作のプロも使用するでは JimdoでHTMLやCSSなどのコードを利用できないかというと実はそうではありませんあくまで万人が使えるような基本の操作を前提としつつコードを書くエリアも整備されています Jimdoはホームページ制作のプロも使用するサービスですそういっ"

としみかつま
7 years ago
Views:

1 ホームページのクオリティアップ術 : 制作編 ( 全 11 回 ) 第 9 回 :HTML と CSS に挑戦! 項目に背景色や枠線をつける方法執筆 : 赤間公太郎 ( 株式会社マジカルリミックス ) " ホームページのクオリティアップ術 : 制作編 " のコラムを担当するマジカルリミックスの赤間です全 11 回のこのコラムではホームページづくりに役立つサービスやその利用方法をご紹介していきます便利な無料の Web サービスを活用して効率よく質の高いホームページを目指しましょう今回のコラムでは Jimdo で挿入した一部の項目に背景色や枠線をつける方法をご紹介します背景色や枠線をつけるその前に Jimdo はそもそもコードを書くことを前提としていないホームページを作るためのサービス Jimdo ではマウスクリックとキーボードのタイピングだけですばらしいホームページを作ることができますホームページ作りは本来あらゆる専門知識を必要としていましたがそれらを意識することなく見たままのデザインで仕上げていくような作り方です誰にでも簡単に使えるようにするためにはルールが必要です Jimdoに限らず汎用的にひろく使われるもには必ずルールが存在しその中でやりくりすることで整合性や操作性が保たれるのです Jimdoをはじめとするホームページは HTML( 文書構造を指定する言語 ) や CSS( 装飾を行う言語 ) といった専門の言語で構築されています私たちはそのコードを気にすることなく Jimdoがすべて処理してくれているおかげでクリックとタイピングだけでホームページ作りが可能となっているのですね Jimdo は HTML や CSS といった専門知識を意識することなくホームページ作りが可能

2 Jimdo はホームページ制作のプロも使用するでは JimdoでHTMLやCSSなどのコードを利用できないかというと実はそうではありませんあくまで万人が使えるような基本の操作を前提としつつコードを書くエリアも整備されています Jimdoはホームページ制作のプロも使用するサービスですそういった人たちがより高度な表現を行うためにもコードを管理する機能も用意されているのです文章項目などの </> アイコンをクリックするとその部分のコードが表示されるプロはこの部分で編集することも多い 2016 年 1 月現在 Jimdo では項目の一部に背景色や枠線をつける方法は実装されていません今回は Jimdo の裏側をのぞいてコードの調整にチャレンジしてみましょう

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

4 背景と枠線をつけた項目の一部に背景色をつけるコードを表示するまず Jimdo の [ 文章 ] 項目を挿入し通常通り文字を入力しますその後 </> アイコンをクリックしてコードを表示してみましょう <p> お客様のご要請により実施される任意監査につきましても高品質なサービスをご提供しております </p> このように <p> からはじまり </p> で終わっているのがわかりますこの <p> は段落を意味する Paragraph( パラグラフ ) の頭文字をとったものです意味としては文章中の段落ということが HTML として書かれていますこういった専用のコードをコントロールしていくことで細かな装飾がなされるのです装飾のためのコードを書き入れる次に装飾のためのコードを書き入れますもともと入っていた一文の前後に改行を入れ 1 行目に <div> 3 行目に </di v> を書き入れますいずれもすべて半角英小文字で指定しますこの <div> は区切りを意味するDivision( ディヴィジョン ) の頭文字をとったものですコード的には何の意味も持ちません装飾をするために用いられる記述です <div>

5 <p> お客様のご要請により実施される任意監査につきましても高品質なサービスをご提供しております </p> </div> 色をつける指定を行う 1 行目の <div> に文字を書き足しますこれらはすべて半角英数字です v の後ろに半角スペースを挿入し続いて以下の通りに入力します入力が不安な場合このページにコピー & ペーストができるコードを準備しましたので活用しましょう <div style="background: #ddf4ff; padding: 20px;"> <p> お客様のご要請により実施される任意監査につきましても高品質なサービスをご提供しております </p> </div> 最後に [ 保存 ] ボタンを押せば完了です背景色と内側の余白がつくそれぞれの指定にはすべて意味があるのですが深い説明は今回は割愛しますざっくりした説明をすると以下のように考えることができます background( 背景 ) を青くする padding( 内側の余白 ) を 20 ピクセルあける項目の一部に枠線をつけるコードを表示する先ほどの背景色指定と同様まずは [ 文章 ] 項目を挿入し通常通り文字を入力しますその後 </> アイコンをクリックしてコードを表示してみましょう

<p> 当税理士事務所では単に監査を実施するだけでなく監査人としての立場に反しない範囲でお客様が把握されにくい業務上の改善点についてできる限りアドバイスさせていただきたいと思っております </p> 同じように <p> からはじまり </p> で終わっている段落として扱われています通常文章項目で文字を入力した際すべて段落として扱われます装飾のためのコードを書き入れる

6 <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> 最後に [ 保存 ] ボタンを押せば完了です枠線と外側内側の余白がつく

7 深い説明は割愛しますがざっくりした説明をすると以下のように考えることができます 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といった専用のコードの扱いが必要今回のコラムは専門的な知識が必要となる高度な内容でした

8 これ以外にもたくさん存在しますが background border padding margin を調整するだけでも見た目をプロっぽく整えることが可能ですまとめ Jimdoはコードを意識することなくホームページが作成できるツールしかしそれ以上のことを求めると HTMLやCSSといった専用のコードの扱いが必要今回のコラムは専門的な知識が必要となる高度な内容でしたまずはコピーペーストからでも適用することができますのでぜひチャレンジしてみてください次回はホームページ制作に役立つ無料で使える写真素材サイト 20 個をご紹介します ( つづく ) 次回のコラムを見る» 赤間公太郎 ( あかまこうたろう ) 株式会社マジカルリミックス代表取締役 CEO/JimdoExpert 宮城県出身コンピューター系の専門学校を卒業後仙台のデザイン会社に入社 Webサイトのデザインコーディングをはじめとし各種デジタルメディアのデザインに従事 2002 年に退職ししばらくフリーランスとして活動 2007 年に株式会社マジカルリミックスを設立社内での業務担当は Webサイト運用に関するコンサルティング社内向けITトレーニングセミナー出演執筆など 2005 年より仙台市内の専門学校において非常勤講師としてWeb 制作の講義を担当主な著書に HTML5+CSS3の新しい教科書基礎から覚える深く理解できる ( 共著エムディエヌコーポレーション ) 基礎から覚える深く理解できる Webデザインの新しい教科書 ( 同 ) ああしたいこう変えたいが手にとるようにわかるCSS 基礎 ( 同 ) Copyright 2016 はじめて WEB All Rights Reserved.

写真をクリックすると拡大表示される Flashフォーマット Flashフォーマットは写真が自動または手動で切り替わっていくスライドショー形式の表示方法ですページ内の情報が多い場合や写真をイメージ的に見せたい場合に便利です iphoneをはじめとする一部のスマートフォンはflashをサポー

写真をクリックすると拡大表示される Flashフォーマット Flashフォーマットは写真が自動または手動で切り替わっていくスライドショー形式の表示方法ですページ内の情報が多い場合や写真をイメージ的に見せたい場合に便利です iphoneをはじめとする一部のスマートフォンはflashをサポーみんビズ制作講座デザインカスタマイズ全10回第8回フォトギャラリーを使ってみよう執筆赤間公太郎株式会社マジカルリミックスみんビズでは写真を掲載する際には通常写真機能を使用しますしかし写真の点数が多くなればなるほど管理も大変になります多くの写真を扱う場合はフォトギャラリーが便利ですみんビズのフォトギャラリーの使い方を見てみましょうフォトギャラリーはどんな機能