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

見出しのスタイルシートを自動で作成できるツールが完成しました

・出来上がったサンプルを見ながら自在に見出しのスタイルシートが作れます。
・CSSやHTMLタグのわからない方でもそのまま記事に張り付けてすぐ書くことができます。
・2022年11月17日サービススタート。不具合を修正しつつさらに機能を増やしていきます。
枠のスタイルシート自動作成ツールはこちらです。
11月19日　色のスペルミスを一部修正しました。

文字の中央寄せする？ しない する

見出し枠自体の中央寄せする？ しない する

枠の幅を指定する（指定がない方はそのままでOK)

指定しない 50px 100px 150px 200px 250px 300px 350px 400px 450px 500px 550px 600px

行高の指定（見出しの高さになります)
指定がない場合はそのままでOK
指定しない 1.0 1.1 1.2 1.3 1.4 1.5 1.6 1.7 1.8 1.9 2.0 2.1 2.2 2.3 2.4 2.5

文字のサイズ、太さ、色、影。(初期値は普通、太くしない、黒です。)
文字は太くする？ しない する 文字のサイズ 普通 ちょっと大きくする もうちょっと 結構大きくする 巨大 小さくする
文字自体にシャドウ（影)つける？
つけない 弱いシャドウ 普通のシャドウ 強いシャドウ かなり強いシャドウ
文字の色（ピンク～赤、紫系統)
選択して下さい 他のにする red crimson mediumvioletred deeppink hotpink palevioletred pink lightpink magenta fuchsia violet plum orchid mediumorchid darkviolet darkmagenta purple indigo darkslateblue blueviolet mediumpurple slateblue mediumslateblue
文字の色(黄～オレンジ系統)
選択して下さい 他のにする lightyellow lightgoldenrodyellow lemonchiffon wheat burlywood tan khaki yellow gold orange darkorange goldenrod peru darkgoldenrod chocolate sienna saddlebrown maroon darkred brown firebrick indianred rosybrown darksalmon lightcoral salmon lightsalmon
文字の色(緑系統)
選択して下さい 他のにする darkcyan teal darkslategray darkgreen green forestgreen seagreen mediumseagreen mediumaquamarine darkseagreen aquamarine palegreen lightgreen springgreen mediumspringgreen lawngreen greenyellow lime limegreen yellowgreen darkolivegreen olivedrab olive darkhaki palegoldenrod cornsilk beige
文字の色(青系統)
選択して下さい 他のにする aliceblue teal lightsteelblue lightstategray slategray steelblue royalblue midnightblue navy darkblue mediumblue blue dodgerblue cornflowerblue deepskyblue lightskyblue skyblue powerblue paleturquoise lightcyan cyan aqua turquoise mediumturquoise lightseagreen cadetblue
文字の色(黒～クリーム系統)
選択して下さい 他のにする dimgray gray darkgray silver lightgray gainsboro whitesmoke white snow ghostwhite floralwhite linen antiquewhite papayawhip blanchedalmond bisque moccasin navajowhite peachpuff mistyrose lavenderblush seashell oldlace ivory honeydew azure mintcream

角って丸める？
選択してください 丸めない ちょっと丸める もうちょっと 結構丸める
どこを丸める？
選択してください 全ての角 左上 左下 右上 右下

BOXにシャドウ（影）をつける
シャドウをつけない場合はそのままでOK
どれくらいつける？ つけない 弱いシャドウ 普通のシャドウ 強いシャドウ かなり強いシャドウ

見出しの左に小さなアイコンをつける場合
つけない場合はそのままにしてOK
アイコンの種類（増やす予定)
選択して下さい つける場合は必ずここ選択 右矢印 チェックマーク ●（丸）
アイコンのサイズ 普通 ちょっと大きい もうちょっと だいぶ大きい 巨大 小さい
アイコンの色（ピンク～赤、紫系統)
選択して下さい 他のにする red crimson mediumvioletred deeppink hotpink palevioletred pink lightpink magenta fuchsia violet plum orchid mediumorchid darkviolet darkmagenta purple indigo darkslateblue blueviolet mediumpurple stateblue mediumslateblue
アイコンの色(黄～オレンジ系統)
選択して下さい 他のにする lightyellow lightgoldenrodyellow lemonchiffon wheat burlywood tan khaki yellow gold orange darkorange goldenrod peru darkgoldenrod chocolate sienna saddlebrown maroon darkred brown firebrick indianred rosybrown darksalmon lightcoral salmon lightsalmon
アイコンの色(緑系統)
選択して下さい 他のにする darkcyan teal darkslategray darkgreen green forestgreen seagreen mediumseagreen mediumaquamarine darkseagreen aquamarine palegreen lightgreen springgreen mediumspringgreen lawngreen greenyellow lime limegreen yellowgreen darkolivegreen olivedrab olive darkhaki palegoldenrod cornsilk beige
アイコンの色(青系統)
選択して下さい 他のにする aliceblue teal lightsteelblue lightstategray stategray steelblue royalblue midnightblue navy darkblue mediumblue blue dodgerblue cornflowerblue deepskyblue lightskyblue skyblue powerblue paleturquoise lightcyan cyan aqua turquoise mediumturquoise lightseagreen cadetblue
アイコンの色(黒～クリーム系統)
選択して下さい 他のにする dimgray gray darkgray silver lightgray gainsboro whitesmoke white snow ghostwhite floralwhite linen antiquewhite papayawhip blanchedalmond bisque moccasin navajowhite peachpuff mistyrose lavenderblush seashell oldlace ivory honeydew azure mintcream

見出しの上に線を引く場合
見出しの上に線を引かない場合はそのままにしてOK
線の種類を選ぶ 選択してください 引く場合はここ必ず選択 実線 点線 破線 二重線 線がへこんで見える 線が浮き上がって見える 線より内側がへこんで見える 線より内側が浮いて見える
線の太さ
選択してください 1px 2px 3px 4px 5px
見出しの上の線の色（ピンク～赤、紫系統)
選択して下さい 他のにする red crimson mediumvioletred deeppink hotpink palevioletred pink lightpink magenta fuchsia violet plum orchid mediumorchid darkviolet darkmagenta purple indigo darkslateblue blueviolet mediumpurple stateblue mediumslateblue
見出しの上の線の色(黄～オレンジ系統)
選択して下さい 他のにする lightyellow lightgoldenrodyellow lemonchiffon wheat burlywood tan khaki yellow gold orange darkorange goldenrod peru darkgoldenrod chocolate sienna saddlebrown maroon darkred brown firebrick indianred rosybrown darksalmon lightcoral salmon lightsalmon
見出しの上の線の色(緑系統)
選択して下さい 他のにする darkcyan teal darkslategray darkgreen green forestgreen seagreen mediumseagreen mediumaquamarine darkseagreen aquamarine palegreen lightgreen springgreen mediumspringgreen lawngreen greenyellow lime limegreen yellowgreen darkolivegreen olivedrab olive darkhaki palegoldenrod cornsilk beige
見出しの上の線の色(青系統)
選択して下さい 他のにする aliceblue teal lightsteelblue lightstategray stategray steelblue royalblue midnightblue navy darkblue mediumblue blue dodgerblue cornflowerblue deepskyblue lightskyblue skyblue powerblue paleturquoise lightcyan cyan aqua turquoise mediumturquoise lightseagreen cadetblue
見出しの上の線の色(黒～クリーム系統)
選択して下さい 他のにする dimgray gray darkgray silver lightgray gainsboro whitesmoke white snow ghostwhite floralwhite linen antiquewhite papayawhip blanchedalmond bisque moccasin navajowhite peachpuff mistyrose lavenderblush seashell oldlace ivory honeydew azure mintcream

見出しの下に線を引く場合
見出しの下に線を引かない場合はそのままにしてOK
線の種類を選ぶ 選択してください 引く場合はここ必ず選択 実線 点線 破線 二重線 線がへこんで見える 線が浮き上がって見える 線より内側がへこんで見える 線より内側が浮いて見える
線の太さ
選択してください 1px 2px 3px 4px 5px
見出しの下の線の色（ピンク～赤、紫系統)
選択して下さい 他のにする red crimson mediumvioletred deeppink hotpink palevioletred pink lightpink magenta fuchsia violet plum orchid mediumorchid darkviolet darkmagenta purple indigo darkslateblue blueviolet mediumpurple stateblue mediumslateblue
見出しの下の線の色(黄～オレンジ系統)
選択して下さい 他のにする lightyellow lightgoldenrodyellow lemonchiffon wheat burlywood tan khaki yellow gold orange darkorange goldenrod peru darkgoldenrod chocolate sienna saddlebrown maroon darkred brown firebrick indianred rosybrown darksalmon lightcoral salmon lightsalmon
見出しの下の線の色(緑系統)
選択して下さい 他のにする darkcyan teal darkslategray darkgreen green forestgreen seagreen mediumseagreen mediumaquamarine darkseagreen aquamarine palegreen lightgreen springgreen mediumspringgreen lawngreen greenyellow lime limegreen yellowgreen darkolivegreen olivedrab olive darkhaki palegoldenrod cornsilk beige
見出しの下の線の色(青系統)
選択して下さい 他のにする aliceblue teal lightsteelblue lightstategray stategray steelblue royalblue midnightblue navy darkblue mediumblue blue dodgerblue cornflowerblue deepskyblue lightskyblue skyblue powerblue paleturquoise lightcyan cyan aqua turquoise mediumturquoise lightseagreen cadetblue
見出しの下の線の色(黒～クリーム系統)
選択して下さい 他のにする dimgray gray darkgray silver lightgray gainsboro whitesmoke white snow ghostwhite floralwhite linen antiquewhite papayawhip blanchedalmond bisque moccasin navajowhite peachpuff mistyrose lavenderblush seashell oldlace ivory honeydew azure mintcream

見出しの左に線を引く場合
見出しの左に線を引かない場合はそのままにしてOK
線の種類を選ぶ 選択してください 引く場合はここ必ず選択 実線 点線 破線 二重線 線がへこんで見える 線が浮き上がって見える 線より内側がへこんで見える 線より内側が浮いて見える
線の太さ
選択してください 1px 2px 3px 4px 5px
見出しの左の線の色（ピンク～赤、紫系統)
選択して下さい 他のにする red crimson mediumvioletred deeppink hotpink palevioletred pink lightpink magenta fuchsia violet plum orchid mediumorchid darkviolet darkmagenta purple indigo darkslateblue blueviolet mediumpurple stateblue mediumslateblue
見出しの左の線の色(黄～オレンジ系統)
選択して下さい 他のにする lightyellow lightgoldenrodyellow lemonchiffon wheat burlywood tan khaki yellow gold orange darkorange goldenrod peru darkgoldenrod chocolate sienna saddlebrown maroon darkred brown firebrick indianred rosybrown darksalmon lightcoral salmon lightsalmon
見出しの左の線の色(緑系統)
選択して下さい 他のにする darkcyan teal darkslategray darkgreen green forestgreen seagreen mediumseagreen mediumaquamarine darkseagreen aquamarine palegreen lightgreen springgreen mediumspringgreen lawngreen greenyellow lime limegreen yellowgreen darkolivegreen olivedrab olive darkhaki palegoldenrod cornsilk beige
見出しの左の線の色(青系統)
選択して下さい 他のにする aliceblue teal lightsteelblue lightstategray stategray steelblue royalblue midnightblue navy darkblue mediumblue blue dodgerblue cornflowerblue deepskyblue lightskyblue skyblue powerblue paleturquoise lightcyan cyan aqua turquoise mediumturquoise lightseagreen cadetblue
見出しの左の線の色(黒～クリーム系統)
選択して下さい 他のにする dimgray gray darkgray silver lightgray gainsboro whitesmoke white snow ghostwhite floralwhite linen antiquewhite papayawhip blanchedalmond bisque moccasin navajowhite peachpuff mistyrose lavenderblush seashell oldlace ivory honeydew azure mintcream

見出しの右に線を引く場合
見出しの右に線を引かない場合はそのままにしてOK
線の種類を選ぶ 選択してください 引く場合はここ必ず選択 実線 点線 破線 二重線 線がへこんで見える 線が浮き上がって見える 線より内側がへこんで見える 線より内側が浮いて見える
線の太さ
選択してください 1px 2px 3px 4px 5px
見出しの右の線の色（ピンク～赤、紫系統)
選択して下さい 他のにする red crimson mediumvioletred deeppink hotpink palevioletred pink lightpink magenta fuchsia violet plum orchid mediumorchid darkviolet darkmagenta purple indigo darkslateblue blueviolet mediumpurple stateblue mediumslateblue
見出しの右の線の色(黄～オレンジ系統)
選択して下さい 他のにする lightyellow lightgoldenrodyellow lemonchiffon wheat burlywood tan khaki yellow gold orange darkorange goldenrod peru darkgoldenrod chocolate sienna saddlebrown maroon darkred brown firebrick indianred rosybrown darksalmon lightcoral salmon lightsalmon
見出しの右の線の色(緑系統)
選択して下さい 他のにする darkcyan teal darkslategray darkgreen green forestgreen seagreen mediumseagreen mediumaquamarine darkseagreen aquamarine palegreen lightgreen springgreen mediumspringgreen lawngreen greenyellow lime limegreen yellowgreen darkolivegreen olivedrab olive darkhaki palegoldenrod cornsilk beige
見出しの右の線の色(青系統)
選択して下さい 他のにする aliceblue teal lightsteelblue lightstategray stategray steelblue royalblue midnightblue navy darkblue mediumblue blue dodgerblue cornflowerblue deepskyblue lightskyblue skyblue powerblue paleturquoise lightcyan cyan aqua turquoise mediumturquoise lightseagreen cadetblue
見出しの右の線の色(黒～クリーム系統)
選択して下さい 他のにする dimgray gray darkgray silver lightgray gainsboro whitesmoke white snow ghostwhite floralwhite linen antiquewhite papayawhip blanchedalmond bisque moccasin navajowhite peachpuff mistyrose lavenderblush seashell oldlace ivory honeydew azure mintcream

枠の背景色
背景色の初期値は”なし”です。

背景色をスプライトにする？(未実装)
しない する
枠の背景色（ピンク～赤、紫系統)
選択して下さい 他のにする red crimson mediumvioletred deeppink hotpink palevioletred pink lightpink magenta fuchsia violet plum orchid mediumorchid darkviolet darkmagenta purple indigo darkslateblue blueviolet mediumpurple stateblue mediumslateblue
枠の背景色(黄～オレンジ系統)
選択して下さい 他のにする lightyellow lightgoldenrodyellow lemonchiffon wheat burlywood tan khaki yellow gold orange darkorange goldenrod peru darkgoldenrod chocolate sienna saddlebrown maroon darkred brown firebrick indianred rosybrown darksalmon lightcoral salmon lightsalmon
枠の背景色(緑系統)
選択して下さい 他のにする darkcyan teal darkslategray darkgreen green forestgreen seagreen mediumseagreen mediumaquamarine darkseagreen aquamarine palegreen lightgreen springgreen mediumspringgreen lawngreen greenyellow lime limegreen yellowgreen darkolivegreen olivedrab olive darkhaki palegoldenrod cornsilk beige
枠の背景色(青系統)
選択して下さい 他のにする aliceblue teal lightsteelblue lightstategray stategray steelblue royalblue midnightblue navy darkblue mediumblue blue dodgerblue cornflowerblue deepskyblue lightskyblue skyblue powerblue paleturquoise lightcyan cyan aqua turquoise mediumturquoise lightseagreen cadetblue
枠の背景色(黒～クリーム系統)
選択して下さい 他のにする dimgray gray darkgray silver lightgray gainsboro whitesmoke white snow ghostwhite floralwhite linen antiquewhite papayawhip blanchedalmond bisque moccasin navajowhite peachpuff mistyrose lavenderblush seashell oldlace ivory honeydew azure mintcream

クリックしてスタイルシートを自動作成、またサンプルを表示する(見たままモード、はてな記法モード、普通のブログ、ホームページ用) ここにスタイルシートなどが全て表示されます

ここにサンプルが表示されます

でき上がったスタイルシートなどをクリップボードにコピーする

そのままスマホでも記事が書けます!

枠のスタイルシートが自動で作成できます 11月15日バックアップ版

2022年11月15日バックアップバージョン

HTMLタグやスタイルシートが全くわからない方でも使えるようになりました！

コピペ機能を実装
11月19日色のスペルミスを一部修正しました。

完成には近づいてきてますがまだ機能を増やしていきたいと思います。
こんな機能を増やしてほしいというのがあればコメントを頂ければと思います。
ソフトより機能は劣るけどソフトの1000倍わかりやすいを目指して精進していきます。

2つ以上のパターンを作る場合は半角英数字で好きな名前を入力 例　waku2：

枠のサイズを指定する（指定がない方はそのままでOK)
幅 指定しない 50px 100px 150px 200px 250px 300px 350px 400px 450px 500px 550px 600px 高さ 指定しない 50px 100px 150px 200px 250px 300px 350px 400px 450px 500px 550px 600px 枠自体の中央寄せする？ しない する

外枠の線の有無、太さ
選択してください 1px 2px 3px 4px 5px なし

どのタグで使う？わからなければp or div推奨
選択してください p div textarea

領域と文字との余白
選択してください 余白なんて不要 ちょっとだけ もうちょっと 結構開ける

枠線の種類を選ぶ
選択してください 実線 点線 破線 二重線 線がへこんで見える 線が浮き上がって見える 線より内側がへこんで見える 線より内側が浮いて見える

角って丸める？
選択してください 選択して下さい 丸めない ちょっとだけ もうちょっと 結構丸める

文字は太くする？
選択してください しない する

BOXにシャドウ（影）をつける
シャドウをつけない場合はそのままでOK
どれくらいつける？ つけない 弱いシャドウ 普通のシャドウ 強いシャドウ かなり強いシャドウ

外枠色の初期値はブラック、黒です
外枠の色(ピンク~赤,紫系統)
選択してください 他のにする red crimson mediumvioletred deeppink hotpink palevioletred pink lightpink magenta fuchsia violet plum orchid mediumorchid darkviolet darkmagenta purple indigo darkslateblue blueviolet mediumpurple slateblue mediumslateblue
外枠の色(黄~オレンジ)
選択してください 他のにする lightyellow lightgoldenrodyellow lemonchiffon wheat burlywood tan khaki yellow gold orange darkorange goldenrod peru darkgoldenrod chocolate sienna saddlebrown maroon darkred brown firebrick indianred rosybrown darksalmon lightcoral salmon lightsalmon
外枠の色(緑系統)
選択してください 他のにする darkcyan teal darkslategray darkgreen green forestgreen seagreen mediumseagreen mediumaquamarine darkseagreen aquamarine palegreen lightgreen springgreen mediumspringgreen lawngreen greenyellow lime limegreen yellowgreen darkolivegreen olivedrab olive darkhaki palegoldenrod cornsilk beige
外枠の色(青系統)
選択してください 他のにする aliceblue teal lightsteelblue lightstategray slategray steelblue royalblue midnightblue navy darkblue mediumblue blue dodgerblue cornflowerblue deepskyblue lightskyblue skyblue powerblue paleturquoise lightcyan cyan aqua turquoise mediumturquoise lightseagreen cadetblue
外枠の色(黒～クリーム系統)
選択してください 他のにする dimgray gray darkgray silver lightgray gainsboro whitesmoke white snow ghostwhite floralwhite linen antiquewhite papayawhip blanchedalmond bisque moccasin navajowhite peachpuff mistyrose lavenderblush seashell oldlace ivory honeydew azure mintcream

背景色の初期値はなしです
背景の色(ピンク~赤,紫系統)
選択してください 他のにする red crimson mediumvioletred deeppink hotpink palevioletred pink lightpink magenta fuchsia violet plum orchid mediumorchid darkviolet darkmagenta purple indigo darkslateblue blueviolet mediumpurple stateblue mediumslateblue
背景の色(黄~オレンジ)
選択してください 他のにする lightyellow lightgoldenrodyellow lemonchiffon wheat burlywood tan khaki yellow gold orange goldenrod peru darkgoldenrod chocolate sienna saddlebrown maroon darkred brown firebrick indianred rosybrown darksalmon lightcoral salmon lightsalmon
背景の色(緑系統)
選択してください 他のにする darkcyan teal darkslategray darkgreen green forestgreen seagreen mediumseagreen mediumaquamarine darkseagreen aquamarine palegreen lightgreen springgreen mediumspringgreen lawngreen greenyellow lime limegreen yellowgreen darkolivegreen olivedrab olive darkhaki palegoldenrod cornsilk beige
背景の色(青系統)
選択してください 他のにする aliceblue teal lightsteelblue lightstategray stategray steelblue royalblue midnightblue navy darkblue mediumblue blue dodgerblue cornflowerblue deepskyblue lightskyblue skyblue lightblue powerblue paleturquoise lightcyan cyan aqua turquoise mediumturquoise lightseagreen cadetblue
背景の色(黒～クリーム系統)
選択してください 他のにする dimgray gray darkgray silver lightgray gainsboro whitesmoke white snow ghostwhite floralwhite linen antiquewhite papayawhip blanchedalmond bisque moccasin navajowhite peachpuff mistyrose lavenderblush seashell oldlace ivory honeydew azure mintcream

（蛍光マーカーを引く箇所がない場合はそのままにしてOK!)
蛍光マーカーのクラス指定（半角英数字ならなんでも） 例　keikou2：
蛍光マーカーを引く箇所がある場合は選択して下さい。
色、線の太さ ない 細いpink線 太いpink線 細いred線 太いred線 細いyellow線 太いyellow線 細いblue線 太いblue線 細いgreen線 太いgreen線
文字の大きさ 普通 少し大きく もう少し大きく かなり大きく 巨大 文字の太さ 普通 太くする

クリックしてスタイルシートを自動作成、またサンプルを表示する(見たままモード、はてな記法モード、普通のブログ、ホームページ用)
はてなブログのMarkdownは絶対こっち)
ここにスタイルシートなどが全て表示されます

ここにサンプルが表示されますここに蛍光マーカーが引かれます

でき上がったスタイルシートなどをクリップボードにコピーする

そのままスマホでも記事が書けます!
サンプル表示に不具合が出ていましたがほぼ治りました
他に不具合をコメント欄で指摘していただいた場合はブックマークさせて頂きます。