2016-01-25 Mon
在宅のお手伝いの仕事の関係で、CGIをいじったり、htmlをいじったりしてます。
CGI（Perl)は正規表現のオンパレードで、チンプンカンプン。
もっぱらサポート掲示板のお世話になってます。
それよりは、まだ、htmlの方がいじりやすいです。
まだ、まだ、コピペ段階ですが、昨日は、input buttonをブリ
ンクさせたくて、ネットでたぐって、やっと、その方法がわかり
ました。
C言語等でいえば、サブ関数を書き入れて、それを呼び出す
イメージですね。
次の手順でできました。もちろん、０から作るのではなく、
動いているものを改変します。
１ <head>～</head>の記述を探す。
２ 上記内でさらに
<style type="text/css">～</style>を探す。
３ さらに、<!-- ～ -->を探す
４ ３の部分に使いたいｃｓｓを追記する。
５ 追記したもの
/* 点滅 */
.blinking{
-webkit-animation:blink 1.5s ease-in-out infinite alternate;
-moz-animation:blink 1.5s ease-in-out infinite alternate;
animation:blink 1.5s ease-in-out infinite alternate;
}
@-webkit-keyframes blink{
0% {opacity:0;}
100% {opacity:1;}
}
@-moz-keyframes blink{
0% {opacity:0;}
mcxaza100% {opacity:1;}
}
@keyframes blink{
0% {opacity:0;}
100% {opacity:1;}
}
６ 効果を持たせたい部分を
<span class="blinking">
と
</span>
で囲む
これだけですが、理解するのに、半日以上かかりました。
CSSの記述は、ｈｔｍｌファイル内に記述する場合と、
*.cssという外部ファイルに記述して、取り込む場合と、
両方あるようですね。
外部ファイルの取り込みにも何種類かやり方があるようです。
この辺は、Cとは、ちょっと違いますね。
という訳で、やっと、目的の装飾（ブリンク）が達成できまし
た。
＝追記＝
<span class="blinking">は、ブログの編集画面で、
そのまま、書くと、スタイル？の一部と認識されて、
表示されなくなります。
「＜」と「＞」を半角で表記するには、それぞれ、
＆ｌｔと＆ｇｔ
を使うようです。ちょっと、面倒ですねえ。
TOP PAGE △