デザインの学校 ウェブデザイン 応用編 第4回

最近梅雨入りして天気の良くない日が続いてて…なかなかお洗濯の気分にな
りません
こんな時期、服にカビとか生えちゃったりするのかなーって一人暮らし初心者は思うのです。
服に生えるカビって何色なのかなー?
生えてもわからなかったらショックだなー
なんて妄想が
今日の授業内容はスタイルシート( Cascading Style Sheets )SEO対策です。
今日のポイントスタイルシートとは!
HTMLの簡略化とサイトの見栄えを良くさせることもできる素敵なテクニックです
大雑把に言ってしまえば文字をきれいに見せる方法
文字の色、サイズ、背景色などなど…
タグで指定してあげれば色んなことができるのですが、文字をかっこ良く見せるために毎回<font color="#000000" size="2"~></font>なんて書いてたらやっぱり大変なんですよね
しかもHTMLもごちゃごちゃ…
それを解消するのがスタイルシート
スタイルシートを使うには方法は2つあります
ではまずそれぞれにスタイルシートの設定をしてみましょう!!
2つの設定に共通のポイント部分は

 <html>
 <head>
 <title>~</title>
 ★★★←ここ!
 </head>
 <body> ~

それを頭に入れていきましょー!
(1)まずは一つのページの中だけで適用する方法です。
 ソース内の★★★ポイント部分に

 <style type="text/css">
 <!–
 スタイル名
 {プロパティ:値;}
 –>
 </style>

こんなタグを記述します。
次にスタイル名と文字の"何"(プロパティ)を"どうする"(値)か指定します。

 <style type="text/css">
 <!–
 pink{       (スタイル名はpink)
 color:#FF0033; (色をピンクに)
 font-size:14pt;  (サイズを14ptに)
 font-weight:bold; (文字のウェイトを太く)
 }
 –>
 </style>

1つ目の設定はココマデ
(2)次にリンクを使って複数のページに適用する方法です
まず通常のHTMLファイル以外にもう一つ拡張子が.cssのファイルを作ります。ここでは仮にtest.cssとしましょう。
そしてその.cssファイルの中に先ほどコメントタグ内に記述した スタイル名{プロパティ:値;} を同様に記述していきます。

 pink{
 color:#FF0033;
 font-size:14pt;
 font-weight:bold;
 }

終わったら、HTMLページに戻ってポイント★★★部分に

 <link href="test.css" rel="stylesheet" type="text/css">

と記述します。これでリンクが完成です。
2つ目の設定はココマデ
(3)次は設定したスタイルシートの適用方法で
(1)、(2)共通です適用したい文章を

 <span class="pink">スタイルシート適用して~(-人-)</span>

こんなタグで挟んであげると…
 スタイルシート適用して~(-人-)
こうなるんです
どうですか?ちょっと魔法みたいですね♪
ちなみにタグの<●● style="スタイル名">●●はdivやpなどでも大丈夫です。
見え方にそれぞれ差がありますので色々試してみてくださいね。
 スタイルシート勉強中 
こんな感じもスタイルシートでできちゃいます
プロパティの種類や値の入力の仕方も"スタイルシート"というキーワードで検索すればたくさん出てきます。
たくさん勉強して満足のいくサイトづくりを目指したいですね。
さて次はSEO対策
みなさんが日頃使っている検索エンジン、たとえば Yahoo!google などありますね。
何の気なくしている検索ですけど、検索結果がなんでああいう順序で表示されるかご存知ですか?
検索エンジンには、ディレクトリ型ロボット型とがあります。
(Yahoo!、google ともにディレクトリ型とロボット型の両方があります)
SEO対策の対象となるのはロボット型検索エンジンです
ロボット型は登録申請のあったサイトをクローラスパイダー等と呼ばれるロボットが自動で世界中のサイトを巡回し、ソースコードを解析するのです。
そしてロボットが検索キーワードに合致している適切なサイトだと思ったものから順に表示されるわけです
それだけが判断の全てではありませんがその解析結果は大切な判断材料なんですよー
ソースコードの中でロボットが大事だと判断するのもので代表的なものは title タグと h1 タグです。
この2つのタグの中に書かれたキーワードがとっても重要視されるそうです!
ページの中で1回しか使われないタグだからロボットも重要だと思うんでしょうね
たとえばSEO対策を考えて Yahoo!Japan にタイトルをつけるなら《 世界最大!キーワード・カテゴリで検索できるポータルサイトYahoo!Japan 》ってところでしょうか
あとは文中の strong(かつては b )、em(かつては i )、a href ~ タグも大事なポイントです!文中に意識的に増やしてみたら表示順位があがるかも
今日からSEO対策にも気を配って、検索サイトでの上位表示を目指してみては??

 

WEB(ホームページ)デザイン中級者向き 山梨県デザインスクール ウェブデザインスタジオ山梨

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

CAPTCHA


*




PAGE TOP