カテゴリー: css

【CSS】アニメーション animation

とりあえず、簡単なのを作ってみよう。

html
1
2
3
4
<div class="animation-test">
  <div class="box1"></div>
  <div class="box2"></div>
</div>

css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
.animation-test{
position:relative;
width: 100%;
height: 300px;
}
.box1{
animation: ani1 5s ease 1s infinite alternate;
-moz-animation: ani1 5s ease 1s infinite alternate;
-webkit-animation: ani1 5s ease 1s infinite alternate;
-o-animation: ani1 5s ease 1s infinite alternate;
-ms-animation: ani1 5s ease 1s infinite alternate;
}
.box2{
position:absolute;
border-radius:30px;
width: 30px;
height: 30px;
top:50px;
animation: ani2 3s ease 1s infinite alternate;
-moz-animation: ani2 3s ease 1s infinite alternate;
-webkit-animation: ani2 3s ease 1s infinite alternate;
-o-animation: ani2 3s ease 1s infinite alternate;
-ms-animation: ani2 3s ease 1s infinite alternate;
}
@keyframes ani1 {
0% {width: 50px; height: 50px; background: #000;}
100% {width: 150px; height: 150px; background: #ccc;}
}
@keyframes ani2 {
0% {left:300px; background: #000;}
100% {left:150px; background: #f00;}
}

【CSS】文字を縦書きにする

文字の縦書き

html
1
2
3
4
<div class="writing-mode">
   <h1>タイトル</h1>
   <p>テキストテキストテキスト。テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト。</p>
</div>

1
2
3
4
5
6
7
8
9
10
.writing-mode{
  max-height:320px;
  line-height: 1.9;
  letter-spacing: 0.03em;
  -webkit-writing-mode: vertical-rl;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  border:1px solid #ccc;
  padding:10px;
}

タイトル

テキストテキストテキスト。テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト。

【CSS】リストなどのアイコンには:before :after

リストだったり、文章のはじめなどにアイコンをつけるのに便利

html
1
2
3
4
5
6
  <ul class="testlist">
    <li class="list-1">テキストテキスト</li>
    <li class="list-2">テキストテキスト</li>
    <li class="list-3">テキストテキスト</li>
    <li class="list-4">テキストテキスト</li>
  <ul>

css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
ul.testlist li{
  list-style:none;
  position:relative;
  padding:0 0 0 25px;
}
ul.testlist li:before{
  content:"";
  width: 20px;
  height: 20px;
  position:absolute;
  top: 50%;
  left: 0;
  margin-top: -10px;
  display: inline-block;
  background-image: url(http://ko-om.com/wp-content/uploads/2018/11/icon.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% auto;
}
ul.testlist li:after{
  display:inline-block;
  color:#ccc;
}
ul.testlist li.list-1:after{
  content:">>";
}
ul.testlist li.list-2:after{
  content:"→";
}
ul.testlist li.list-3:after{
  content:"・・・";
}
ul.testlist li.list-4:after{
  content:"♪";
}

  • テキストテキスト
  • テキストテキスト
  • テキストテキスト
  • テキストテキスト

使い方はアイデアしだいで色々できる！

【CSS】スマホのタッチスライドをCSSだけで作る overflow-scrolling

こんな感じのhtmlとcss

html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<div class="sliderBox">
  <div class="slider">
    <div class="innerBox">
      <img src="img_sample.jpg" alt="" />
      <p>テキストテキスト</p>
    </div>
    <div class="innerBox">
      <img src="img_sample.jpg" alt="" />
      <p>テキストテキスト</p>
    </div>
    <div class="innerBox">
      <img src="img_sample.jpg" alt="" />
      <p>テキストテキスト</p>
    </div>
    <div class="innerBox">
      <img src="img_sample.jpg" alt="" />
      <p>テキストテキスト</p>
    </div>
    <div class="innerBox">
      <img src="img_sample.jpg" alt="" />
      <p>テキストテキスト</p>
    </div>
  </div>
</div>

以下のようになります。とってもシンプル！

css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
.sliderBox {
  width: 100%;
  padding: 5px;
  overflow-x: auto;
  overflow-y: hidden;
  background: #fff;
  border:1px solid #000;
}
 
.slider {
  width: 750px;
  overflow-scrolling: touch;
  -webkit-overflow-scrolling: touch;
}
 
.sliderBox::-webkit-scrollbar {
  display: none;
  height: 0 !important;
}
 
.innerBox {
  float: left;
  width: 130px;
  margin: 0 0 0 5px;
  background: #EFEFEF;
}
 
.innerBox:first-child {
  margin: 0;
}
 
.innerBox p{
  text-align:center;
  font-size:12px;
  padding:5px;
}
 
.innerBox img {
  width: 100%;
}

テキストテキスト

テキストテキスト

テキストテキスト

テキストテキスト

テキストテキスト

スマホで見るとスクロールできるのが確認ができます。
-webkit-overflow-scrolling: touch; これを入れるとタッチスクロールが出来るようになるみたいです。
スクロールバーの見た目をカスタマイズするのに::-webkit-scrollbarでスタイルを指定します。
シンプルで簡単だからスマホのサイトでは重宝しそう！

【CSS】メモメモ calc / :not / child系

いくつかメモメモ
・サイズの計算

css
1
2
3
.test{
   wodth:calc(100% - 20px); //横幅100%のサイズから20pxをマイナス
}

・リストなどで最後だけ適用したくないときとか

1
2
3
li:not(:last-child) {
    padding-right: 10px;
}

・n番目とかの指定

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
//:last-child（最初）
//:first-child（最後）
 
li:nth-child(5) { //指定番号
   color:#000;
}
li:nth-child(odd) { //odd は奇数
   color:#fff;
}
li:nth-child(even) { //odd は偶数
   color:#f00;
}
li:nth-child(5n) { // n は倍数 例：5n なので5,10,15,20....と続く
   color:#ff0;
}
li:nth-child(4n+1) { // n 任意の数をプラスできる。上と同じ結果になります。
   color:#333;
}
#test p:first-of-type { // #test内の最初の要素がpではない場合にこれを使う
   color:#666;
}
//:nth-of-type(2) などnも使えます。
//要素が入り混じる場合に便利

SASSなかなかいいよ、使える環境さえできれば、便利！

複雑なデザインだとどうしても、タグの階層？が深くなってCSS書くのも大変だけどもこれがあれば楽になる！
例えば下記のようなhtmlの場合

html
1
2
3
4
5
6
<div class="box">
        <p>テキストテキストテキスト</p>
<ul>
<li><a href=""><span>タイトル</span>テキスト</a></li>
</ul>
<div>

CSSはこんな感じになるんだけど（内容は適当だよ！）

css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.box p{
text-align:center;
}
.box ul{
padding:10px;
}
.box ul li{
border-bottom:1px solid #ccc;
}
.box ul li a{
color:#666;
text-decoration:none;
}
.box ul li a span{
display:inline-block;
color:#000;
padding-right:10px;
}

SASSだと入れ子にできるので、何度もulやliを書く必要がなくなる！

SASS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
.box {
p { text-align:center; }
ul { padding:10px;
li { border-bottom:1px solid #ccc;
a { color:#666;
text-decoration:none;
span { display:inline-block;
   color:#000;
   padding-right:10px;
}
}
}
}
}

あと変数とかも使えるからすごい便利！

SASS
1
2
3
4
5
6
7
8
9
10
11
12
13
$f1: 12px;
$f2: 14px;
$c1: #000;
$c2: #fff;
 
p{
   font-size:$f2;
   color:$c1;
}
a{
   font-size:$f1;
   color:$c1;
}

ただ、コンパイルするのにRubyとか必要になるから環境つくるまでは面倒だったかな・・・
Ruby使ったことないし！ 自動コンパイルも設定しないとだし～
でも、環境整えばすごい楽になると思う！