さて今回はスケートでも落語でもなく、ホームページ作成についてです。
まったく知らない人には何言っているかわからない、僕と同じプロじゃないけどちょっとかじっている人なら「あぁそうそう～そうなんだよ！」と共感してくれるかもしれない、またプロならきっと「ありえね～そんなもん基礎だろ基礎」というかもしれないっすね～
ケニーさんの画像提供によって週末あたりから久しぶりにホームページの工事を行ったわけですが
まぁなにしろだいぶ部分部分でわかってはきたものの、そこはプロのようにはいきません。
毎日ソースを打ち込んでいるわけでもなく、自分で昔組んだとこも忘れちゃうんですよね～
一気にガーッと組んでいるときは案外できることでも、たまにやると基礎的な事が見えなくなっていて、しかも一人でやっているもんだから「わからないループ」に陥りやすい。
「なんでやねん！」って感じ。
今回はスタイルシートでそんな感じでした。
まずは「hover」
リンクの定義済みクラスというやつですね。
たとえばスタイルシートで A:hover { color: red; } と記述することでその指定したリンクはマウスポインタが上に来るとその文字が赤くなるというような。
このリンクの定義済みクラスをつかって、スタイルシートでマウスオーバーで画像が切り替わるのを実現しようとしていたわけですが（ベネフィットホームページの左側のアイコンとかね）
さてここで一つ僕のなかで条件が
アイコンなどはウィジェットパーツのようにテンプレート化して使いまわしたいので、なるべくならソースは一つにまとまっていて欲しい。
と、ここでスタイルシートには3パターンあって
まず一つは外部にまとめて記述し、<head>～</head>でリンクして呼び出す。
２、<head>～</head>に記述する。
３、タグ自体にスタイル要素を埋め込む。
と、1番と2番はhtmlとスタイルシートと二つに分かれてしまうのでパーツとして一つにまとめるとなると３のタグの中に埋め込みたいわけですが。
そこんところでちょっと悩んだんですよね～
まあ結論としまして、「無理。」ということに自分の中で判断しました。
リンクの定義済みクラスをタグに埋め込むのはどうも無理みたいですね。
僕も色々やってみましたが、やっているうちにめんどくさくなりました。
これだけ時間かけるならもう、二度手間ですがCSSに書いてしまって動作させたほうがいいやってね。
（以下参考サイト：理由は違えど他にも同じ事を考えている人がいるみたいなんで参考にさせていただきました
http://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q1218933727
http://oshiete1.goo.ne.jp/qa2343081.html
http://oshiete.sponichi.co.jp/qa5017925.html）
link, visited, active,hover等を設定するには、タグに直接は無理です。
CSSに記述しましょう～（何か方法を知っている方がたまたまこれを目にされたときは、是非コメントにてその方法をご教授いただけると幸いです）
そして昨日はトップバナーにあるロゴに、ホームページのトップつまりindexページへのリンクを設置する、というところでちょっとてこずりました。
まぁわかっているととても馬鹿らしいのですが、わからない、または気がつかない場合は馬鹿馬鹿しい事であってもハマります。それがパソコンってもんです。
明日はその僕のハマった、「divの重なりについて」備忘録的に書こうと思います。
まったく知らない人には何言っているかわからない、僕と同じプロじゃないけどちょっとかじっている人なら「あぁそうそう～そうなんだよ！」と共感してくれるかもしれない、またプロならきっと「ありえね～そんなもん基礎だろ基礎」というかもしれないっすね～
ケニーさんの画像提供によって週末あたりから久しぶりにホームページの工事を行ったわけですが
まぁなにしろだいぶ部分部分でわかってはきたものの、そこはプロのようにはいきません。
毎日ソースを打ち込んでいるわけでもなく、自分で昔組んだとこも忘れちゃうんですよね～
一気にガーッと組んでいるときは案外できることでも、たまにやると基礎的な事が見えなくなっていて、しかも一人でやっているもんだから「わからないループ」に陥りやすい。
「なんでやねん！」って感じ。
今回はスタイルシートでそんな感じでした。
まずは「hover」
リンクの定義済みクラスというやつですね。
たとえばスタイルシートで A:hover { color: red; } と記述することでその指定したリンクはマウスポインタが上に来るとその文字が赤くなるというような。
このリンクの定義済みクラスをつかって、スタイルシートでマウスオーバーで画像が切り替わるのを実現しようとしていたわけですが（ベネフィットホームページの左側のアイコンとかね）
さてここで一つ僕のなかで条件が
アイコンなどはウィジェットパーツのようにテンプレート化して使いまわしたいので、なるべくならソースは一つにまとまっていて欲しい。
と、ここでスタイルシートには3パターンあって
まず一つは外部にまとめて記述し、<head>～</head>でリンクして呼び出す。
２、<head>～</head>に記述する。
３、タグ自体にスタイル要素を埋め込む。
と、1番と2番はhtmlとスタイルシートと二つに分かれてしまうのでパーツとして一つにまとめるとなると３のタグの中に埋め込みたいわけですが。
そこんところでちょっと悩んだんですよね～
まあ結論としまして、「無理。」ということに自分の中で判断しました。
リンクの定義済みクラスをタグに埋め込むのはどうも無理みたいですね。
僕も色々やってみましたが、やっているうちにめんどくさくなりました。
これだけ時間かけるならもう、二度手間ですがCSSに書いてしまって動作させたほうがいいやってね。
（以下参考サイト：理由は違えど他にも同じ事を考えている人がいるみたいなんで参考にさせていただきました
http://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q1218933727
http://oshiete1.goo.ne.jp/qa2343081.html
http://oshiete.sponichi.co.jp/qa5017925.html）
link, visited, active,hover等を設定するには、タグに直接は無理です。
CSSに記述しましょう～（何か方法を知っている方がたまたまこれを目にされたときは、是非コメントにてその方法をご教授いただけると幸いです）
そして昨日はトップバナーにあるロゴに、ホームページのトップつまりindexページへのリンクを設置する、というところでちょっとてこずりました。
まぁわかっているととても馬鹿らしいのですが、わからない、または気がつかない場合は馬鹿馬鹿しい事であってもハマります。それがパソコンってもんです。
明日はその僕のハマった、「divの重なりについて」備忘録的に書こうと思います。
コメントする