リンク先をページの特定の位置に指定する方法

カンタンなことだろうーけど、意外とツマづくhtml。
キチンと調べて解決しませう。


★リンク先を、特定の場所に指定したいとき

情報量が多く、縦長のページにリンク先を指定すると
ユーザビリティーもよく、ユーザーが知りたい情報を得ることが出来ます。

「色覚障害の見え方」というコンテンツのリンク先を
あるページのなかのコンテンツにリンクさせたい。

アンカーを指定する。
＜a href="000.html#miekata"＞
000.htmlの後に#miekataと記述。



青い破線「色覚障害の見え方」に、指定するタグを挿入。
＜a id="miekata"＞

※最近まではname="miekata"と
指定するやりかたが一般的だったが
XHTML 1.1以降ではa要素のname属性は廃止されるため、
XHTMLのサイトではid属性を使用する。
また、数字だけのid名（例：id="001"）は使用できない。
参照URL：ハイパーリンク

やっとトップページ完成！

依頼されていた、とあるガラス屋さんのサイト。


やっと完成しました～～！！！　*:・(￣∀￣)・:





いや。トップページだけネ。





これでも3回作り直したんだよね～

どんだけヘタレだよ。。。



初回は粗いながらも中面フォーマットができたけど

bodyの背景の出し方が、どう頭を巡らしてもできなくて……

ガッコの先生にアドバイスをもらうことにした。



いちおーお客さんありきのサイトで、自分のじゃないから

「ここが上手くできないならデザイン変えちゃおっ」とゆーワケにもいかず。

本来の実務になったらそんなこと言ってられないし

やっぱり無理してでも、始めのデザインを忠実にhtml化したかったのだ。




2回目。


絶対配置で作り直そうとトライっ

しかし、イマイチ原理を理解できてないもんだから

当然うまくいかない。。。


しょーがないので、今回も慣れ親しんだfloatでレイアウト★





すると、初回のサイトよりもIEのバグがほとんどなく

2箇所スターハックを使用するのみにとどまった！！



すっご～～～～い　嬉しいっ！！！



やれば出来るもんだ。



でも先生いわく、もともとルールに則って構築していけば

ハックは一切必要ないという。。。



まだまだ要レベルアップ。


絶対＆相対配置もマスターしないとだし。




とにかく、トップページができればシメたもの（*＾▽＾*）ノ☆

ガツガツ作っていくぜぃッ

CSS備忘録

★font-sizeを指定したらline-hightもセットで指定すること
ブラウザごとユーザーの設定ごとにテキスト表示の解釈が違う。
IEでは行間を調整してくれないがfirefoxでは適当にやってくれる。
そのため、heightの見栄えに違いが出てしまう。



★できるだけハックは使用しない
基本に忠実に作っていればハック無しでもキチンと表示できる。
どうしてもダメなところはハックする。
ハックに頼り過ぎない。



★できるだけpaddingは使用しない。
　marginで処理できるものはmarginで。
marginが利かない場合、サイズによってmarginが取れずズレてしまうので
1pxずつ調整してみると、うまくいくことがある。



★IEなどブラウザ別表示の許容範囲とは？
配置がずれてなくて、画像等が隙間やずれが生じないこと。



★基本のターゲットブラウザ、エンジン
　IE6　IE7　Firefox1.5以上　Safari1.3以上
　IE　→　IEエンジン
　netscape・firefox　→　Gekkoエンジン
　Safari　→　Webkit



★faviconはサイトのルート上に置く
imagesフォルダーに入れるのではなくてindex.htmlと同じ階層にfavicon.icoを置く。
ローカルでチェックしてもfirefox以外のブラウザでは
ネット上から見ないとfaviconが表示できない。
IEはサーバーの一番上のフォルダにfavicon.icoがあれば勝手に読んでくれる。



★アンカータグの指定はlink visited hover activeの順番を守る
　この順番で設定しないと動作が正常にならない。



★XML宣言について
XHTMLで作るならXML宣言文は必須。
IE6の互換モードはターゲットブラウザから外す。（XML宣言しているから）
互換モードを入れてしまうとCSSはまったく変わってしまう。
互換モードや古いブラウザで作るならHTML4.01や最悪HTML3.2で作ること。
XHTMLでサイトを作る場合、基本的に古いブラウザや互換モードは外した場合の話になる。



★floatはtableの焼き直し。
　floatはtableレイアウトと大差ない。
　SEO対策を施すなら、絶対配置＆相対配置＆floatを組み合わせる。



★CSSの概念とは
　HTML　→　データ
　CSS　→　レイアウト
　という分離によって、データは重要なものを好きな位置に記述でき、CSSで見やすく配置すること



★テキストタイプのブラウザ
　SEOを意識するならテキストタイプのブラウザがあると便利。
　テキストタイプのブラウザ Lynx
googleなど主要なサーチエンジンのロボットはテキストタイプのブラウザの見え方と同じ情報の見方をしている。

position:absolute;

はあ。

絶対配置わからんすぎ。。。。

さにゃのサイトは絶対配置向きとゆー
先生のアドバイスに従い、ちょっと配置の仕方を変えてみた。


今までfloatでしかサイト組んでなかったさにゃさん。

floatと絶対＆相対配置は混在させちゃダメと言われていたのに
逆のことを言われて大ショックを受けたのです。。。Σ(￣□￣;)ガ～ンッ

人によってCSSの解釈とかやり方違うのはわかるけど
全く違う効果を言われてしまうと
何を信じたらよいのか、ほんとに迷ってしまう～

きっとみんな、いろんなやり方を自分で試して
答えは自分で決めているんだと思う。
誰のやり方が正解とかないんだろうな。。。


「floatではtableレイアウトとなんら変わらんから
SEO重視するなら絶対＆相対配置でやること！」と教わり
いま作り直し中なんだけどぉ

やってるうちにレイヤーみたいに要素が重なっちゃうから
もーワケがわからない。。。(@_@;) む～ん。

なんとなくでやってみたけど、
やっぱりうまくいかない。。。（そりゃそーだ）

教科書とググる先生片手に復習しなおし
CSSレイアウト出直しですだっ


まずここが理解できればイイwebデザイナーになれますとのこと。

何が何でも尚更モノにしなけりゃ。

きっとAJAXとかPHPとか覚えるよりも基本的で重要なコトなんだわ

面目ございません。

また新聞配達の音を聞いてしまった。

こんな時間までプロのwebデザイナーにつき合わせてしまった！

そしてこれから仕事とな。。。

なんつーことを。


くだらん質問に根気よく付き合っていただき

本当にありがとうございます！！！





かれこれ3時間近くチャットしながら

サイトの問題や質問あれやあこれやトーク。



おかげさまでかなりクリアできた！！

神よっ！！（まず直してから言わんかい）



とりあえず絶対配置とfloatで組みなおすことが必須！

そして授業で習ったことがすべてにおいて正しいとは言い切れないこと。
（授業中、先生言ってたわ。たしかに。）


すんごい収穫だった！！



さあ寝よう！

っだぁああああ～～～！

マジですか。。。。


今朝、とあるところから一本の留守電が。


「雇用・能力開発機構センターですが」

先週末に届いた職業訓練不合格通知の送付元。



「繰上合格の件で先週金曜日にもお電話しましたが、

いらっしゃらないようなので、今回はもう結構です」


ガチャ



何を悔いても言い訳にしかならんけど。



ウチのFAXは旧式で、ナンバーディスプレイないしリダイヤルないし。

最近の電話はやたら売り込みセールス多いし。

電話回線の問題もあって、ネットやるときは回線ふさがっちゃうし。



そんな事情が重なり、家電に出ることがほとんどなく

留守電で用件を確認して折り返すとゆーことが日常であった。




今回はそれが災いして、

完全に受講できたハズの職訓を取り逃がすとゆー

不運にみまわれたのだった。。。




留守電聞いて折り返し電話したけど、

時すでに遅し。。。

次のラッキーな人に回ってしまった　(;_;)



「逃した魚は大きい」

まさに、このコトワザの心境。。。




不合格通知もらったとき以上のショック！

しばらく立ち直れない～(T▽T)あうあう。。




しかし、こうなったのを何かのせいにしたくない。




ので、これから新型FAXをヤマダで買ってこようと思います。

そしてプロバイダーも新しいのにしようと思います。

ついでに気分転換に映画でも観てきます。



NO MORE 職訓の悲劇

どげんかせんといかん

もぉどーにもならんてことで
仕事のじゃまにならなければいーなと思いつつ
昨日、ガッコの先生にヘルプメールを送信。

いまコーディング中のwebサイトで様々なトラブルが発生(((（ ;ﾟДﾟ)))
（自分の技術が伴ってないだけとも言うが）

背景の処理がうまくいけば8割フォーマットが完成するんだけど。
こんなデザインにした自分をうらんでしまうよ。。。



永遠のテーマ（？）、ブラウザの致命的な問題が
どーしても私の行く手を阻む…（ー"ー；）
チクショー。

何度思ってもしかたないことだけど、
ブラウザの表示を共通してくれ～。

でも世の中のwebデザイナーがみんな越えてることなんだと思うと
なんとか自力で乗り越えたかったヨ（≧д≦）

そんなわけで
どーにもならん部分は後回しにして
サクサク他の作業を進めましょう。