このコーナーは HTML CSS のことならなんでもおまかせの マリー と うさぎ界 No.1 とも言われているデザイナー ナムー が WEB ページ作成の コツを解説していきます 少し技術的な内容も含まれていますが 分からない ことは積極的に調べて 1 つ 1 つスキルアップをしていきましょうね! マリー HTML CSS のプロフェッショナル うさぎだけど好きなブラウザは Fire Fox ナムー うさぎ界を知り尽くした凄腕デザイナー うさぎだけど好きな野菜はセロリ
さぁて 送料無料 アイコンをつくって 送料無料を大きくアピ ールするぞーーー! ちょっとまって! テキスト内容をアピールしたいアイコンを画像 でつくってしまうと 思わぬ損をしてしまうことがあるのよ! そうね 画像だと SEO 的な効果も得られないしね 画像は極力使 わないでアイコンを作る方がよさそうだね! え? 画像を使わないでアイコンを作る? そんなことできるの? スタイルシート (CSS) を使えば 全く画像を使わなくても アイコ ンをつくることができるよ いろんなアレンジもできるから 是非マ スターしたいテクニックだね! 2
画像を使わないアイコン / ボタン例 3
へぇぇぇ ~ 画像を使わなくても こんなに鮮やかなアイコンが作 れるんだね でもなぜ 画像を使わないの? もちろん画像を使った方が より装飾的にはなるわ でも検索エン ジンからみたら 画像からはテキスト情報が読み取れないの 画像を使わないアイコンの方が 検索エンジン対策 (SEO) には 効果的 反対に検索ワードとして検索されにくい文字や記号の場合は 画像で作った方がいいかもね 送料無料 人気商品 代引可 といったような 検索キーワー ドとして使われやすい文字のアイコンは 是非このテクニックを使っ てみてね 購買数アップにつながる とても効果的なテクニックだよ! 4
アイコン / ボタンサンプル それでは 一番左の赤いアイコンを HTML と CSS だけで表現してみます HTML <span class="type-a01-red">8000 円以上送料無料 </span> CSS span.type-a01-red { padding: 1px 0 0 1px; border: 1px #dc0000 solid;/* 線の太さ 色 形態 */ color: #dc0000;/* 文字の色 */ font-size: 11px;/* 文字の大きさ */ 上記のアイコンを ボタン ( リンク ) に変更すると 以下の HTML / CSS とな ります HTML <a href=" リンク先 " class="type-a01-red">8000 円以上送料無料 </a> CSS a.type-a01-red { padding: 1px 0 0 1px; border: 1px #dc0000 solid;/* 線の太さ 色 形態 */ color: #dc0000;/* 文字の色 */ font-size: 11px;/* 文字の大きさ */ a.type-a01-orange:hover {/* カーソルが重なった時の動き */ position: relative; top: 1px; 5
次に 少しデザイン性の高いアイコンを表現してみることにします HTML <p class="type-d01-red"> <span class="before">8000 円以上 </span> <span class="after"> 送料無料 </span> </p> CSS p.type-d01-red { border: 2px #e60012 solid;/* 右側の線の太さ 色 形態 */ background-color: #e60012;/* 背景色 */ overflow: hidden; width: 190px;/* 幅 */ p.type-d01-red span.before { padding-top: 7px; display: block; width: 82px;/* 幅 */ float: left; color: #fff;/* 文字の色 */ font-weight: bold;/* 文字の太さ */ font-size: 12px;/* 文字の大きさ */ text-align: center; p.type-d01-red span.after { padding: 0 2px; display: block; width: 104px;/* 幅 */ float: left; color: #e60012;/* 文字の色 */ background-color: #fff;/* 背景色 */ font-weight: bold;/* 文字の太さ */ font-size: 25px;/* 文字の大きさ */ text-align: center; 6
HTML 側で文字を変更すると アイコン / ボタンの文字も変わります 検索エン ジンにヒットさせたい文字列を活用することで 画像アイコンにはできない検 索エンジン対策 (SEO) にも有効です また CSS 側で文字の色や背景色を変えると class で指定した箇所の色や背景 色が全て変わります いろいろと試してみると アイコンデザインの変化が理 解できると思います 本章の後半では 実際にサンプルファイルを利用して いろいろ試してみる方法をご紹介しますので 楽しみにしていてください! 7
ところで どうして CSS を使うのかな?CSS ってとっつきにくく て 難しいイメージがあるのだけど HTML の中でテーブルタグをつかっても 同じようなデザインのア イコンを作ることはできるわ でも CSS を利用すれば 色やデザイ ンは全て CSS の変更だけで変えることができて とても便利なの とくに複数のページで同じ書式を使っている場合は CSS の方が圧 倒的に有利になるね 全ての HTML を編集する手間が 一箇所の CSS の変更で OK になったりするよ ページの構造は HTML で 色やデザインは CSS で管理できるよう になると サイト管理も楽になりそうね! 8
スタイルシートの利点 9
では実際にサンプルコードつかって 画像を使わないアイコンを作ってみまし ょう! 1) サンプルファイルをダウンロードする 2) サーバーにアップロードする 3) HTML / CSS ファイルを編集してみる この 3 段階の作業で 画像を使わないアイコンの作成を実践していきます! 1) サンプルファイルをダウンロードする まずは以下の URL より サンプルファイルをダウンロードしてください http://www.moshimo.com/download/challenge-mn-201109.zip ファイルは zip 形式で圧縮しています ダウンロードしたファイルを 適宜解凍してからご利用ください 10
ファイルの中身は下記のようになっています cssbutton.html サンプル一覧の HTML です css CSS ファイルが入ったフォルダ common.css 利用しません (cssbuttton.html 用の CSS) button.css サンプル一覧のアイコン ボタン用の CSS です 2) サーバーにアップロードする ダウンロードしたファイルを同じ構成のまま ご自身でお持ちのサーバーにア ップロードしてください 既にサーバー上に同じ名前のファイル名がある場合は上書きをしないようにご注意ください 無料サーバー FC2 ホームページ にアップロードした例 11
赤字で囲った部分が 今回アップロードしたファイルです FC2 ホームページの場合 フォルダ単位でアップロードすることができないた め css フォルダは FC2 ホームページ管理画面上の ディレクトリを作成 で 新規作成し その中に common.css と button.css ファイルを個別にアップロ ードしています ブラウザから実際に cssbutton.html にアクセスすると 以下のようなサンプル アイコン / ボタンと その HTML / CSS のソースコードが表示されます 12
3) HTML / CSS ファイルを編集してみる ここまでの作業で ご自身のサーバー上でサンプルを表示することができたと 思います それではいよいよ 実際にいろいろと試していきましょう! ご自身のページの中に 下記のアイコンを作成してみましょう! アイコンを作成したいページの HTML ソースを開き 2 箇所に手を加えます <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/tr/html4/loose.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta http-equiv="content-style-type" content="text/css" /> <meta http-equiv="content-script-type" content="text/javascript" /> <meta http-equiv="x-u-acompatible" content="ie=ie8" /> <meta name="robots" content="noindex,nofollow,noarchive" /> <link rel="stylesheet" href="css/common.css" type="text/css" media="all" /> <link rel="stylesheet" href="css/button.css" type="text/css" media="all" /> <title> 画像を使わずにアイコンをつくる!</title> </head> まずは <head></head> の間に CSS を読み込むための link タグを書き加え ます 上図赤枠 href= の部分は ご自身で CSS を設置したフォルダ構成に合わせて変 更してください 13
次に アイコンを設置する場所に CSS を適用させるために class 名 class= type-d01-orange class= before class= after を書き加えます <body> <p class="type-d01-orange"> <span class="before"> 売れてます!</span> <span class="after"> 人気商品 </span> </p> </body> この class 名はダウンロードしたファイルの button.css に含まれている class 名を指定 実際にご自身の Web ページにブラウザでアクセスしてみて 以下のアイコンが 表示されているかを確認してみましょう! さてここで 枠の色を 青に変える という修正をしてみることにします 今 回はサンプルファイル button.css でいろいろな色のパターンを用意してい ますので まずは HTML の class 指定を変更して対応することにします <body> <p class="type-d01-blue"> <span class="before"> 売れてます!</span> <span class="after"> 人気商品 </span> </p> </body> 14
前項の赤文字部分を修正するだけで全体の色が変わります CSS は便利ですね もちろん サンプルで用意されている以外の色にも 変更ができます その場 合は CSS ファイル側を修正します button.css ファイルをエディタで開い て ファイルの末尾に以下を追加してみましょう p.type-d01-olive { border: 2px #808000 solid;/* 右側の線の太さ 色 形態 */ background-color: #808000;/* 背景色 */ overflow: hidden; width: 190px;/* 幅 */ p.type-d01-olive span.before { padding-top: 7px; display: block; width: 82px;/* 幅 */ float: left; color: #fff;/* 文字の色 */ font-weight: bold;/* 文字の太さ */ font-size: 12px;/* 文字の大きさ */ text-align: center; p.type-d01-olive span.after { padding: 0 2px; display: block; width: 104px;/* 幅 */ float: left; color: #808000;/* 文字の色 */ background-color: #fff;/* 背景色 */ font-weight: bold;/* 文字の太さ */ font-size: 25px;/* 文字の大きさ */ text-align: center; 15
CSS 修正後のアイコン うまく変わりましたか? 今回は画像を使わずに デザイン性のあるアイコンやボタンを作る方法を学び ました サンプルファイルをコピーして 色や枠線の太さなどをいろいろ変え て 是非 HTML / CSS をつかったアイコン / ボタンの作成にチャレンジして みてください このテクニックは SEO に強いサイトを作る方法の一つでもある けれど 画像作成が苦手な人にも とっても役に立つ方法よ 是非マ スターして 応用範囲を広げてみてね! 16