css – Design notes

2021/08/17

tableのCSSデザイン

<table class="outline">
<tbody>
<tr>
<th>社名</th>
<td>〇〇株式会社</td>
</tr>
<tr>
<th>所在地</th>
<td>〒000-0000　埼玉県〇〇〇〇〇〇</td>
</tr>
…
</tbody>
</table>

1

2

3

4

5

6

7

8

9

10

11

12

13

<tbody>

<tr>

<td>〇〇株式会社</td>

</tr>

<tr>

<td>〒000-0000　埼玉県〇〇〇〇〇〇</td>

</tr>

…

</tbody>

</table>

社名〇〇株式会社所在地〒000-0000　埼玉県〇〇〇〇〇〇連絡先 048-000-0000 … …

隣接セレクタ・間接セレクタ・直下セレクタでCSSを記述したい

2021/01/24

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

CSSで縦書き

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日数字の回転二桁の数字など英 …

CSSで上下センター揃え

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でテキストに縁や影をつけます。

CSSで影をつける

2020/05/27

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

cssで作るいろいろなグラデーション

2019/08/20

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

CSS Animationでアニメーションを表現する

2019/08/10

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

CSS Transitionで手軽にアニメーションを取り入れたい

2019/08/09

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

css 一覧