おっす tecchankun だす。
前回の減量記録30日目に記載したCSSについて、少しながら記述と検証をしてみようと思います。まずは初歩的な所から・・・
背景色の設置について
おっす tecchankun だす。
これは前の記事にも記載して問題無く設置完了。
ちなみにstyle属性に「background-color: #888888」を記述しただけ。
リンクの貼り付けた項目にカーソルが乗った時に色を少し変える
↓の文字にカーソルを合わせると・・・
方法：<a>タグでマークアップしてそこに「href="#" style="background: gray; color: black;" onmouseout="this.style.background='gray'" onmouseover="this.style.background='red'"」を記述。
できましたが、編集画面では即時変化に対して、プレビューで見るとすぐに変わらずゆっくりと変化していきます。
delayの設定していない時ってどうなるんでしたっけ？？
transitionプロパティではないので、transition-delayは通じない・・・
うぬぬ、後で調べることにしよう(*´Д｀)
透明度を変化させる(opacity)
これも↓の文字にカーソルを合わせると・・・
出来ましたが、これもやっぱプレビュー時に変化の時間差が出る。
あと、ここで分かった事ですが「onmouseover」は少なからず、<p>タグや<div>タグに適用できなかった。
displayプロパティ値に依存するのか？と思って同じinlineの<span>タグに変更してみたがこれも拒否・・・
う～ん、そもそもCSS別記述でもそうだったか？？何故なんだ？？
うん、もっぱら勉強不足・・・(*´Д｀)
HTML内でのstyle属性の記述に関する記事ってあまり無いから勉強しづらいんですよね・・・
やはり別でスタイルシートを作成してリンク先にしてからclassやidを適用しちゃった方が良いような気がしてきましたのですが。
汎用性が効きそうですし。
ってかそれって「はてなブログ」では出来るのかな？まだまだ調べる事が多そうです(笑)
何か解決していくよう事があれば改めてＵＰなり修正をしていきたいと思います。
では、皆さんも良きコーディングライフを！