★うつ病の一人暮らし★外で働かないで生きていく

うつ病で外で働きにくい。そんな中一人暮らしをして、悪戦苦闘して生きていく。生活コストは月2万円。まずはこの2万をなんとか稼ぐ方法を模索していく。貯金は280万。このブログではまず私自身の復習もかねて、ブログに特化したHTML,CSS,スタイルシートのテクニックをわかりやすく紹介していきます。

CSSで画像を横にスライドさせる方法 提供:カップめんリスペクト

CSSで画像を横にスライド~

今回はCSS(スタイルシート)アニメーションを使って画像を横にスライドさせていきます。

後にjavascriptと組み合わせて完全なスライドショーを作るための布石となります。

どこよりも詳しく書いていくので初心者でもすぐにわかります。

レベル1 アニメーションの基本のスタイルシート

まずは最低これだけはっていう基本の型があるので作っていきます。

animation-name:"アニメーションの名前";でアニメーションに名前を付け

animation-duration:"時間(秒数など)s";で一回のアニメーションにかかる時間の設定をし

animation-timing-function:ease;で速さに強弱をつけます。

またanimation-iteration-count:"回数";で動きの回数を設定します。

さらにいったりきたりする動きはanimation-direction: alternate;を使います。

スタイルシートは次のようになります。

imgのpicrotateクラスにしてみました。クラス名は何でも大丈夫です

img.picrotate{
animation-name:picrotation;
animation-duration:3s;
animation-timing-function:ease;
animation-iteration-count:infinite;
animation-direction: alternate;
}

infiniteは無限回という意味です。


レベル2 細かい動きの設定

細かい動きの設定は

@keyframes アニメーション名{
処理内容
}

ですることができます。

レベル3 横の動きの設定

横の動きはx軸方向に動かすのでtransform: translateX(〇px);を使います。

初めの位置を0%,終わりの位置を100%として次のように記述します。

@keyframes picrotation{

0%{
transform: translateX(0px);
}

100%{
transform: translateX(400px);
}

}

これで0pxから400pxの位置に横に動くことになります。


レベル4 ここまでをまとめる

CSS(スタイルシート)をまとめて書くと次のようになります。

img.picrotate{
animation-name:picrotation;
animation-duration:3s;
animation-timing-function:ease;
animation-iteration-count:infinite;
animation-direction: alternate;
}

@keyframes picrotation{

0%{
transform: translateX(0px);
}

100%{
transform: translateX(400px);
}

}

レベル5 画像を用意して記事中の記述を書く

記事中にはこう書きます。

<img src="画像のURL" class="picrotate">

カップめんリスペクト

今回の提供はユーチューブ(youtube)配信でお馴染み?のカップめんリスペクトさんでお送り致しました。

www.youtube.com