Moshimo Challenge Report

Size: px

Start display at page:

Download "Moshimo Challenge Report"

さみちづ
5 years ago
Views:

1 このコーナーは HTML CSS のことならなんでもおまかせのマリーとうさぎ界 No.1 とも言われているデザイナーナムーが WEB ページ作成のコツを解説していきます少し技術的な内容も含まれていますが分からないことは積極的に調べて 1 つ 1 つスキルアップをしていきましょうね! マリー HTML CSS のプロフェッショナルうさぎだけど好きなブラウザは Fire Fox ナムーうさぎ界を知り尽くした凄腕デザイナーうさぎだけど好きな野菜はセロリ

2 さぁて送料無料アイコンをつくって送料無料を大きくアピールするぞーーー! ちょっとまって! テキスト内容をアピールしたいアイコンを画像でつくってしまうと思わぬ損をしてしまうことがあるのよ! そうね画像だと SEO 的な効果も得られないしね画像は極力使わないでアイコンを作る方がよさそうだね! え? 画像を使わないでアイコンを作る? そんなことできるの? スタイルシート (CSS) を使えば全く画像を使わなくてもアイコンをつくることができるよいろんなアレンジもできるから是非マスターしたいテクニックだね! 2

3 画像を使わないアイコン / ボタン例 3

4 へぇぇぇ ~ 画像を使わなくてもこんなに鮮やかなアイコンが作れるんだねでもなぜ画像を使わないの? もちろん画像を使った方がより装飾的にはなるわでも検索エンジンからみたら画像からはテキスト情報が読み取れないの画像を使わないアイコンの方が検索エンジン対策 (SEO) には効果的反対に検索ワードとして検索されにくい文字や記号の場合は画像で作った方がいいかもね送料無料人気商品代引可といったような検索キーワードとして使われやすい文字のアイコンは是非このテクニックを使ってみてね購買数アップにつながるとても効果的なテクニックだよ! 4

5 アイコン / ボタンサンプルそれでは一番左の赤いアイコンを 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

6 次に少しデザイン性の高いアイコンを表現してみることにします 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

7 HTML 側で文字を変更するとアイコン / ボタンの文字も変わります検索エンジンにヒットさせたい文字列を活用することで画像アイコンにはできない検索エンジン対策 (SEO) にも有効ですまた CSS 側で文字の色や背景色を変えると class で指定した箇所の色や背景色が全て変わりますいろいろと試してみるとアイコンデザインの変化が理解できると思います本章の後半では実際にサンプルファイルを利用していろいろ試してみる方法をご紹介しますので楽しみにしていてください! 7

8 ところでどうして CSS を使うのかな?CSS ってとっつきにくくて難しいイメージがあるのだけど HTML の中でテーブルタグをつかっても同じようなデザインのアイコンを作ることはできるわでも CSS を利用すれば色やデザインは全て CSS の変更だけで変えることができてとても便利なのとくに複数のページで同じ書式を使っている場合は CSS の方が圧倒的に有利になるね全ての HTML を編集する手間が一箇所の CSS の変更で OK になったりするよページの構造は HTML で色やデザインは CSS で管理できるようになるとサイト管理も楽になりそうね! 8

9 スタイルシートの利点 9

10 では実際にサンプルコードつかって画像を使わないアイコンを作ってみましょう! 1) サンプルファイルをダウンロードする 2) サーバーにアップロードする 3) HTML / CSS ファイルを編集してみるこの 3 段階の作業で画像を使わないアイコンの作成を実践していきます! 1) サンプルファイルをダウンロードするまずは以下の URL よりサンプルファイルをダウンロードしてくださいファイルは zip 形式で圧縮していますダウンロードしたファイルを適宜解凍してからご利用ください 10

11 ファイルの中身は下記のようになっています cssbutton.html サンプル一覧の HTML です css CSS ファイルが入ったフォルダ common.css 利用しません (cssbuttton.html 用の CSS) button.css サンプル一覧のアイコンボタン用の CSS です 2) サーバーにアップロードするダウンロードしたファイルを同じ構成のままご自身でお持ちのサーバーにアップロードしてください既にサーバー上に同じ名前のファイル名がある場合は上書きをしないようにご注意ください無料サーバー FC2 ホームページにアップロードした例 11

12 赤字で囲った部分が今回アップロードしたファイルです FC2 ホームページの場合フォルダ単位でアップロードすることができないため css フォルダは FC2 ホームページ管理画面上のディレクトリを作成で新規作成しその中に common.css と button.css ファイルを個別にアップロードしていますブラウザから実際に cssbutton.html にアクセスすると以下のようなサンプルアイコン / ボタンとその HTML / CSS のソースコードが表示されます 12

13 3) HTML / CSS ファイルを編集してみるここまでの作業でご自身のサーバー上でサンプルを表示することができたと思いますそれではいよいよ実際にいろいろと試していきましょう! ご自身のページの中に下記のアイコンを作成してみましょう! アイコンを作成したいページの HTML ソースを開き 2 箇所に手を加えます <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " <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

14 次にアイコンを設置する場所に 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

15 前項の赤文字部分を修正するだけで全体の色が変わります CSS は便利ですねもちろんサンプルで用意されている以外の色にも変更ができますその場合は CSS ファイル側を修正します button.css ファイルをエディタで開いてファイルの末尾に以下を追加してみましょう p.type-d01-olive { border: 2px # 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

16 CSS 修正後のアイコンうまく変わりましたか? 今回は画像を使わずにデザイン性のあるアイコンやボタンを作る方法を学びましたサンプルファイルをコピーして色や枠線の太さなどをいろいろ変えて是非 HTML / CSS をつかったアイコン / ボタンの作成にチャレンジしてみてくださいこのテクニックは SEO に強いサイトを作る方法の一つでもあるけれど画像作成が苦手な人にもとっても役に立つ方法よ是非マスターして応用範囲を広げてみてね! 16

overflow プロパティの指定は親ボックスのスタイルに記述します overflow プロパティは position プロパティ (position: static; 以外 ) の指定がされていなと適用されませんボックスの外にはみ出た部分を表示させたくないときに hidden を使用しますサ

overflow プロパティの指定は親ボックスのスタイルに記述します overflow プロパティは position プロパティ (position: static; 以外 ) の指定がされていなと適用されませんボックスの外にはみ出た部分を表示させたくないときに hidden を使用しますサ 1225-6 練習 6 Overflow The Stage(overflow) ピエロの玉乗りがステージの外から入って外へ出て行くトランジションを作ってみましょう Hover ボタンの上をマウスポインター ( カーソル ) で hover するとピエロの玉乗りがステージの外から入って外へ出て行きます動きの仕組みこのトランジションは次の3つの動きの組み合わせで動きます 1 ピエロとボールの横方向の動き