CSSについて - nprogram’s blog

CSSのトピックを書いていきます。

ページ内で複数同じスタイルを定義する場合は、クラスセレクタの使用が有効です。

書き方はピリオド + 半角文字です。

.parent {
    display:inline-block;
}

要素を横並び

要素を横並びにする方法は、display:inline-blockが有効です。このインラインブロック、display:inlineが指定されたインライン要素とは異なり、幅と高さを持ち、行をまたがないという特徴を持ちます。その名の通り、文中に入るブロック要素のような存在です。

イメージ f:id:nprogram:20160718100437p:plain

<!DOCTYPE html>
<html lang="ja">
<head>
    <title> HTML CSS テスト </title>
    <link href="app.css" rel="stylesheet" />
</head>

<body>
    <ul>
        <li class="parent">
            <p>テストパラメータ : </p>
        </li>
        <li class="parent">
            <p>1234</p>
        </li>
    </ul>
</body>
</html>

.parent {
    display:inline-block;
}

これ以降、コードはbody要素の中身のみ記載。

要素を中央合わせ

margin: autoで中央寄せ margin: auto;を使って上下左右中央寄せにします。 ※中央寄せしたい要素の幅、高さを指定しないと親要素のサイズに合わせて伸びてしまうので注意。

こちらのサイトがとても分かりやすく書いてあります。

qiita.com

IE9で点滅処理

IE9で、要素を点滅させる必要が発生して、かなり困っている。一応MARQUEEタグを使用すれば、点滅処理はさせられるだが・・・。

<marquee scrolldelay="280" scrollamount="20" width="20">
    <img src="/Images/icn.png" />
</marquee>

IE9は点滅をサポートしませんとしたい・・・。IE10より上では、animationを用いて点滅可能です。

.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;}
    100% {opacity:1;}
}
@keyframes blink{
    0% {opacity:0;}
    100% {opacity:1;}
}