ホームページ制作/WEBサイト制作、システム開発の株式会社コンサイズ東京都渋谷区恵比寿

株式会社コンサイズトップ > メールマガジンバックナンバー > 第３６号 2007.02.22

なるほど！よくわかる！ホームページ運営！第36号 2007.2.22

まぐまぐで発行中！なるほど！よくわかる！ホームページ運営

　━━━━━━━━━━━━━━━━━━━━━━ vol.36━ 2007. 2.22 ━
　　　なるほど！よくわかる！ホームページ運営！
　━━━━━━━━━━━━━━━━━━━━━━━━━━発行部数108部━
　■ カレンダー・暦 イベント
　■ CSSに挑戦！
　■ 編集後記
　
　◆━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━◆
　　カレンダー・暦 イベント　2007.2.19 ～ 2007.3.12
　◆───────────────────────────────◆
　
　・ひな祭り・上巳・桃の節句　３月３日
　※2.12 ～ 3.5 のカレンダーはバックナンバーを参考にしてください。
　▼ 第３５号 
http://blog.mag2.com/m/log/0000199475/108243878.html
　
　東京では春一番も吹いて、暖かく感じる日も多くなってきました。
　本当に今年の冬はどうしちゃったんでしょうね？
　
　心配やら嬉しいやら、やっぱり心配やら複雑です。
　
　◆━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━◆
　　CSSに挑戦！
　◆───────────────────────────────◆
　
　　さて
　
　　ＣＳＳって？？？
　
　　現在、ホームページの制作において　「ＣＳＳ」　は
　　はずせない技術と言えるでしょう。
　
　　しかし
　
　　ハードルが高いのも確かです。
　
　　このメルマガでは技術的要素も取り上げていこうと思っているのですが
　　そこは「もちは餅屋」、専門誌に任せるとして
　
　　・このメルマガで興味をもってもらおう！
　　・一段階段を上がる「スロープ」のような役割になろう！
　
　　というスタンスで行きたいと思います。
　
　　ご興味が沸いた方はこのあと専門誌、解説サイトなどで
　　学んでみることをオススメします。
　
　------------------------------------------------------------------
　■ ＣＳＳ ＝ カスケーディング・スタイル・シート
　------------------------------------------------------------------
　
　　まずは用語解説から
　
　　▼ CSSとは
http://ja.wikipedia.org/wiki/CSS
　　▼ Cascading Style Sheets

http://ja.wikipedia.org/wiki/Cascading_Style_Sheets
　※ 上記ページは本当に参考になります。
　
　要するにホームページデザインをより細かく
　設定するための技術です。
　
　また、このＣＳＳによって同じＨＴＭＬがまったく違ったデザインに
　変更することが出来ます。
　
　それはＨＴＭＬタグに効果を重ね合わせる（カスケード）ことができる
　ためです。
　
　プロっぽいホームページデザインには欠かすことの出来ない
　要素のひとつです。
　
　
　
　------------------------------------------------------------------
　■ あ！　そういうことか！　と　思える解説
　------------------------------------------------------------------
　
　たとえば
　<BODY> というタグがありますよね。
　
　ホームページを作成する上でこれがないと内容が書けません。
　
　
　<BODY> と </BODY> の間がブラウザ上に表現される内容になります。
　
　この<BODY>タグに背景色とかテキストの色とかリンクの色とか
　要素をつけたりしますよね。
　
　<body bgcolor="背景の色" background="背景画像ファイル名"
　　 text="文字の色" link="リンク色" vlink="訪れたリンク色" 
　　 alink="リンクをクリックしたときの色">
　
　といった感じになります。
　
　これをＣＳＳで書くと
　
  <STYLE type="text/css">

  BODY {
    background-color:背景の色;
    background-image:url(背景画像のファイル名);
    color:文字の色;
  }
  a { color:リンク色; }
  a:visited { color:訪れたリンク色; }
  a:active { color:リンクをクリックしたときの色; }
  </STYLE>
　
　となります。
　この<STYLE ～> から </STYLE> のタグは
　<HEAD>と</HEAD>の間に記述してください。
　
　ん～やっぱり難しいじゃん！
　
　と思いましたか？
　
　確かに<BODY>だけで説明するから悪いんです。（笑）
　
　これをテーブルタグで説明すると便利だな感が沸きます。（多分・・・）
　
　同じページ内に同様のテーブルタグを何度か書かなければならない
　ことってありませんか？
　
　○ 商品の一覧ページ
　○ スタッフ紹介のページ
　○ トップページ
　
　このような場面ではテーブルタグを使って一つ一つの記事を
　囲むことが多くありませんか？
　
　こんなとき絶対便利です。（と思っています・・・）
　
　たとえばー
　
  <TABLE width="横幅" height="高さ" bgcolor="背景色" 
    align="位置"
    cellspacing="枠の太さ" cellpadding="文字と枠の間" 
    border="枠線の太さ" bordercolor="枠線の色">

    <TR>
      <TD>
        適当な記事～～いろいろ～～<BR>
        改行後～～いろいろなことがありました。
      </TD>
    </TR>

  </TABLE>
　
　というテーブルタグをいくつか書く場合
　すべてに<TABLE ～>と長々タグを書くのなら
　
　<HEAD>と</HEAD>の間に
　
  <STYLE type="text/css">
  .tbl {
    width:横幅;
    height:高さ;
    background-color:背景色;
    color:文字の色;
    border-style:solid; （実線 そのたの線も種類あり）
    border-width:枠線の太さ;
    border-color:枠線の色;
  }
  </STYLE>
　
　と記述しておき
　
　それぞれの<TABLE>タグを
　
  <TABLE class="tbl">

    <TR>
      <TD>
        適当な記事～～いろいろ～～<BR>
        改行後～～いろいろなことがありました。
      </TD>
    </TR>

  </TABLE>
　
　とすればよくなります。
　
　<TABLE ～> の中身がすっきりしましたね。
　
　この　class="tbl"　というのが
　
　<STYLE ～>から</STYLE>の中で 定義 した
　「.tbl」の スタイル ということになります。
　
　class="tbl" という具合に指定する際には
　先頭の「.（ドット）」は要りません。
　
　これで同じスタイルのテーブルが何個あっても
　ＨＴＭＬがすっきりします。
　
　
　------------------------------------------------------------------
　■ もっと　教えろ！！！
　------------------------------------------------------------------
　
　ん？これだけ？？
　
　と思った皆さん！
　
　
　チャンスです！！！！！
　
　その好奇心のまま、学んでみてください！！
　
　この後は専門誌を見ても大丈夫だと思いますよ。
　
　そこで今回参考にしたサイトをまとめてみました。
　
　上から順番に難しくなっていると思います。
　マスターすればとても便利ですし綺麗なサイトが作れますので
　がんばってください！！！
　
　▼ コピペで使える速攻系簡単小技 真・てすたーの倉庫
http://www4.ocn.ne.jp/~tester/
　▼ Styleの「倉庫」
http://www4.ocn.ne.jp/~tester/style/kowaza_Notes3.html
　
　▼ とほほのＷＷＷ入門

http://www.tohoho-web.com/www.htm
　▼ スタイルシート入門 [基礎知識]
http://www.tohoho-web.com/css/basic.htm
　
　▼ 初心者のためのホームページ作り
http://www.scollabo.com/banban/index.html
　▼ スタイルシート/CSSリファレンス
http://www.scollabo.com/banban/ref/css.html
　
　
　
　------------------------------------------------------------------
　■ CSSのメリット
　------------------------------------------------------------------
　
　CSSを使用するメリットはたくさんあります！
　
　・CSSファイルを外部ファイルとして
　　すべてのページで使用することもできます。
　
　・・・ということはいちいち記述する必要がないんです。
　
　・JavaScriptと組み合わせて お客様の環境にあったCSSに切り替える
　　ことができます。
　
　・・・Ｍａｃで見るかもしれないＷｉｎで見るかも知れない
　　　　そんなサイトではCSSを切り替えていることが多いです。
　
　・なにしろ綺麗に仕上がります！
　
　・・・とくにテーブルなどの表現が豊かになります！
　　　　ＨＴＭＬソースを見ても綺麗です。
　
　
　・自由なレイアウトが可能！
　
　・・・ホームページビルダーでお馴染み（？）の
　　　　「どこでも配置」はＣＳＳによるものです。
　
　
　
　ちょっとした小技でも覚えると一段と見栄えします！
　がんばってみましょう！！！
　
　◆━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━◆
　　編集後記
　◆───────────────────────────────◆
　
　前号で「Ｙａｈｏｏ！ビジネスエクスプレスに申請します！」
　と言ったのですが
　
　
　
　・・・通りましたよ（笑）
　
　そりゃそうなんですけど。
　通るまでドキドキですね。
　
　お客様サイトは何度も通しているのに
　いつもドキドキしてます。
　なんすかねコレは（笑）
　
　ちなみに
　「東京都渋谷区＞ホームページ制作会社」
　で出てきます。
　
　人にやさしいホームページ制作会社目指してがんばります！
　なんのこっちゃ（笑）
　
　
　このメルマガの記事はわたしのブログでも掲載しております。
　
　▼ブログ「ホームページ運営コンサルタント－さとうたけし」
　http://blog.comsize.com/
　
　ご感想は上記ブログに「コメント」という形でも受け付けております！
　是非、読んでみてください！
　
　よろしくお願いします！
　
　「ホームページを優秀な営業マンに！」
　
　　私もそのお手伝いをします！
　
　◎ このメールマガジンを読んだご感想・ご意見・ご質問、また仕事依頼
　 などございましたらなんなりとお気軽にメールをください。
　 お返事は必ず書きます！
　------------------------------------------------------------------
　☆ ホームページ運営コンサルタント
　☆ 発行人： 株式会社コンサイズ　さとう たけし
　☆ 弊社HP： < http://www.comsize.com/ >

　☆ メール： < mag@comsize.com >
　☆ mixi プロフィールこちらです。
　　http://mixi.jp/show_friend.pl?id=1443846
　★ 購読・解除はこちらでできます！
　　まぐまぐ →→ http://www.mag2.com/m/0000199475.html
　------------------------------------------------------------------