メイン

(X)HTMLやらCSS アーカイブ

画像ファイルも疑え！

1152008

いつもの様に、firefoxで確認しながらメモ帳でスタイルシートをポチポチ書いて、適当なところでIE6でも確認してみたら、背景に指定した画像が表示されてない事を発見。

えー。なんでぇ？？
bodyの背景だよ？？何がおかしいんだろ…。

いろいろ消したり、書き直したり…。
firefoxでは表示されてるんだから、ファイルパスは無いだろ…と思いつつ念のために疑ってみたり。

とうとう「あー、もうパソコン壊れたわっ。」と得意のパソコンのせいにして再起動とかしてみたり…('A`)

そんなこんなでもがき苦しむ事、小一時間。
「もう、これは画像がおかしいんじゃねーの？」と、photoshopでGIFファイルを開いてみると何やらエラーが出た。
あらためて保存しなおしてみると…

出た！！

もう何なんだーっ。

疲れた…。
今日はもう終わりにします…。

HTMLとXHTML

0332008

HTMLからXHTMLに…という流れになってきている訳ですが、で結局どうすりゃいいの？って話です。
で、調べたりしてみると「HTML4.01の時に…」とか「W3Cが…」とか「マークアップ言語を…」という話の段階で　うぅ…(-ω-lll)　と頭を抱えました。
そして今でも頭を抱えます…(;´∀｀A)

そんな私でも、なんとかXHTMLと思われるものでサイトを作るようになってとりあえず気をつけているHTMLとXHTMLとの大きな違い。

１．XML宣言をする

２．タグは全て小文字で書く

３．終了タグを明示する

４．空要素タグの最後に「 /（半角スペースとスラッシュ）」を入れる

５．属性値は必ず引用符（"）で囲む

といった感じです。
あくまでも私が思っている大きな違いですが…。本当はもっと細かく、ちゃんといろいろあるはずです。

１．XML宣言をする
XML宣言と言って、一番最初（１行目）に
<?xml version="1.0" encoding="Shift_JIS"?>
を書かなくてはいけません。

だけどこれを書くと、IE6ではDOCTYPEスイッチというのが起こり、後方互換モードってやつで動作します。
「後方互換モード」は、web標準に準拠していない古いブラウザに合わせて動作します。
ちなみに、「標準準拠モード」は、W3Cの仕様に準拠した表示をします。

で、せっかくXML文書だよと示すためにXML宣言を書いたのに、IE6では互換モードになってしまってレイアウトが崩れたりしてしまいます。
でも、文書の文字コードにUTF-8、UTF-16をつかっていればXML宣言は必須じゃないよとなっているので、この文字コードで書いていればXML宣言は省いても大丈夫です。

実際にはXML宣言の後に、DOCTYPE宣言を書いて、xmlns属性の指定を書くようになります。
私の場合だと（XHTML 1.0 にも3種類のDOCTYPE宣言があるので…）
<?xml version="1.0" encoding="Shift_JIS"?>　（XML宣言）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">　（DOCTYPE宣言）
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">　（xmlns属性）
と書いてます。


２．タグは全て小文字で書く
これはそのまんま、タグは全部小文字で書きましょう。
「HTML」と書いたり、「ID」と書いたりしてはダメです。
「html」「id」といった風に、全部小文字で。


３．終了タグを明示する
終了タグを省略できません。

例えば…
■HTMLの場合
<UL>
<LI>ガンダム
<LI>ケロロ軍曹
<LI>戦国BASARA
</UL>

■XHTMLの場合
<ul>
<li>ガンダム</li>
<li>ケロロ軍曹</li>
<li>戦国BASARA</li>
</ul>

となります。


４．空要素タグの最後に「 /（半角スペースとスラッシュ）」を入れる
これは、昨日のCSSファイルへの指定の仕方に書いた違いもそうですが、よく使う空要素タグは…

■HTMLの場合
<BR>
<HR>

■XHTMLの場合
<br />
<hr />

となります。
あと画像の指定をする場合も、最後に「 /」を忘れずに。
（例）　<img src="ファイル名.gif" alt="代替テキスト" width="サイズ" height="サイズ" />


５．属性値は必ず引用符（"）で囲む
■HTMLの場合
width=80%

■XHTMLの場合
width="80%"


といった感じです。
この他にも、入れ子が正しいかとかタグ以外の場所（文書内）で「<」や「>」をそのまま書かないとかありますが、そういうのは実際にやってみて「Another HTML-lint gateway」などでチェックしながら、徐々に自分で直していって覚えた方が早いです。

結局、分かりにくい＆間違ってたらごめんなさい(´Д⊂ｸﾞｽﾝ

CSSファイルへの指定の仕方

0232008

CSSファイルの用意ができたら、（X）HTMLに適用するために（X）HTMLファイル内に指定します。

※cssファイルが「style.css」というファイル名の場合
■HTML
<title>サイト（ページ）のタイトル</title>
<link rel="stylesheet" type="text/css" href="style.css">

■XHTML
<title>サイト（ページ）のタイトル</title>
<link rel="stylesheet" type="text/css" href="style.css" />

ｘhtmlの方は最後に「 /」を入れます。
　
　
■CSSファイルの階層が違う場合の指定の仕方

・指定するCSSファイルが同じ階層にあるとき
<link rel="stylesheet" type="text/css" href="style.css" />

・一つ下の階層にあるCSSファイルを指定する場合（「css」というフォルダに入ってる場合）
<link rel="stylesheet" type="text/css" href="css/style.css" />

・一つ上の階層にあるCSSファイルを指定する場合
<link rel="stylesheet" type="text/css" href="../css/style.css" />
　
　
フォルダ名もファイル名も全て半角英数で名前を付けておきましょう。
あと、ファイルの指定を間違えるとせっかくのスタイルが適用されないので気をつけましょう。（特に階層が違う場合）

　
書いて残すって難しい…(；´Д｀)

スタイルシートのファイルの作り方

1022008

スタイルシートを書くにはまずＣＳＳファイルを作らなくてはいけません。
私はWindows標準の「メモ帳」で作成してます。
でも、他のテキストエディタでも大丈夫です。


１．メモ帳を開きます。

２．「ファイル」から「名前を付けて保存」を選択します。

３．ファイル名に任意の名前を付けます。
　　この時に拡張子を「txt」から「css」に変更します。と言っても、自分で「txt」の部分を「css」に書き直すだけです。
　　例えば、ファイル名を「style」としたい時はファイル名の所に「style.css」と入力すればＯＫです。


CSSファイル作成


これでCSSファイルが出来ました。
あとはこのファイルにスタイルを書いていきます。

※「保存する場所」はちゃんと選んでくださいねー。
初めてで分からないときは、スタイルを適用させたいhtmlと同じ場所に保存すると良いと思います。

【補足】
スタイルの最初に「@charset」を使って文字コードを指定する場合は、保存の際に「文字コード」の部分も指定したコードと同じものを選んでから保存しましょう。


スタイルシートのメリット

2112008

外部スタイルシートのメリットを簡単に…。

■メンテナンスの向上
スタイルを外部のファイルに記載し、HTMLからリンクして適応させるのでウェブサイト全体でスタイルを共有できます。
外部のスタイルシートを変更すると、レイアウトやデザインを一括に変更することが可能です。

■アクセシビリティ
一言で言えば、利用しやすさって事でいいのかな？（出た！あいまいな発言…）
例えば、ブラウザひとつ取ってもいろいろあります。
という事はもちろんどれを使ってるかもいろいろです。
せっかくサイトに来ていただいた方に、「必ずＩＥでよろしく！」という訳にはいかないという事です。

あとは目の不自由な方、弱視者の方への配慮などもそうです。
私も以前にボランティアなどで目の不自由な方、弱視者の方のお宅へ伺った事があるんですが、字が「小さくて見えない」という事でブラウザのメニューで文字の大きさを変更しようと思ったら出来ない！！
という事になるので、固定するような単位で書かない方が良いです。

画像にも代替テキストをできるだけ入れましょう。
テキスト情報という事でＳＥＯ対策にもなりますが、何より目の不自由な方が音声読み上げソフトを使ってサイトを見てる場合に代替テキストも読み上げるので、そこに何があるか分かりやすいという事です。

■HTMLがすっきり
HTMLから何回も入れ子になったようなレイアウト用のテーブルや、デザイン等の記載を省けます。
ページの容量も軽くなり、表示が速くなります。
必要最低限の内容でＳＥＯ対策にも効果的！（なはず…）

■ＳＥＯ対策
まぁ、そんなこんなでデザインやレイアウトなど見栄えの部分を外に出してすっきりさせておけば、検索エンジンのクローラーにも、すんなりと内容を見てもらいやすいという事です。
タイトルや見出しなどは重要視されるようなので、見出しはしっかり使って見栄えはCSSで！って事でいいはず(;´∀｀A)


だんだん何書いてるのか分からなくなってきました…(-ω-lll)
字ばっかり＆分かりにくくてごめんんさい。

やった事ないですが、XHTMLではスタイルを中に書いてるとチェックをかけたときに、「外部にしなさい」と言われると思います。
まぁ、とにかくスタイルシートは外部リンクで！（強引に締め


いやぁ、こんな内容でアップしても良いのか…。

スタイルシート

1512008

ホームページを作るからには使ってみたい、いや使うべき…むしろ使わざるを得ないスタイルシート。（ぇ…

ＣＳＳは「Cascading Style Sheet （カスケーディング・スタイルシート）」の略で、HTMLで記述された文書にレイアウトスタイルを定義するためのマークアップ言語です。

つまり、CSSを使うとホームページの見栄えを細かく指定することができるよ！って事です。

【スタイルシートの主な種類】
・インラインスタイル
・埋め込みスタイルシート
・外部スタイルシート

の３つです。
もし、全部をパターンを使ってる場合（そんな事あるのか？？）この順番で優先されます。

■インラインスタイル
要素に直接、スタイル属性を書いて指定します。
（記述）　この部分だけ　<SPAN style="color:red;">赤色</SPAN>　にしたい

（表示）　この部分だけ　赤色　にしたい

■埋め込みスタイルシート
HEAD内に <STYLE> を使って要素名やクラス名にスタイルをまとめて定義します。
未対応ブラウザの為に、<!--　-->コメントアウトしておきます。

■外部スタイルシート
スタイルシートを外部ファイルで定義します。（拡張子は.css）
メモ帳などにスタイルの定義を書き込み、拡張子を「.css」にして保存します。
適応させたいページのHEAD内に「<link rel="stylesheet" type="text/css" href="○○.css" />」と記述し、そのファイルにリンクします。


という訳ですが、これからCSSを使ってサイト作りに挑戦しようと思っている方、「どの方法にしよう？」などと迷う事なく外部スタイルシートで作成する事をお勧めします。
外部スタイルシートのメリットについてはまた今度…。

(X)HTMLやらCSS

1512008

「(X)HTMLやらCSS」というカテゴリーを追加してみました。
時々、こちらの方に備忘録を残していこうと思います。

詳しいから書いているのではなく、忘れた時のために書いてるものなので、「たぶん…」とか「そんな気がする」って言葉が多用される予感です…(;´∀｀A)

なので、間違いもあるかと思います。もちろん間違いは気づき次第、修正します。
みなさんのお役に立てるような事は書けません。期待しないでね！(;´∀｀A)

COPYRIGHT © design cafe All Right Reserved.