css – Design notes

2021/01/24

隣接セレクタ・間接セレクタ・直下セレクタとは？隣接セレクタ要素を結合子「+」でつなぎます。例えば要素A+要素Bの場合、要素Aと同じ階層にあるすぐ後の要素Bにスタイルがつきます。間接セレクタ要素 …

2021/01/24

縦書き文章を縦書きにして右から左へ流す。縦書きの基本文章を縦書きにして右から左へ流す。

親{text-align:right;
display: inline-block;}
子{writing-mode: vertical-rl;
-ms-writing-mode: tb-rl;/*IE用*/
text-align: left;
display: inline-block;

1

2

3

4

5

6

親{text-align:right;

display: inline-block;}

子{writing-mode: vertical-rl;

-ms-writing-mode: tb-rl;/*IE用*/

text-align: left;

display: inline-block;

1月11日数字の回転二桁の数字など英 …

2021/01/17

上下センター揃えフレックスボックス「display: flex」を使います。

セレクタ{display: flex;
  justify-content: center;
  align-items: center;}

1

2

3

セレクタ{display: flex;

justify-content: center;

align-items: center;}

左右センターは「justify-content: c …

2020/05/28

cssでテキストに縁や影をつけます。

2020/05/27

CSSでドロップシャドウをつける方法を二つ紹介します。

2019/08/20

鮮やかなグラデーションを取り入れたサイトをよく見ます。様々なタイプのグラデーション記述方法をまとめてみました！グラデーションの種類基本グラデーションはbackgroundで指定します。先に書い …

2019/08/10

JavaScriptを使わずにCSSだけでアニメーションを表現！CSS Animationキーフレームは0％（アニメーションの開始）から100％（終わり）まで細かく指定できます。

2019/08/09

CSSのアニメーション、Transitionに変化を追加してオンマウスで滑らかに変化させたり、押す感を出せたり。これだけでちょっとインタラクティブなサイトになりますね！

css 一覧