急いでいる時に限って電車遅延するよね

ダイエット・筋トレ・仕事・PC・電車遅延による遅刻

ブログへのCSS定型文作成と表示検証シリーズ1

おっす tecchankun だす。

 

前回の減量記録30日目に記載したCSSについて、少しながら記述と検証をしてみようと思います。まずは初歩的な所から・・・

 

 

 

背景色の設置について

おっす tecchankun だす。

 

これは前の記事にも記載して問題無く設置完了。

ちなみにstyle属性に「background-color: #888888」を記述しただけ。

 

リンクの貼り付けた項目にカーソルが乗った時に色を少し変える

↓の文字にカーソルを合わせると・・・ 

おっす tecchankun だす。

 

方法:<a>タグでマークアップしてそこに「href="#" style="background: gray; color: black;" onmouseout="this.style.background='gray'" onmouseover="this.style.background='red'"」を記述。

できましたが、編集画面では即時変化に対して、プレビューで見るとすぐに変わらずゆっくりと変化していきます。

delayの設定していない時ってどうなるんでしたっけ??
transitionプロパティではないので、transition-delayは通じない・・・
うぬぬ、後で調べることにしよう(*´Д`)

 

透明度を変化させる(opacity)

これも↓の文字にカーソルを合わせると・・・ 

おっす tecchankun だす。

 

出来ましたが、これもやっぱプレビュー時に変化の時間差が出る。
あと、ここで分かった事ですが「onmouseover」は少なからず、<p>タグや<div>タグに適用できなかった。
displayプロパティ値に依存するのか?と思って同じinlineの<span>タグに変更してみたがこれも拒否・・・

う~ん、そもそもCSS別記述でもそうだったか??何故なんだ??
うん、もっぱら勉強不足・・・(*´Д`)
HTML内でのstyle属性の記述に関する記事ってあまり無いから勉強しづらいんですよね・・・

 

やはり別でスタイルシートを作成してリンク先にしてからclassやidを適用しちゃった方が良いような気がしてきましたのですが。
汎用性が効きそうですし。
ってかそれって「はてなブログ」では出来るのかな?まだまだ調べる事が多そうです(笑)

 

何か解決していくよう事があれば改めてUPなり修正をしていきたいと思います。

 

では、皆さんも良きコーディングライフを!