デザインにアニメーションを加える。～プログラムは苦手！じんましんが出る人に

第81回

前にシステムやHTMLのことを考えるだけでじんましんがでるという人のために、

文章レベルでできるSEO対策を説明しましたが、

www.chibapapa.work

今回はCSS編ってことで、すこしブログに飽きたって人が

ちょちょいのちょいでできるおもしろいカスタマイズをご紹介します。

「いやだ、もー、プログラムの話やめてよ！！じんましんが出てきたわ」って人も、

すこしかゆみに耐えながら、聞いてください。

超簡単です。

CSSってなんやねん

CSSってWEBの画面のデザインを担当するファイルや言語のことを指します。

プログラマーにとっては、言語と呼べる代物でないというレベルのものですが、

最近はCSSでアニメーションなんかもできてとても便利です。

役割分担としては

HTML：画面の構造
CSS：デザイン・配置

ってとこでしょうか。

ではさっそく実践です。

コピペだけなので、やってみてください。

はてなProじゃない人もできますので、ご安心を。

手順は1～6

たぶんパソコンでしかできないので、今パソコンがない人は

手順確認して、あとでやってみくてださい。

完成すると、記事の上にボールができて動きます。

私の今の記事もこうなっているはず。

f:id:kogahideyuki:20190224114428p:plain

手順

①管理画面のサイドバーの「デザイン」をクリック

f:id:kogahideyuki:20190224105050j:plain

これはかんたんですよね。ただクリック

②工具のマークをクリック

f:id:kogahideyuki:20190224105334j:plain

これも簡単。クリック

③「ヘッダ」をクリック

f:id:kogahideyuki:20190224105418j:plain

④HTMLコードを貼り付け

f:id:kogahideyuki:20190224105528j:plain

ここに以下のコードを貼り付けます。

とにかく考えず張り付け。

コードはこんな感じ↓

f:id:kogahideyuki:20190224105629p:plain

こんな感じですね。

⑤「デザインCSS」にCSSコードを貼り付け

f:id:kogahideyuki:20190224105746j:plain

なんか最初っから書いてますが、その下に以下のコードを追記。

@keyframes ball_animation1{
0%{
left:0vw;
width:10px;
height:10px;
border-radius:5px;
background:#888;
}

50%{
left:50vw;
width:30px;
height:30px;
border-radius:15px;
background:#eee;
}
100%{
left:0vw;
width:10px;
height:10px;
border-radius:5px;
background:#888;
}
}

.headerBottom{
width: 90vw;
height:60px;
margin-left:auto;
margin-right:auto;
position: relative;
font-size:0;
content:"";
}

.ball-type1{
position:absolute;
width:10px;
height:10px;
border-radius:5px;
animation: ball_animation1 5s;
animation-iteration-count: infinite;
animation-timing-function: ease;
background:#888;
}

#ball1{
animation-delay: -1s;
bottom:0px;
}

#ball2{
animation-delay: -1.2s;
bottom:10px;
}

#ball3{
animation-delay: -1.4s;
bottom:20px;
}

#ball4{
animation-delay: -1.6s;
bottom:30px;
}

#ball5{
animation-delay: -1.8s;
bottom:40px;
}

これで終わりです。あとは保存してみてください。

自分の記事に黒いボールが、動いていませんか？

たったこれだけで少しエンジニアチックなことができます。

少し解説

じんましんが激しくなってきた場合は、読まなくていいです笑

HTMLの解説

「class」ってのは、このHTMLコードの名前を定義するよっていう宣言です。

「headerBottom」ってのは、名前はなんでもいいんですが、

このボールが動く範囲の箱ですね。

なので、

”この箱の名前は、headerBottomです”

っていう定義です。

・・・

</div>

この箱の中でボールを動かします。

で、箱の中にボールを定義します。

「class」でボールの共通的な名前をつけます。

ここでは、「ball-type1」ですね。

「id」も名前の定義なんですが、固有名詞ってところですかね。

例えると、

「class」に、

”これはテニスボールです”

っていうだいたいのカテゴリを

定義します。

「id」で

”田中君のテニスボール”

みたいな感じで、固有名詞をつけるわけです。

ここでは、単純に、「ball1」「ball2」と区別できるようにします。

「id」や「class」は別に両方なくてもいいんですが、

classに共通的な要素を指定しておくことによって、あとあとアニメーションの

つけ方が楽になります。

CSSの解説

まずは、箱のデザイン

.headerBottom{
width: 90vw;
height:60px;
margin-left:auto;
margin-right:auto;
position: relative;
font-size:0;
}

先ほど定義した箱の名前を定義します。

.headerBottom{

・・・

}

「.headerBottom」で

”headerBottomのclassのデザインを決めます”

と宣言します。

あとはいろいろ書いているのですが、

重要なのは、「width」「height」です。

「width」は箱の横の長さです。

「height」は箱の縦の長さです。

ここでは「width」を90vw、「height」を60pxとしています。

単位が違うのには理由がります。

「vw」というのは、画面幅に対して、の割合を示しています。

「90vw」なので、

”画面の横幅に対して、90%の大きさだよ”

ってことを言っています

「px」ってのは、コンピュータが認識できる長さの単位。

ピクセルですね。

「vw」が便利なのは、スマホやパソコンの画面幅が違うものでも、

一律画面に対しての割合を決めることができるのです。とても便利です。

縦の長さに関しては、スクロールがありますので、固定の値でよいということです。

次にボールのデザイン

.ball-type1{
position:absolute;
width:10px;
height:10px;
border-radius:5px;
animation: ball_animation1 5s;
animation-iteration-count: infinite;
animation-timing-function: ease;
background:#888;
}

共通的な要素が定義されています。

.ball-type1{

・・・

}

で

”ball-type1のclassを定義します”

と宣言します。

その中に、定義を書いていきます。

「width」「height」は先ほど解説した通りです。

ここで重要なのは「border-radius」です。

「四角い図形の角の削り具合」を示しています。

ここでは

"10pxの正方形の角を、5px削ります"

と言っています。

これにより結果的に、図形が"円"になるわけですね。

「background」は図形の色です。ここでは、

「#888」と定義しています。

「CSS　色」とかで調べればでてきます。

で説明が厄介なのが、こいつら↓

animation: ball_animation1 5s;
animation-iteration-count: infinite;
animation-timing-function: ease;

これは図形を動かすのに必要な定義です。

「animation」は

"ball_animation1という動き方を5秒間で行います"

と定義しています。

「animation-iteration-count」は

継続の仕方を定義しています。

ここでは、「infinite」と定義していますので、

”画面が開いている間、永遠に動かします”

となります。

「animation-timing-function」は

アニメーションのリズムを定義しています。

説明が難しいですね。とりあえずリズムの定義だと思っていてください。

ここでは「ease」を指定していますので、

「加速して、トップスピードまでいくと、減速する」という

感じです。これもいろいろ種類がありますので、調べてかえてみるのも

いいですね。

次にこれ↓

ボールの個別の設定をします。

#ball1{
animation-delay: -1s;
bottom:0px;
}

「id」で指定しているので、CSSでは＃をつけて定義します。

「animation-delay」とはアニメーションを遅らせることを定義しています。

ここでは

”画面が開いてから1秒遅らせるよ”

ってことをいってます。

ball1,ball2・・・と0.2秒ずつずらしているので、それぞれのタイミングで動きだします。

bottomは「headerBottom」の下からの位置ですね。

で最後にこれ↓

「@keyframes」というのは、

”これからアニメーションの定義をします”

っていう宣言です。

今回の場合は、

”これから、ball-animation1というアニメーションの動き方を決めます”

ってことです。

「0%」はアニメーション開始0%の状態を定義しています。

もともとのボールの定義と同じですね。ここからアニメーションスタートするよって

ことですね。

「50%」はアニメーションが50%終わった時の状態を定義しています。

この場合だと、

「left」で

"headerBottom"の左から50vwの位置に移動して、

「width」「height」「border-radius」で

”縦横30pxの円になるよ”

っていってます。

「background」で

”色を#eee変えるよ"

といっています。

「100%」でアニメーションが完了した状態を定義しています。

「0%」と同じ定義にしているので、元の状態に戻ることを示しています。

すべての定義を解説することはできませんでしたが、

重要なところを説明しました。

あと

「position」っていうのが結構重要なのですが、

概念を理解するのに時間がかかりますし、私が説明すると余計に

こんがらがると思いますので、やめておきます。

「css postion」って調べるとわかりやすく説明しているサイトがいっぱいあります。

スマホで動きを確認する場合は

冒頭の「デザイン」という項目に、スマホのマークがありますが、

ここで、「レスポンシブデザイン」を選択すると、

スマホでもアニメーションの動きを確認することできます。

やってみてください。

千葉パパのTHINK THE LIFESTYLE

千葉県でパパをしていいます。独立画策中。