おぼえられないから

ただただ自分の覚え書きのためです。

タグ:CSS

右から左に流れるスライドショーを使いたいのですが
jQuelyが苦手で、実装しても思い通りにいかず途方に暮れていたところ
CSSで簡単に出来るサイトを2つ見つけたので早速メモしました
とにかく単純に複数画像をループでスライドさせたいときはオススメです
続きを読む

Classセレクタにスペースを開けることでセレクタをわけて設定することができる

例HTML
<div class="セレクタA セレクタ01"></div>
<div class="セレクタA セレクタ02"></div>
<div class="セレクタA セレクタ03"></div>
例CSS
.セレクタA
{セレクタA全体のスタイル値}
.セレクタ01
{セレクタAのグループ内のセレクタ01のセレクタ値}

Divの大きさ、文字をセレクタAで統一して
セレクタ01で背景色を分ける事ができる
続きを読む

Javaを使わずにモーダルウィンドウが設置できる「pure-css-modal」
ウィンドウの表示方法もいくつか種類があるので自分のページにあったモーダルを設置できるのもいい
jQueryと違ってスクリプトのリンクを必要としないので比較的簡単に使える 

まずは公式ページのデモ画面をまとめたTHMLとCSSの
「pure-css-modal-master.zip」をダウンロード


参考ページ
続きを読む

Flexbox

HTML
<ul class="親要素名”>
    <li class="子要素名">アイテム1</li>
    <li class="子要素名">アイテム2</li>
    <li class="子要素名">アイテム3</li>
    <li class="子要素名">アイテム4</li>
</ul>


親要素がflexコンテナーであれば自動で子要素アイテムとして扱われます。とも言われていますが、うまく動作しなかったので、上記要素名にしてあります。

CSS
.要素名 {
    display: flex;
}

これだけで、縦列で並んでいた子要素が左から順に横ならびになります。

リストタグは子要素の前に「●」がつくので
親要素のスタイルに 
list-style: none; 
を書いて消す。 



続きを読む

↑このページのトップヘ