- 投稿日：2020-07-27T23:52:15+09:00
【初心者でもわかる】marginとpaddingの違い・使い分け方
どうも7noteです。今回はmarginとpaddingの違いや使い分けの方法について。
※本記事ではmarginもpaddingも余白という日本語で扱っています。
他のサイトではpaddingの事だけを余白と紹介していたりしますが、ごっちゃにならないようご注意ください。初心者あるあるで、この余白はmarginとpaddingどっちを使えばいいのだろう・・・と悩むことは多いと思います。わたしも一時期まではいつも迷ってなんとなくの感覚でmarginかpaddingをあてていたのですが、同じように迷っている人が多いのではと思い、この記事を書きました。
同じ悩みを抱えている人が一人でも減ると嬉しいです！marginとpaddingの違いは要素の外側の余白か内側の余白かの違い
どちらも余白を取るためのものですが、使いわけるためにはまずは違いを知ることが大切です。
大きな違いとして、余白をとる場所が違います。
- marginは要素の外側に余白
- paddingは要素の内側に余白
上のようにmarginは要素の外側に余白をとります。それに対してpaddingは要素の内側に余白をとります。
どういうことかというと、図で説明します。
上の図は「ボックスモデル」と呼ばれているものです。ボックスモデルとは一言でいうならcss上のルールや決まりで決められている事項のことです。
インライン要素、ブロック要素問わず全ての要素にこのボックスモデルが適応されています。
図をみていただくとmarginとborderの間に黒い線が入っていると思いますが、この黒線の内側が要素の大きさになります。この要素の内側に余白をとるのか、要素の外側に余白を取るのかの違いがmarginとpaddingの違いになります。ボックスモデルについてはまた詳しい説明の記事を書きたいとおもっていますが、別のサイトで詳しく紹介されていたのでいくつかリンクを貼っておきます。
いますぐボックスモデルについて詳しく知りたい方はどうぞ。
https://nulab.com/ja/blog/nulab/css-basics-for-engineer-boxmodel/marginとpaddingでは他のcssの適応範囲が違う（背景色）
marginとpaddingでは他のcssの適応範囲が変ることとがあります。
それはbackground（背景）です。
実際に違いを見てみましょう。index.html<div class="square01">四角1(padding)</div> <div class="square02">四角2(margin)</div>style.css.square01 { width: 200px; /* 要素の横幅 */ height: 200px; /* 要素の高さ */ background: #CCF; /* 背景色に青を指定 */ padding: 50px; /* 内側の余白 */ } .square02 { width: 200px; /* 要素の横幅 */ height: 200px; /* 要素の高さ */ background: #CCF; /* 背景色に青を指定 */ margin: 50px; /* 外側の余白 */ }
図の真ん中より左側が実行結果で、右側はわかりやすいように色をつけたものになります。
またpaddingを指定するとpaddingも含めた分が横幅になるので、四角1は300px、四角2は200pxの幅と高さになるので、見た目の大きさが違うように見えているだけです。
このように、backgroundに背景色を指定するとpaddingでとった余白には色がつきますが、marginてとった余白には色がつきません。
backgroundは要素に対して背景色をつけるので、要素の内側にあるpaddingには色がつきますが、marginは要素の外にあるので色がつかないことがわかります。marginとpaddingの使い分け
じゃあ実際に使う時どのように使い分けるのか。これについて書いていきます。
まずmarginですが、これは以下のように考えてください。「margin」はほかの要素との距離をとるための余白
どういう意味かというと、コンテンツAとコンテンツBがあります。
コンテンツBはコンテンツAからみてどれくらい距離があるかをmarginで取るということになります。
marginが必要な場面は、複数の要素同士がどれくらいの距離関係にあって、どの要素を基準として距離（余白）を取るべきかということをあらわすときに使います。もっとわかりやすく書いている記事を紹介↓
デザイナーの考える「余白」とは何か書き下してみるそしてpaddingは以下のように考えます。
「padding」は背景色を入れた場合、変ではないか
ちょっと雑な考え方かもしれませんが、この考え方が一番わかりやすいと思います。
もし、その余白の部分に背景色を入れないといけなくなった場合、背景色を入れても見た目的に違和感がないか考えて、違和感のない場所であればpaddingを使います。
もしくはmarginでは取れない余白なんかもあるので、そのような場合にはpaddingを使います。まとめ
初めは使い分けが難しいですが、違いをしっかりと理解すれば綺麗なコーディングができると思います。
ただ参考にしたサイトにも書いてあったのですが、最終的にはコードを書いているあなたが見えた通り、考えた通りに書くのが一番かなと思います。最終的に自分で直すことの方が多いと思うので。
ただマイルールが定着していない場合はぜひこの記事を参考にして綺麗なコーディングを目指してもらえると嬉しいです！
少しでもここpadding??margin???と悩む時間が減れば嬉しいです！おそまつ！
（コメント・質問・ソースの指摘等なんでもウェルカムです！初心者の方でも気軽に質問ください！）
参考記事
https://qiita.com/ln-north/items/dcf305d80edde550645e
https://nulab.com/ja/blog/nulab/css-basics-for-engineer-boxmodel/
- 投稿日：2020-07-27T23:49:55+09:00
【CSS画像アニメーション５５選！】Vueエンジニアがおすすめするコピペ大歓迎のオリジナルコード
こちらの記事に記載のデザイン・コードは全てオリジナルなので自由に使っていただいて大丈夫です(筆者が作成したため)
プロジェクトに取り込んでより充実したデザインにしてもらえれば○
コードは全てリンク先に説明付きで記載してあります
【真似したくなる】transform：rotate×scaleでCSS画像アニメーション３選
動きは下の画像のような感じになります
１. transform rotateX×scaleで【縦回転】CSS画像アニメーション
２. transform rotateY×scaleで【横回転】CSS画像アニメーション
３. transform rotateY/Z×scaleで【3D回転】画像アニメーション
コードを確認する
transform:translateで絵画デザインのスライドショーを実現！CSSスライダーアニメーション３選
動きは下の画像のような感じになります
１. クリックで右方向からスライドしてくるアニメーション
２. クリックで上からスライドしてくるアニメーション
３. クリックで斜め上からスライドしてくるアニメーション
【transform：rotate×scale】回転×拡大するCSS画像アニメーション３選
動きは下の画像のような感じになります
１. 【縦回転】transform rotateXで画像アニメーション
２. 【横回転】transform rotateYで画像アニメーション
３. 【3D回転】transform rotateYZで画像アニメーション
filterとtransformでリアルな絵画デザインのCSSスライダーアニメーション３選
動きは下の画像のような感じになります
１. クリックで横幅が伸び縮みしながらスライドするアニメーション
２. クリックで縦幅が伸び縮みしながらスライドするアニメーション
３. クリックで思いっきり伸び縮みしながらスライドするアニメーション
filterとtransformで超動くCSSスライダーアニメーション４選【Web制作者必見】
動きは下の画像のような感じになります
１. 縦回転するシンプルなスライダーアニメーション
２. 滑らかに横回転するスライダーアニメーション
３. 平面回転するスタイリッシュなスライダーアニメーション
【transform×回転『rotate』】CSS画像アニメーション３選
動きは下の画像のような感じになります
１. 【縦回転】transform rotateXで画像アニメーション
２. 【横回転】transform rotateYで画像アニメーション
３. 【3D回転】transform rotateYZで画像アニメーション
【transform rotate×画像背景】CSS回転アニメーション３選
動きは下の画像のような感じになります
１. 【縦回転】transform rotateX画像背景アニメーション
２. 【横回転】transform rotateY画像背景アニメーション
３. 【3D回転】transform rotateYZ画像背景アニメーション
clip path polygonで2枚の画像を半々(三角形)で表示するCSSアニメーション３選
動きは下の画像のような感じになります
１. 【ぼやけるアニメーション】clip path : polygon＋filter : blur
２. 【美しいアニメーション】clip path : polygon＋filter : grayscale contrast saturate
３. 【オーロラアニメーション】clip path : polygon＋filter : grayscale saturate hue-rotate
【解説付き】マテリアルデザインをコピペで実装！CSSスライダーアニメーション６選（filter編）
動きは下の画像のような感じになります
１. hoverで画像が半透明に？超便利なスライダーアニメーション
２. hoverで画像の色が暴れ出すスライダーアニメーション
３. hoverでモノクロ画像が200倍色鮮やかになるスライダーアニメーション
絶対失敗しないナビゲーションメニューサンプル３選
動きは下の画像のような感じになります
１. シンプルだけど洗練されたスライダーアニメーション
２. blurでぼやけながらスライドするスライダーアニメーション
３. blurとmargin-leftでぼやけながら右へスライドするスライダーアニメーション
hoverで画像の色が暴れ出す！filter: hue-rotateとtransitionでCSSエフェクト3選
動きは下の画像のような感じになります
１. 画像がイルミネーションみたいに光りながら回転するhoverエフェクト
２. 臨場感あふれる花火画像が立体的に回転するhoverエフェクト
３. 色相回転しながらぼかしアニメーションを効かせて消えていくhoverエフェクト
CSSだけ！hoverとtransitionで作る動的画像エフェクト4選(コピペOK)
動きは下の画像のような感じになります
１. 階段のように背景が現れるhoverエフェクト
２. 上からブロックが落ちてくるように背景が現れるhoverエフェクト
３. 斜め上からスクリーンのように背景が現れるhoverエフェクト
４. 手裏剣のように回転(rotate)しながら背景が現れるhoverエフェクト
hoverとtransitionでオシャレなCSS画像エフェクト４選！(背景がスっと表示される)
動きは下の画像のような感じになります
１. フワッと背景が現れるhoverアニメーション
２. 背景が徐々に画像全体へ広がるhoverアニメーション
３. 扉が閉まるように背景が現れるhoverアニメーション
４. 丸い背景が徐々に画像全体に広がるhoverアニメーション
【transform rotate(360deg)×flexbox】画像が回転+伸縮するCSSアニメーション３選
動きは下の画像のような感じになります
１. 【縦回転】transform rotateX(360deg)×flexbox画像アニメーション
２. 【横回転】transform rotateY(360deg)×flexbox画像アニメーション
３. 【平面回転】transform rotateZ(360deg)×flexbox画像アニメーション
【徹底解説】flexを応用して画像が伸縮するCSSアニメーション３選
動きは下の画像のような感じになります
１. flexで２つの画像が伸縮する画像アニメーション
２. flexでhoverした画像が100％拡大する画像アニメーション
３. filterでエフェクト＋flexで３つの画像が伸縮する画像アニメーション
【flexboxのjustify−content：center４選】CSS画像アニメーションを画面中央に配置
動きは下の画像のような感じになります
１. 半分の背景が左右から現れるCSS画像アニメーションをflexboxのjustify−content：centerで中央配置
２. 背景が両斜めから現れるCSS画像アニメーションをflexboxのjustify−content：centerで中央配置
３. 背景が上下から現れる自動ドアのようなCSS画像アニメーションをflexboxのjustify−content：centerで中央配置
４. 半分の背景が上下から現れるCSS画像アニメーションをflexboxのjustify−content：centerで中央配置
- 投稿日：2020-07-27T23:49:55+09:00
『自慢したくなる』コピペ大歓迎のCSS画像アニメーション５５選！【完全オリジナルコード】
こちらの記事に記載のデザイン・コードは全てオリジナルなので自由に使っていただいて大丈夫です(筆者が作成したため)
プロジェクトに取り込んでより充実したデザインにしてもらえれば○
コードは全てリンク先に説明付きで記載してあります
【真似したくなる】transform：rotate×scaleでCSS画像アニメーション３選
動きは下の画像のような感じになります
１. transform rotateX×scaleで【縦回転】CSS画像アニメーション
２. transform rotateY×scaleで【横回転】CSS画像アニメーション
３. transform rotateY/Z×scaleで【3D回転】画像アニメーション
transform:translateで絵画デザインのスライドショーを実現！CSSスライダーアニメーション３選
動きは下の画像のような感じになります
１. クリックで右方向からスライドしてくるアニメーション
２. クリックで上からスライドしてくるアニメーション
３. クリックで斜め上からスライドしてくるアニメーション
【transform：rotate×scale】回転×拡大するCSS画像アニメーション３選
動きは下の画像のような感じになります
１. 【縦回転】transform rotateXで画像アニメーション
２. 【横回転】transform rotateYで画像アニメーション
３. 【3D回転】transform rotateYZで画像アニメーション
filterとtransformでリアルな絵画デザインのCSSスライダーアニメーション３選
動きは下の画像のような感じになります
１. クリックで横幅が伸び縮みしながらスライドするアニメーション
２. クリックで縦幅が伸び縮みしながらスライドするアニメーション
３. クリックで思いっきり伸び縮みしながらスライドするアニメーション
filterとtransformで超動くCSSスライダーアニメーション４選【Web制作者必見】
動きは下の画像のような感じになります
１. 縦回転するシンプルなスライダーアニメーション
２. 滑らかに横回転するスライダーアニメーション
３. 平面回転するスタイリッシュなスライダーアニメーション
【transform×回転『rotate』】CSS画像アニメーション３選
動きは下の画像のような感じになります
１. 【縦回転】transform rotateXで画像アニメーション
２. 【横回転】transform rotateYで画像アニメーション
３. 【3D回転】transform rotateYZで画像アニメーション
【transform rotate×画像背景】CSS回転アニメーション３選
動きは下の画像のような感じになります
１. 【縦回転】transform rotateX画像背景アニメーション
２. 【横回転】transform rotateY画像背景アニメーション
３. 【3D回転】transform rotateYZ画像背景アニメーション
clip path polygonで2枚の画像を半々(三角形)で表示するCSSアニメーション３選
動きは下の画像のような感じになります
１. 【ぼやけるアニメーション】clip path : polygon＋filter : blur
２. 【美しいアニメーション】clip path : polygon＋filter : grayscale contrast saturate
３. 【オーロラアニメーション】clip path : polygon＋filter : grayscale saturate hue-rotate
【解説付き】マテリアルデザインをコピペで実装！CSSスライダーアニメーション６選（filter編）
動きは下の画像のような感じになります
１. hoverで画像が半透明に？超便利なスライダーアニメーション
２. hoverで画像の色が暴れ出すスライダーアニメーション
３. hoverでモノクロ画像が200倍色鮮やかになるスライダーアニメーション
絶対失敗しないナビゲーションメニューサンプル３選
動きは下の画像のような感じになります
１. シンプルだけど洗練されたスライダーアニメーション
２. blurでぼやけながらスライドするスライダーアニメーション
３. blurとmargin-leftでぼやけながら右へスライドするスライダーアニメーション
hoverで画像の色が暴れ出す！filter: hue-rotateとtransitionでCSSエフェクト3選
動きは下の画像のような感じになります
１. 画像がイルミネーションみたいに光りながら回転するhoverエフェクト
２. 臨場感あふれる花火画像が立体的に回転するhoverエフェクト
３. 色相回転しながらぼかしアニメーションを効かせて消えていくhoverエフェクト
CSSだけ！hoverとtransitionで作る動的画像エフェクト4選(コピペOK)
動きは下の画像のような感じになります
１. 階段のように背景が現れるhoverエフェクト
２. 上からブロックが落ちてくるように背景が現れるhoverエフェクト
３. 斜め上からスクリーンのように背景が現れるhoverエフェクト
４. 手裏剣のように回転(rotate)しながら背景が現れるhoverエフェクト
hoverとtransitionでオシャレなCSS画像エフェクト４選！(背景がスっと表示される)
動きは下の画像のような感じになります
１. フワッと背景が現れるhoverアニメーション
２. 背景が徐々に画像全体へ広がるhoverアニメーション
３. 扉が閉まるように背景が現れるhoverアニメーション
４. 丸い背景が徐々に画像全体に広がるhoverアニメーション
【transform rotate(360deg)×flexbox】画像が回転+伸縮するCSSアニメーション３選
動きは下の画像のような感じになります
１. 【縦回転】transform rotateX(360deg)×flexbox画像アニメーション
２. 【横回転】transform rotateY(360deg)×flexbox画像アニメーション
３. 【平面回転】transform rotateZ(360deg)×flexbox画像アニメーション
【徹底解説】flexを応用して画像が伸縮するCSSアニメーション３選
動きは下の画像のような感じになります
１. flexで２つの画像が伸縮する画像アニメーション
２. flexでhoverした画像が100％拡大する画像アニメーション
３. filterでエフェクト＋flexで３つの画像が伸縮する画像アニメーション
【flexboxのjustify−content：center４選】CSS画像アニメーションを画面中央に配置
動きは下の画像のような感じになります
１. 半分の背景が左右から現れるCSS画像アニメーションをflexboxのjustify−content：centerで中央配置
２. 背景が両斜めから現れるCSS画像アニメーションをflexboxのjustify−content：centerで中央配置
３. 背景が上下から現れる自動ドアのようなCSS画像アニメーションをflexboxのjustify−content：centerで中央配置
４. 半分の背景が上下から現れるCSS画像アニメーションをflexboxのjustify−content：centerで中央配置
- 投稿日：2020-07-27T23:49:55+09:00
【現役Vueエンジニアがおすすめ】コピペ大歓迎のオリジナルコードCSS画像アニメーション５５選！
こちらの記事に記載のデザイン・コードは全てオリジナルなので自由に使っていただいて大丈夫です(筆者が作成したため)
プロジェクトに取り込んでより充実したデザインにしてもらえれば○
コードは全てリンク先に説明付きで記載してあります
【真似したくなる】transform：rotate×scaleでCSS画像アニメーション３選
動きは下の画像のような感じになります
１. transform rotateX×scaleで【縦回転】CSS画像アニメーション
２. transform rotateY×scaleで【横回転】CSS画像アニメーション
３. transform rotateY/Z×scaleで【3D回転】画像アニメーション
transform:translateで絵画デザインのスライドショーを実現！CSSスライダーアニメーション３選
動きは下の画像のような感じになります
１. クリックで右方向からスライドしてくるアニメーション
２. クリックで上からスライドしてくるアニメーション
３. クリックで斜め上からスライドしてくるアニメーション
【transform：rotate×scale】回転×拡大するCSS画像アニメーション３選
動きは下の画像のような感じになります
１. 【縦回転】transform rotateXで画像アニメーション
２. 【横回転】transform rotateYで画像アニメーション
３. 【3D回転】transform rotateYZで画像アニメーション
filterとtransformでリアルな絵画デザインのCSSスライダーアニメーション３選
動きは下の画像のような感じになります
１. クリックで横幅が伸び縮みしながらスライドするアニメーション
２. クリックで縦幅が伸び縮みしながらスライドするアニメーション
３. クリックで思いっきり伸び縮みしながらスライドするアニメーション
filterとtransformで超動くCSSスライダーアニメーション４選【Web制作者必見】
動きは下の画像のような感じになります
１. 縦回転するシンプルなスライダーアニメーション
２. 滑らかに横回転するスライダーアニメーション
３. 平面回転するスタイリッシュなスライダーアニメーション
【transform×回転『rotate』】CSS画像アニメーション３選
動きは下の画像のような感じになります
１. 【縦回転】transform rotateXで画像アニメーション
２. 【横回転】transform rotateYで画像アニメーション
３. 【3D回転】transform rotateYZで画像アニメーション
【transform rotate×画像背景】CSS回転アニメーション３選
動きは下の画像のような感じになります
１. 【縦回転】transform rotateX画像背景アニメーション
２. 【横回転】transform rotateY画像背景アニメーション
３. 【3D回転】transform rotateYZ画像背景アニメーション
clip path polygonで2枚の画像を半々(三角形)で表示するCSSアニメーション３選
動きは下の画像のような感じになります
１. 【ぼやけるアニメーション】clip path : polygon＋filter : blur
２. 【美しいアニメーション】clip path : polygon＋filter : grayscale contrast saturate
３. 【オーロラアニメーション】clip path : polygon＋filter : grayscale saturate hue-rotate
【解説付き】マテリアルデザインをコピペで実装！CSSスライダーアニメーション６選（filter編）
動きは下の画像のような感じになります
１. hoverで画像が半透明に？超便利なスライダーアニメーション
２. hoverで画像の色が暴れ出すスライダーアニメーション
３. hoverでモノクロ画像が200倍色鮮やかになるスライダーアニメーション
絶対失敗しないナビゲーションメニューサンプル３選
動きは下の画像のような感じになります
１. シンプルだけど洗練されたスライダーアニメーション
２. blurでぼやけながらスライドするスライダーアニメーション
３. blurとmargin-leftでぼやけながら右へスライドするスライダーアニメーション
hoverで画像の色が暴れ出す！filter: hue-rotateとtransitionでCSSエフェクト3選
動きは下の画像のような感じになります
１. 画像がイルミネーションみたいに光りながら回転するhoverエフェクト
２. 臨場感あふれる花火画像が立体的に回転するhoverエフェクト
３. 色相回転しながらぼかしアニメーションを効かせて消えていくhoverエフェクト
CSSだけ！hoverとtransitionで作る動的画像エフェクト4選(コピペOK)
動きは下の画像のような感じになります
１. 階段のように背景が現れるhoverエフェクト
２. 上からブロックが落ちてくるように背景が現れるhoverエフェクト
３. 斜め上からスクリーンのように背景が現れるhoverエフェクト
４. 手裏剣のように回転(rotate)しながら背景が現れるhoverエフェクト
hoverとtransitionでオシャレなCSS画像エフェクト４選！(背景がスっと表示される)
動きは下の画像のような感じになります
１. フワッと背景が現れるhoverアニメーション
２. 背景が徐々に画像全体へ広がるhoverアニメーション
３. 扉が閉まるように背景が現れるhoverアニメーション
４. 丸い背景が徐々に画像全体に広がるhoverアニメーション
【transform rotate(360deg)×flexbox】画像が回転+伸縮するCSSアニメーション３選
動きは下の画像のような感じになります
１. 【縦回転】transform rotateX(360deg)×flexbox画像アニメーション
２. 【横回転】transform rotateY(360deg)×flexbox画像アニメーション
３. 【平面回転】transform rotateZ(360deg)×flexbox画像アニメーション
【徹底解説】flexを応用して画像が伸縮するCSSアニメーション３選
動きは下の画像のような感じになります
１. flexで２つの画像が伸縮する画像アニメーション
２. flexでhoverした画像が100％拡大する画像アニメーション
３. filterでエフェクト＋flexで３つの画像が伸縮する画像アニメーション
【flexboxのjustify−content：center４選】CSS画像アニメーションを画面中央に配置
動きは下の画像のような感じになります
１. 半分の背景が左右から現れるCSS画像アニメーションをflexboxのjustify−content：centerで中央配置
２. 背景が両斜めから現れるCSS画像アニメーションをflexboxのjustify−content：centerで中央配置
３. 背景が上下から現れる自動ドアのようなCSS画像アニメーションをflexboxのjustify−content：centerで中央配置
４. 半分の背景が上下から現れるCSS画像アニメーションをflexboxのjustify−content：centerで中央配置
- 投稿日：2020-07-27T23:49:55+09:00
【現役Vueエンジニアがオススメ】コピペ大歓迎の完全オリジナルコードCSS画像アニメーション５５選！
こちらの記事に記載のデザイン・コードは全てオリジナルなので自由に使っていただいて大丈夫です(筆者が作成したため)
プロジェクトに取り込んでより充実したデザインにしてもらえれば○
コードは全てリンク先に説明付きで記載してあります
【真似したくなる】transform：rotate×scaleでCSS画像アニメーション３選
動きは下の画像のような感じになります
１. transform rotateX×scaleで【縦回転】CSS画像アニメーション
２. transform rotateY×scaleで【横回転】CSS画像アニメーション
３. transform rotateY/Z×scaleで【3D回転】画像アニメーション
transform:translateで絵画デザインのスライドショーを実現！CSSスライダーアニメーション３選
動きは下の画像のような感じになります
１. クリックで右方向からスライドしてくるアニメーション
２. クリックで上からスライドしてくるアニメーション
３. クリックで斜め上からスライドしてくるアニメーション
【transform：rotate×scale】回転×拡大するCSS画像アニメーション３選
動きは下の画像のような感じになります
１. 【縦回転】transform rotateXで画像アニメーション
２. 【横回転】transform rotateYで画像アニメーション
３. 【3D回転】transform rotateYZで画像アニメーション
filterとtransformでリアルな絵画デザインのCSSスライダーアニメーション３選
動きは下の画像のような感じになります
１. クリックで横幅が伸び縮みしながらスライドするアニメーション
２. クリックで縦幅が伸び縮みしながらスライドするアニメーション
３. クリックで思いっきり伸び縮みしながらスライドするアニメーション
filterとtransformで超動くCSSスライダーアニメーション４選【Web制作者必見】
動きは下の画像のような感じになります
１. 縦回転するシンプルなスライダーアニメーション
２. 滑らかに横回転するスライダーアニメーション
３. 平面回転するスタイリッシュなスライダーアニメーション
【transform×回転『rotate』】CSS画像アニメーション３選
動きは下の画像のような感じになります
１. 【縦回転】transform rotateXで画像アニメーション
２. 【横回転】transform rotateYで画像アニメーション
３. 【3D回転】transform rotateYZで画像アニメーション
【transform rotate×画像背景】CSS回転アニメーション３選
動きは下の画像のような感じになります
１. 【縦回転】transform rotateX画像背景アニメーション
２. 【横回転】transform rotateY画像背景アニメーション
３. 【3D回転】transform rotateYZ画像背景アニメーション
clip path polygonで2枚の画像を半々(三角形)で表示するCSSアニメーション３選
動きは下の画像のような感じになります
１. 【ぼやけるアニメーション】clip path : polygon＋filter : blur
２. 【美しいアニメーション】clip path : polygon＋filter : grayscale contrast saturate
３. 【オーロラアニメーション】clip path : polygon＋filter : grayscale saturate hue-rotate
【解説付き】マテリアルデザインをコピペで実装！CSSスライダーアニメーション６選（filter編）
動きは下の画像のような感じになります
１. hoverで画像が半透明に？超便利なスライダーアニメーション
２. hoverで画像の色が暴れ出すスライダーアニメーション
３. hoverでモノクロ画像が200倍色鮮やかになるスライダーアニメーション
絶対失敗しないナビゲーションメニューサンプル３選
動きは下の画像のような感じになります
１. シンプルだけど洗練されたスライダーアニメーション
２. blurでぼやけながらスライドするスライダーアニメーション
３. blurとmargin-leftでぼやけながら右へスライドするスライダーアニメーション
hoverで画像の色が暴れ出す！filter: hue-rotateとtransitionでCSSエフェクト3選
動きは下の画像のような感じになります
１. 画像がイルミネーションみたいに光りながら回転するhoverエフェクト
２. 臨場感あふれる花火画像が立体的に回転するhoverエフェクト
３. 色相回転しながらぼかしアニメーションを効かせて消えていくhoverエフェクト
CSSだけ！hoverとtransitionで作る動的画像エフェクト4選(コピペOK)
動きは下の画像のような感じになります
１. 階段のように背景が現れるhoverエフェクト
２. 上からブロックが落ちてくるように背景が現れるhoverエフェクト
３. 斜め上からスクリーンのように背景が現れるhoverエフェクト
４. 手裏剣のように回転(rotate)しながら背景が現れるhoverエフェクト
hoverとtransitionでオシャレなCSS画像エフェクト４選！(背景がスっと表示される)
動きは下の画像のような感じになります
１. フワッと背景が現れるhoverアニメーション
２. 背景が徐々に画像全体へ広がるhoverアニメーション
３. 扉が閉まるように背景が現れるhoverアニメーション
４. 丸い背景が徐々に画像全体に広がるhoverアニメーション
【transform rotate(360deg)×flexbox】画像が回転+伸縮するCSSアニメーション３選
動きは下の画像のような感じになります
１. 【縦回転】transform rotateX(360deg)×flexbox画像アニメーション
２. 【横回転】transform rotateY(360deg)×flexbox画像アニメーション
３. 【平面回転】transform rotateZ(360deg)×flexbox画像アニメーション
【徹底解説】flexを応用して画像が伸縮するCSSアニメーション３選
動きは下の画像のような感じになります
１. flexで２つの画像が伸縮する画像アニメーション
２. flexでhoverした画像が100％拡大する画像アニメーション
３. filterでエフェクト＋flexで３つの画像が伸縮する画像アニメーション
【flexboxのjustify−content：center４選】CSS画像アニメーションを画面中央に配置
動きは下の画像のような感じになります
１. 半分の背景が左右から現れるCSS画像アニメーションをflexboxのjustify−content：centerで中央配置
２. 背景が両斜めから現れるCSS画像アニメーションをflexboxのjustify−content：centerで中央配置
３. 背景が上下から現れる自動ドアのようなCSS画像アニメーションをflexboxのjustify−content：centerで中央配置
４. 半分の背景が上下から現れるCSS画像アニメーションをflexboxのjustify−content：centerで中央配置
- 投稿日：2020-07-27T23:49:55+09:00
【現役Vueエンジニア完全オリジナルコード】コピペ大歓迎のCSS画像アニメーション５５選！
こちらの記事に記載のデザイン・コードは全てオリジナルなので自由に使っていただいて大丈夫です(筆者が作成したため)
プロジェクトに取り込んでより充実したデザインにしてもらえれば○
コードは全てリンク先に説明付きで記載してあります
【真似したくなる】transform：rotate×scaleでCSS画像アニメーション３選
動きは下の画像のような感じになります
１. transform rotateX×scaleで【縦回転】CSS画像アニメーション
２. transform rotateY×scaleで【横回転】CSS画像アニメーション
３. transform rotateY/Z×scaleで【3D回転】画像アニメーション
transform:translateで絵画デザインのスライドショーを実現！CSSスライダーアニメーション３選
動きは下の画像のような感じになります
１. クリックで右方向からスライドしてくるアニメーション
２. クリックで上からスライドしてくるアニメーション
３. クリックで斜め上からスライドしてくるアニメーション
【transform：rotate×scale】回転×拡大するCSS画像アニメーション３選
動きは下の画像のような感じになります
１. 【縦回転】transform rotateXで画像アニメーション
２. 【横回転】transform rotateYで画像アニメーション
３. 【3D回転】transform rotateYZで画像アニメーション
filterとtransformでリアルな絵画デザインのCSSスライダーアニメーション３選
動きは下の画像のような感じになります
１. クリックで横幅が伸び縮みしながらスライドするアニメーション
２. クリックで縦幅が伸び縮みしながらスライドするアニメーション
３. クリックで思いっきり伸び縮みしながらスライドするアニメーション
filterとtransformで超動くCSSスライダーアニメーション４選【Web制作者必見】
動きは下の画像のような感じになります
１. 縦回転するシンプルなスライダーアニメーション
２. 滑らかに横回転するスライダーアニメーション
３. 平面回転するスタイリッシュなスライダーアニメーション
【transform×回転『rotate』】CSS画像アニメーション３選
動きは下の画像のような感じになります
１. 【縦回転】transform rotateXで画像アニメーション
２. 【横回転】transform rotateYで画像アニメーション
３. 【3D回転】transform rotateYZで画像アニメーション
【transform rotate×画像背景】CSS回転アニメーション３選
動きは下の画像のような感じになります
１. 【縦回転】transform rotateX画像背景アニメーション
２. 【横回転】transform rotateY画像背景アニメーション
３. 【3D回転】transform rotateYZ画像背景アニメーション
clip path polygonで2枚の画像を半々(三角形)で表示するCSSアニメーション３選
動きは下の画像のような感じになります
１. 【ぼやけるアニメーション】clip path : polygon＋filter : blur
２. 【美しいアニメーション】clip path : polygon＋filter : grayscale contrast saturate
３. 【オーロラアニメーション】clip path : polygon＋filter : grayscale saturate hue-rotate
【解説付き】マテリアルデザインをコピペで実装！CSSスライダーアニメーション６選（filter編）
動きは下の画像のような感じになります
１. hoverで画像が半透明に？超便利なスライダーアニメーション
２. hoverで画像の色が暴れ出すスライダーアニメーション
３. hoverでモノクロ画像が200倍色鮮やかになるスライダーアニメーション
絶対失敗しないナビゲーションメニューサンプル３選
動きは下の画像のような感じになります
１. シンプルだけど洗練されたスライダーアニメーション
２. blurでぼやけながらスライドするスライダーアニメーション
３. blurとmargin-leftでぼやけながら右へスライドするスライダーアニメーション
hoverで画像の色が暴れ出す！filter: hue-rotateとtransitionでCSSエフェクト3選
動きは下の画像のような感じになります
１. 画像がイルミネーションみたいに光りながら回転するhoverエフェクト
２. 臨場感あふれる花火画像が立体的に回転するhoverエフェクト
３. 色相回転しながらぼかしアニメーションを効かせて消えていくhoverエフェクト
CSSだけ！hoverとtransitionで作る動的画像エフェクト4選(コピペOK)
動きは下の画像のような感じになります
１. 階段のように背景が現れるhoverエフェクト
２. 上からブロックが落ちてくるように背景が現れるhoverエフェクト
３. 斜め上からスクリーンのように背景が現れるhoverエフェクト
４. 手裏剣のように回転(rotate)しながら背景が現れるhoverエフェクト
hoverとtransitionでオシャレなCSS画像エフェクト４選！(背景がスっと表示される)
動きは下の画像のような感じになります
１. フワッと背景が現れるhoverアニメーション
２. 背景が徐々に画像全体へ広がるhoverアニメーション
３. 扉が閉まるように背景が現れるhoverアニメーション
４. 丸い背景が徐々に画像全体に広がるhoverアニメーション
【transform rotate(360deg)×flexbox】画像が回転+伸縮するCSSアニメーション３選
動きは下の画像のような感じになります
１. 【縦回転】transform rotateX(360deg)×flexbox画像アニメーション
２. 【横回転】transform rotateY(360deg)×flexbox画像アニメーション
３. 【平面回転】transform rotateZ(360deg)×flexbox画像アニメーション
【徹底解説】flexを応用して画像が伸縮するCSSアニメーション３選
動きは下の画像のような感じになります
１. flexで２つの画像が伸縮する画像アニメーション
２. flexでhoverした画像が100％拡大する画像アニメーション
３. filterでエフェクト＋flexで３つの画像が伸縮する画像アニメーション
【flexboxのjustify−content：center４選】CSS画像アニメーションを画面中央に配置
動きは下の画像のような感じになります
１. 半分の背景が左右から現れるCSS画像アニメーションをflexboxのjustify−content：centerで中央配置
２. 背景が両斜めから現れるCSS画像アニメーションをflexboxのjustify−content：centerで中央配置
３. 背景が上下から現れる自動ドアのようなCSS画像アニメーションをflexboxのjustify−content：centerで中央配置
４. 半分の背景が上下から現れるCSS画像アニメーションをflexboxのjustify−content：centerで中央配置
- 投稿日：2020-07-27T23:42:33+09:00
ゼロからのプログラミング学習 DAY 2
二日目無事達成
本日は10時退社であったため30分今日の学習が限界であった
ホリエモン曰く、少しの時間でも良いから毎日やることが非常に大事であるとのこと。
これをやめたら人生終わり。
なんだか自分のコードで形作られていくのが面白い
- 投稿日：2020-07-27T20:18:59+09:00
あなたのCSS力の助けになってくれる素晴らしいWebサイト12選
以下はAman Varma( Twitter / GitHub / stackoverflow / Webサイト )による記事、12 Super websites to help you with your CSS problems ☺の日本語訳です。
12 Super websites to help you with your CSS problems ☺
これらは、あなたのCSSをより楽しく簡単に装飾してくれる、そしてもしかしたらあなたが躓いているCSSの問題の多くを解決してくれるかもしれないWebサイトたちです。
1. Pixel art
あなたもきっとピクセルアートが好きに違いありません。
90%の人はpngでピクセルアートを書いてサイトに追加していると思いますが、でもそのピクセルアートをCSSで書けたらもっといいと思いませんか？
そこでPixel Art to CSSです。
書いたピクセルアートをCSSに変換してくれます。2. Gradient
CSSグラデーションは非常に美しいですが、使いこなすのは難しいものです。
正しい色を見つける必要があり、何行ものコードを書かなければなりません。
また互換性に気を使うと、さらに多くのコードが必要になります。
それらの問題を解決するためにCSS GradientのWebサイトが存在します。
直感的なカラーセレクタや後方互換は大きな助けになってくれるでしょう。
ここにはまた、Gradient BackgroundsやColor Shadesといったツールも存在します。3. Compatibility
古いブラウザには対応していないCSSタグや、逆に新しすぎて誰も対応していないようなCSSタグがたくさん存在します。
自分の使っているタグがどれだけのブラウザに対応しているかは、様々なサイトを見て確認しなければなりません。
そんなときに役立つのがCanIUseです。
CanIUseは、どのブラウザがどのタグをサポートしているかを教えてくれます。
またNewsセクションでは、ブラウザが新しく対応したタグの状況について教えてくれます。4. Cheatsheets
もしかしたら、私のようにCSSタグをよく忘れてしまうかもしれません。
そんなときのために、手元にCSSチートシートを用意しています。
CSSチートシートで検索すると数千もの結果が出てくるのですが、その中でも最高のものであると私が信じているもののひとつがDevhintsです。
CSS以外にも、HTML、Python、Rubyなど、多くの言語のチートシートが用意されています。5. Color Palettes
あなたのプロジェクトにぴったりのイメージカラーは見つかりましたか？
ネットでは多くの素晴らしいオンラインカラーパレットを見出すことができますが、私が気に入っているのはシンプルなColor Huntです。
新着順、注目順、ランダム順などで並べ替えることができ、最も頭を使わずにカラーパレットを選択することができます。6. Unicode
世界には何万ものUnicodeが存在するので、全てを覚えきれない人もときにはいることでしょう。
この問題を解決するためにUnicode Tableが存在します。
あなたのプロジェクトにマッチする絵文字やUnicodeを、Unicode Tableから探してみましょう。
また、 ?のような面白Unicodeも見つけられるかもしれません。7. CSS Validator
CSSを正しく使えているか、どのように判断しましょう。
W3C CSS Validatorを使えばいいのです。
W3C CSS Validatorは、WebデザイナーやWeb開発者が作ったCSSをチェックできるように、W3Cが制作したサイトです。8. Old Browser support
あなたのWebサイトを、未対応のユーザエージェントを持つ古い古いブラウザや、新しいブラウザでも見れるようにしたいと思いませんか？
そこでAutoprefixerです。
AutoprefixerはCSSを解析し、Can I Useの対応状況を見て、CSSにベンダープレフィックスを追加してくれます。
AutoprefixerはGoogleにも推奨されていて、実際にTwitterやTaobaoが使用しています。9. Other awesome tools
Bennett Feelyは、初心者にもプロにも助けになるような、素晴らしいWebサイトを幾つも開発しています。
私が最も気に入っているのはCSS Pie Chartで、conic-gradientを使った円グラフを生成することができます。
またClippyはCSSで画像をクリッピングし、Image Effect wit CSSではCSS blend modeを使った様々な画像効果を紹介し、そしてCSS Gradientsでは様々なCSSグラデーションを参照することができます。10. Tobias Ahlin Thanks to Siddhartha Sarkar
Tobiasは、Webサイトで幾つもの素晴らしいCSSを公開しているもう一人の開発者です。
彼のWebサイトからProjectセクションを見てみると、彼が手掛けた多くの作品、Moving Letters、TypeSource、SpinKitなどを見ることができます。
とても役に立ちそうなCSSです。11. Hayk An:: Workbench Thanks to Amruth Pillai
Hayk AnのWebサイトには、インターネット上で最も有用で興奮させられるサイトのいくつかを見つけることができます。
これらはインスピレーションの金脈であり、あなたのウェブサイトデザインにきっと多くの刺激を与えてくれるでしょう。12. You can suggest in the comment I will make it my number 12 or we can till 20 ;)
あなたの好きを12番目にしてくれていいのよ。
ピクセルアート By lipixelart
コメント欄
「Spinkit.cssがかっこいいローディングしてくれる。」「この作者のサイトを追加したよ。」
「アプリを作るときにScaleでカラーパレットを選択したよ。」「この作者のサイトを追加したよ。」
「CSSセレクタがわからないときのSelectors Explainedいいぞ。」
「有益なリンクありがとう」
「いくつかお気に入りに登録した！」
「素晴らしいキュレーションありがとう? 」感想
もはや今のCSSは、私のような一般人のレベルでは何も作れないところにまでなっています。
一からどうにかするのは諦めて、誰かが作ってくれている、これら優れたツールやパーツを拝借させてもらって、ブラッシュアップを図っていきましょう。
単にコピペするだけでもワンランク上の見た目を作れるようになる、素晴らしいサイトたちです。まあ私はフロントエンドエンジニアではないので、最近はもうBulma突っ込んで適当にdiv生やして終わりますけどね。
- 投稿日：2020-07-27T20:07:36+09:00
初心者によるプログラミング学習ログ 383日目
100日チャレンジの383日目
twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。
すでに100日超えましたが、継続。
100日チャレンジは、ぱぺまぺの中ではプログラミングに限らず継続学習のために使っています。
383日目は、
おはようございます
— ぱぺまぺ@社畜✕投資✕ブロガー (@ppmp65) July 26, 2020
昨日の作業・やったこと⇩
●就寝前筋トレ5分、キンドル読書 10分
●ブログ1記事作成
●プログラミング学習383日目 2h
・メンターの課題
・スライドショー実装
7連勤目。#駆け出しエンジニアとつながりたい#100DaysOfCode#早起きチャレンジ
- 投稿日：2020-07-27T17:31:42+09:00
iGarage 体験会カリキュラム
JavaScriptでおみくじを作ってみよう
今日のゴール
ボタンをクリックするとランダムで運勢が表示されるおみくじを作ってみましょう。
↓クリック↓
使用するファイル
MyOmikujiフォルダ内にある、index.html,styles.css,main.jsを編集していきます。
index.htmlでは全体の見た目styles.cssではスタイルmain.jsではアニメーションを主に作ります。
見た目の実装
まずは
index.htmlで全体の見た目を作っていきます。テキストエディタで
index.htmlを開いて、以下を貼り付けましょう。index.html<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>おみくじ</title> <link rel="stylesheet" href="css/styles.css"> </head> <body> <script src="js/main.js"></script> </body> </html>これはHTMLを書く際の決まりのようなものです。
次にボタンとなる要素を作ります。
<body>の下の行に、index.html<div id="btn">?</div>を入れましょう。
最初ボタンに表示される?を入れておきました。
また、id="btn"と入れておくと、後でJavaScriptから扱いやすくなります。ここまで出来ているか、
index.htmlをブラウザで開いて確認してみましょう。
?が表示されていればOKです。ボタンのスタイルを作ろう
次に、
styles.cssを編集してボタンのスタイルを作っていきましょう。先程、
id="btn"として?を表示した部分をボタンの形にしましょう。
styles.cssを開いて、styles.css#btn { width: 200px; /* 幅: 200px */ height: 200px; /* 高さ: 200px */ background: #ef454a; /* 背景色: #ef454a */ border-radius: 50%; /* ボタンを円形に */ margin: 30px auto; /* ボタンの位置を上から30px,左右の余白を均等に */ }一度、ブラウザを更新して確認してみましょう。
?の位置がずれてしまっているので、直してみましょう。
margin: 30px auto;の下の行を追加します。styles.css#btn { width: 200px; /* 幅: 200px */ height: 200px; /* 高さ: 200px */ background: #ef454a; /* 背景色: #ef454a */ border-radius: 50%; /* ボタンを円形に */ margin: 30px auto; /* ボタンの位置を上から30px,左右の余白を均等に */ /* ここから */ text-align: center; /* 左右中央揃え */ line-height: 200px; /* 高さ調整 */ color: #fff; /* 文字の色: 白 */ font-weight: bold; /* 太字 */ font-size: 42px; /* 文字の大きさ: 42px */ /* ここまで */ }ブラウザを更新して確認してみましょう。
ボタンをクリックした操作を作ろう
ボタンをクリックできるようにして、クリックした時の処理を書いていきましょう。
main.jsを開いて、main.js'use strict';を入れましょう。これによって厳密なエラーチェックをするようにします。
その下の行に、main.js{ const btn = document.getElementById('btn'); btn.addEventListener('click', () => { btn.textContent = 'hit!'; }); }を入れましょう。
ブラウザを更新して変化を見てみましょう。
ボタンをクリックするとhit!と表示されるようになりました。
ここで、ボタンがクリックできることがわかるようにスタイルを追加し、さらに、ボタンの形を整えていきましょう。
styles.cssを開いて、
font-size: 42px;の下の行を追加します。styles.css#btn { width: 200px; /* 幅: 200px */ height: 200px; /* 高さ: 200px */ background: #ef454a; /* 背景色: #ef454a */ border-radius: 50%; /* ボタンを円形に */ margin: 30px auto; /* ボタンの位置を上から30px,左右の余白を均等に */ text-align: center; /* 左右中央揃え */ line-height: 200px; /* 高さ調整 */ color: #fff; /* 文字の色: 白 */ font-weight: bold; /* 太字 */ font-size: 42px; /* 文字の大きさ: 42px */ /* ここから */ cursor: pointer; /* カーソルをポインターに */ box-shadow: 0 10px 0 #d1483e; /* ボタンの下に影をつける */ user-select: none; /* 中のテキストを選択不可に */ /* ここまで */ }一番下の行に、
styles.css#btn:hover { opacity: 0.9; /* ホバーした時に色を薄く */ } /* クリックするとボタンが押し込まれたように */ #btn:active { box-shadow: 0 5px 0 #d1483e; margin-top: 35px; }を追加します。
ブラウザを更新して確認してみましょう。
乱数を表示してみよう
最終的にはランダムで運勢が表示されるようにします。
そのために、乱数を使ってランダムな数値を作ってみましょう。JavaScriptでは、
Math.random()という命令を使うことで０以上１未満のランダムな数値を生成出来ます。
main.jsの'hit!'の部分をMath.random()に変えます。main.js{ const btn = document.getElementById('btn'); btn.addEventListener('click', () => { btn.textContent = Math.random(); }); }このようになります。
ブラウザを更新して確認してみましょう。
０以上１未満のランダムな値が生成されるかと思います。
条件分岐で運勢を表示しよう
条件分岐にはif文を使います。
まずは、先程の
main.js{ const btn = document.getElementById('btn'); btn.addEventListener('click', () => { btn.textContent = Math.random(); }); }を消して、
main.js{ const btn = document.getElementById('btn'); btn.addEventListener('click', () => { const n = Math.random(); }); }とします。
これでnをランダムな数値としています。この
nはMath.random()によって、０以上１未満の乱数となるので、
例えば、大吉を22％の確率で表示したい場合は、main.jsif (n < 0.22) { btn.textContent = '大吉' }をこの行:
main.jsconst n = Math.random();の下の行に入れてあげれば良いでしょう。
また、大吉以外の場合も書いてあげましょう。
main.jsif (n < 0.22) { btn.textContent = '大吉' } else if (条件２) { btn.textContent = '中吉' } else if (条件３) { btn.textContent = '小吉' } else { btn.textContent = '凶' }といったように書いてあげます。
22%の確率で大吉、8%の確率で中吉、13%の確率で小吉、それ以外の場合は凶と表示させるとしたら、
この条件２と条件３をどうすれば良いか考えてみましょう。書けたら、コーチに見てもらいましょう。
最後に、他の運勢を追加したり確率を変えたりして、オリジナルのおみくじを完成させましょう。
体験会カリキュラムはこれで以上になります。
Web開発では、このような全体の見た目、スタイル、アニメーションなどを取り入れながら作っていきます。
体験会カリキュラムを通して、自分オリジナルのWebサイトのアイデアがふくらんだのではないでしょうか。また、見た目だけでなく、サイトそのものの構造も自分で作って行くことになります。
詳しい内容はコーチに聞いてみてください。iGarageでこれらをさらに深く学び、自分だけのWebサイトを作っていきましょう。
- 投稿日：2020-07-27T15:10:16+09:00
HTML,CSSにてブラウザでマンダラートを表示する際のフロントコーディングメモ
やりたいこと
- ブラウザでマンダラートを表示させたい。
実装
PHP
<?php $item = []; $item[] = 'Fruit'; $item[] = 'apple'; $item[] = 'banana'; $item[] = 'orange'; $item[] = 'lemon'; $item[] = 'strawberry'; $item[] = 'melon'; $item[] = 'grape'; $item[] = 'cherry'; $item[] = 'peach'; ?>HTML
<div class="mandal"> <div class="box cell"><center class="cell-inner"><?=$item[1]?></center></div> <div class="box cell"><center class="cell-inner"><?=$item[2]?></center></div> <div class="box cell"><center class="cell-inner"><?=$item[3]?></center></div> <div class="box cell"><center class="cell-inner"><?=$item[4]?></center></div> <div class="box cell-center"><center class="cell-inner"><?=$item[0]?></center></div> <div class="box cell"><center class="cell-inner" ><?=$item[5]?></center></div> <div class="box cell"><center class="cell-inner"><?=$item[6]?></center></div> <div class="box cell"><center class="cell-inner"><?=$item[7]?></center></div> <div class="box cell"><center class="cell-inner"><?=$item[8]?></center></div> <div class="clear"></div> </div>CSS
div.mandal { width: 608px; height: 608px; border: 2px solid #999; padding-top: 2px; padding-left: 2px; } div.box:hover { background-color: white; } div.box { float: left; text-align: center; width: 200px; height: 200px; border: 1px solid #999; } div.cell-center { display:table; background-color: #fff; } div.cell { display:table; background-color: #efefef; } center.cell-inner { display:table-cell; vertical-align: middle; } div.clear { clear: both; }
- 投稿日：2020-07-27T14:11:38+09:00
CSSでプリンを作ってみた
はじめに
昔ながらの喫茶店に行くのが好きなのだけれど、ここ数ヶ月コロナの影響で行くことができずにいる。
そろそろ喫茶店のプリンが食べたいし、そろそろ苦手なCSSも克服したい。
というわけで、CSSでプリンを作ってみた。?
See the Pen Pudding by lovemeseptember (@lovemeseptember) on CodePen.
参考
- 投稿日：2020-07-27T09:00:37+09:00
【注意！】iOSでは背景画像が動いてしまう問題について
はじめに
簡単なwebページを作っていざデプロイ。
そして、iPhoneなどの実機で確認。
しかし、開発時にレスポンシブ対応させたのにも関わらずレイアウトが異なってしまうってことに陥ってしまいます。
今回は、
background-attachment: fixed;が効かないことについてまとめてみました。background-attachment: fixed;が効かない問題
スクロール時に背景画像を固定したい時、
background-attachment: fixed;を使用すれば背景画像の固定が出来ます。しかし、これ。iOSでは思うように動作しません。
と、言うよりも
background-attachment: fixed; background-size: coverを同時に使用した場合に動きません。
なぜか？
iOS has an issue preventing background-attachment: fixed from being used with background-size: cover - see details
公式でも記載されているバグみたいです。
では、どうすれば？
擬似要素を活用する
iOSでも背景を固定するためには、
「bodyの擬似要素にbackground-imageをおく」
（ちなみに、全体を囲う要素であればbodyでなくてもかまいません。）事で実現できます。
sample.cssbody:before{ content: ""; display: block; position: fixed; top: 0; left: 0; z-index: -1; width: 100%; height: 100vh; background: url("#{$bgPath}about_back.jpeg") center no-repeat; background-size: cover; }要は、擬似要素ごと画面幅いっぱいに広げて固定します。
画像を固定するのではなく、要素を固定することになるため背景を固定できます。
そのため、
background-attachment: fixed;ではなく、position: fixed;を使用します。
height: 100vh;で画面の高さいっぱいにheightをとっています【ポイント】
・背景画像の固定ではなく、要素自体の固定を利用することで、
background-attachment: fixed;の利用を避ける。参考
- 投稿日：2020-07-27T08:53:45+09:00
【transform: rotateX/rorateY】iOSでの挙動がおかしい訳は？
はじめに
transform : rotateY(90deg);などを用いて、スクロール時に要素を回転させたい。そういう時に使える便利な
transformプロパティ。そして、完成していざデプロイ！
しかし、iOS実機では動かない事態が起こってしまいました。
そこで、いくつかの落とし穴にハマったので記載していこうと思います。
奥行きを作らないといけなかった
sample.html<div class = "section"> <div class = "content"></div> </div>sample.css.section{ margin: 0 auto; width: 100%; } .content{ position: fixed; top: 200px; right: 100px; width: 50%; height: 50%; background-position: center center; background-size: cover; opacity: 0; transition: all 0.2s ease 0s; transform: rotateY(90deg); -webkit-transform: rotateY(90deg); } .show .content{ opacity: 1; transform: rotateY(0deg); -webkit-transform: rotateY(0deg); }開発段階では、上記コードで問題なく期待通りの動作します。
ただし、デプロイ後、iOSで確認した際には状況が変わります。
僕の場合は、
transform : rotateY;で回転しないどころか、スクロール時、画面が縦に真っ二つに割れていましまします。では、どうすればよいのか？
解決策は？
結論は、
親要素にperspectiveプロパティを追加するsample.css.section{ margin: 0 auto; width: 100%; /*追加*/ -webkit-perspective: 500px; perspective: 500px; }perspectiveとは、
「3D変形の奥行きの深さを指定するプロパティ」です。
iOSでは、回転軸の位置が定められなく思うように動作できませんでした。
そこで、
perspectiveで3D変形用の軸を定めています。ここまでで、解決する方もいらっしゃるでしょう。
しかし。
僕のように、
transform : rotateY;をかけた要素に対して、position: fixed;を使っている場合。今度は、実機では正常に動くが、開発時（それも、僕の場合はchromeの時にのみ）には思っている挙動はしてくれません。
なぜか？
'transform'プロパティに 'none'以外の値を指定すると、適用先の要素に新しいローカル座標系が確立されます。
Transform Rendering Model要は、
transformを使用することで3dでの判断になる為、固定位置が定まらないという事です。じゃ、どうすれば？
・transformを外す
・html構造の親子関係を解消させる仕様上の問題なので、上記のパターンで変更を加えましょう。
参考
・iOS8 Safariで-webkit-transform: rotateX/rorateYが効かない/要素が消える
・[CSS] transform:perspectiveを使用した、パタッと開いて閉じるサイドメニュー
・position:fixedによる画面位置固定が出来ない、そんなときもあるよね。