What's New Qiita

20200706のHTMLに関する記事は11件です。

  • 投稿日：2020-07-06T23:03:54+09:00

【初心者でもわかる】clearfixって結局何してるの？

どうも、7noteです。今回は真面目にclearfixについて解説していきます。

CSSでfloatの使い方を調べると、「clearfixしてください！」みたいなのを書いてる記事をみたことありませんか？
私も初めてclearfix使った時は「なんだこれ？」って感じであまりうまく使えてなかったです。なんかそういうfloat使う時の決まり文句的な物だと思ってました。

でも、今なら仕組みがわかるので解説していきます！意外と丁寧にclearfixについて解説している記事は多くないので、
この記事を読んで、みなさんもclearfixとfloatを使いこなしてください！

clearfixの例

googleなどで検索して出てくるclearfixの記述例として以下のような物が検索で出てくると思います。
今回はこのclearfixを使って解説していきます。

style.css
.clearfix::after {
    content: "";
    display: block;
    clear: both;
}

.clearfix {
    display: block;
}

clearfixを使うソース（float）

index.html
<header>ヘッダー</header>
<main class="clearfix"> <!-- clearfixのclassをつける -->
    <article>ここに記事の文章がきます。ここに記事の文章がきます。</article> <!-- cssでfloatさせる -->
    <aside>サイドバー</aside> <!-- cssでfloatさせる -->
</main>
<footer>フッター</footer>
style.css
article,
aside {
    float: left; /* articleとasideをfloatさせて横並びに。 */
}

    /* わかりやすくするために幅と背景色を指定 */
    header {
        width: 400px;
        background: #FCC; /* 背景に赤色を指定 */
    }
    article {
        width: 300px;
        background: #CFC; /* 背景に緑色を指定 */
    }
    aside {
        width: 100px;
        background: #CCF; /* 背景に青色を指定 */
    }
    footer {
        width: 400px;
        background: #FCC; /* 背景に赤色を指定 */
    }

完成図

fix.png

もしclearfixがないと・・・

ng.png

このように、空いている隙間にフッターが入り込んでしまいます。

そもそもfloatとは？

floatというのは日本語で言うと「回り込み」です。今回はタグの中で、記事とサイドバーが横並びに並べるためにつかってます。floatしている要素を無視して次のフッターの要素が上に詰めようとして隙間に入ってしまった状態です。floatの解説は簡単に。

clearfixの解説

clearfixは、floatさせている要素の親要素に対して入れることが一般的ですね。
じゃあなぜclearfixを入れると、フッターが隙間に回り込まなくなるのか？その秘密はcssの「clear: both;」にあります。
この「clear: both;」がいわゆる回り込みを解除しなさいと言う意味のCSSになります。
そして、clearfixのついている要素の疑似要素（::after）に「clear: both;」があることで、floatの回り込みがここで解除されます。

（ヘッダー）
<メイン>
    <記事>
    <サイドバー>
    ::after  ←ここにclearfixの疑似要素が入り、このタイミングで回り込み解除が入る。
<終メイン>
（フッター）

「clear: both;」はブロック要素に当てないと期待通りの効果がないので注意！

まとめ

最初はfloatを使うときは、親要素にclearfixをつけると言う覚え方で問題ないと思います。
ただ、複雑なページや大規模なサイトを作るときはしっかりとclearfixの仕組みを理解しておくと、綺麗なソースが書け、廃発時間の短縮にもなります。
ぜひ使いこなしてマスターしてください！

おそまつ！

（コメント・質問・ソースの指摘等なんでもウェルカムです！初心者の方でも気軽に質問ください！）

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-07-06T20:48:28+09:00

初心者によるプログラミング学習ログ 362日目

100日チャレンジの362日目

twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。
すでに100日超えましたが、継続。
100日チャレンジは、ぱぺまぺの中ではプログラミングに限らず継続学習のために使っています。
362日目は、

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-07-06T17:44:29+09:00

【現役Vueエンジニアおすすめ】実務で使えるCSSマテリアルデザイン１０１選（保存版）

スクリーンショット 2020-07-06 17.42.42.png

コピペだけで作れるマテリアルデザインを１０１個ご紹介します。

box-shadow, filter, transform,などをふんだんに使っており、transitionで滑らかな動きが表されています

コードには説明もわかりやすく書いてあるのでかなり参考になります

Webデザイン初心者の方はもちろんですが、バックエンドエンジニアの方にもとても助かる内容になっています

CSSボタンアニメーション１０１選

１. シンプルなスライダーマテリアルデザイン３選

そのまま使えるスライダーアニメーションのマテリアルデザインとなっています

transition-durationを使っていてわかりやすく説明もされているのでかなり重宝します

qiita-material-image1.png

↓参考記事は下の記事です↓

qiita-material-design1.png

２. filterとopacityを使いこなすスライダーマテリアルデザイン３選

filterとopacityを使ったそのまま使えるスライダーアニメーションのマテリアルデザインとなっています

transition-durationを使っていてわかりやすく説明もされているのでかなり重宝します

qiita-material-image2.png

↓参考記事は下の記事です↓

qiita-material-design2.png

３. transformを使用したスライダーアニメーション3選

translateやrotate、box-shadowも適宜使用することで様々な場面（Web制作やWebアプリケーションなど）で利用できるデザインになっています

qiita-slider-3d.png

↓参考記事は下の記事です↓

qiita-17.png

４. transform:scaleを使用したスライダーアニメーション3選

scaleでスライダー画像やナビゲーションボタンの拡大縮小を行いそれに対してアニメーションを使用しており幅広く使えるものになっています

qiita-slider-good.png

↓参考記事は下の記事です↓

qiita-18.png

５. clip path polygonを応用して2枚の画像を半々で表示するアニメーション3選

clip path polygonを応用して2枚の画像を半々(三角形)で表示するCSSアニメーション

それぞれに違った実務で使えるエフェクトがついています

qiita-clip-path-polygon.png

↓参考記事は下の記事です↓

qiita-19.png

６. hoverするとドロップダウン表示するナビゲーションメニュー３つ

hover(マウスオーバー)するとドロップダウン表示するナビゲーションメニューが３つ紹介されています

それぞれに違ったアニメーションがついていて面白いです

hover-animation-navigation-dropdown3.png

↓参考記事は下の記事です↓

qiita-20.png

７. 絶対失敗しないナビゲーションメニューサンプル３選

ナビゲーションメニューにいろいろなエフェクトがついていて使い勝手がいいです

カスタマイズもしやすいのでありがたいデザインです

matereal-design-navigation3.png

↓参考記事は下の記事です↓

qiita-21.png

８. 絶対失敗しないヘッダーデザインにコピペで使えるナビゲーションメニュー４選

ヘッダーデザインにコピペで使えるナビゲーションメニュー４選が紹介されていて、そのまま使えるマテリアルデザインなのでかなり重宝します

header-design-navigation-animation1.png

↓参考記事は下の記事です↓

qiita-22.png

９. 【まとめ】CSSだけで動きのあるナビゲーションバーデザイン３選

CSSだけで動きのあるナビゲーションバーデザイン３選が紹介されています

かなりシンプルなデザインですがシンプルだからこそ使える場所が多いと思います

navigation-bar-animation2.png

↓参考記事は下の記事です↓

qiita-23.png

１０. filterエフェクトを使いこなすhoverアニメーション３選

filterエフェクトを使いそのまま使えるhoverアニメーションのマテリアルデザインとなっています

qiita-material-image3.png

↓参考記事は下の記事です↓

qiita-material-design3.png

１１. overflow: hiddenを使いこなす美しいCSSアニメーション３選

overflow: hiddenを使いそのまま使えるhoverアニメーションのマテリアルデザインとなっています

美しい画像アニメーションとなっています

qiita-material-image4.png

↓参考記事は下の記事です↓

qiita-material-design4.png

１２. position:absoluteとfilterを使いこなし鏡みたいに反射するアニメーション３選

position:absoluteとfilterを使いそのまま使えるhoverアニメーションのマテリアルデザインとなっています

鏡みたいに反射する見ているだけで面白いアニメーションです

qiita-material-image5.png

↓参考記事は下の記事です↓

qiita-material-design5.png

１３. filter: hue-rotateとtransitionを使いこなし色が暴れ出すアニメーション３選

filter: hue-rotateとtransitionを使いそのまま使えるhoverアニメーションのマテリアルデザインとなっています

色が暴れ出すかなり美しいデザインになっています

qiita-material-image6.png

↓参考記事は下の記事です↓

qiita-material-design6.png

１４. filter:blurとtransitionを使いこなしぼかし画像が動き出すアニメーション３選

filter:blurとtransitionを使いそのまま使えるhoverアニメーションのマテリアルデザインとなっています

qiita-material-image7.png

↓参考記事は下の記事です↓

qiita-material-design7.png

１５. transitionとfilterを使いこなし美しく変化するCSS画像エフェクト５選

transitionとfilterを使いそのまま使えるhoverアニメーションのマテリアルデザインとなっています

美しく変化するのを見るだけでも面白いです

qiita-material-image8.png

↓参考記事は下の記事です↓

qiita-material-design8.png

１６. margin-leftとscaleを使いこなすスライドアニメーション１６選

margin-leftとscaleを使いそのまま使えるhoverアニメーションのマテリアルデザインとなっています

transform:scaleを使っていてわかりやすく説明もされているのでかなり重宝します

qiita-material-image9.png

↓参考記事は下の記事です↓

qiita-material-design9.png

１７. hoverとfilter:brightnessを使いこなし明るさ調節するCSS画像エフェクト３選

hoverとfilter:brightnessを使いそのまま使えるhoverアニメーションのマテリアルデザインとなっています

filterを使いこなすためにはまずひとつひとつ丁寧にい理解していきましょう

qiita-material-image10.png

↓参考記事は下の記事です↓

qiita-material-design10.png

１８. transformを使いこなすボタンアニメーション１６選

transformを使ってボタンを変形し、WebサイトやWebアプリケーションで使えるボタンエフェクトとなっています

transformを全種類使っていてわかりやすく説明もされているのでかなり重宝します

css-effect-hover-button-transform-skew.png

↓参考記事は下の記事です↓

スクリーンショット 2020-07-02 16.02.15.png

１９. transitionを使いこなすボタンアニメーション9選

transitionを使ってボタンにアニメーションを効かせおり、WebサイトやWebアプリケーションで使えるボタンエフェクトとなっています

box-shadowやborder-radiusをエフェクトで使用して見た目のデザインもいい感じです

hover-button-animation-color.png

↓参考記事は下の記事です↓

button-effects1.png

２０. transformを使いこなすマテリアルデザイン5選

transformを使ってボタンにアニメーションを効かせおり、WebサイトやWebアプリケーションでそのまま使えるマテリアルデザインとなっています

マテリアルデザインなのでそのまますぐにでもコピペして使用できます

css-effects-hover-button-materialdesign-3d.png

↓参考記事は下の記事です↓

スクリーンショット 2020-07-03 20.48.02.png

２１. filterが網羅できるCSSボタンアニメーション15選

filterを使ってボタンにエフェクトを効かせおり、特にデザインの見た目をカッコよくしたい場合に非常に使えます

filterエフェクトを全種類使っているので永久保存版としても重宝できそうなまとめ記事になっています

勉強にもフロント開発でも役立つと思います

hover-button-animation-filter.png

↓参考記事は下の記事です↓

button-effects2.png

２２. scaleでオシャレなCSSボタンアニメーション3選

transform:scaleを使ってボタンにエフェクトを効かせおり、オシャレでかっこいいボタンになっています

ボタンの背景が滑らかにスライドしたり、フワッと出てきたりするのでみているだけで面白いです

css-animation-button-diagonal.png

↓参考記事は下の記事です↓

button-effects3.png

２３. ボタンでつくる回転アニメーション9選

transitionを使ってボタンが自然に回転します

ボタンが回転するって純粋に興味ありませんか？

回転扉みたいに動くんです

hover-animation-button-explain3.png

↓参考記事は下の記事です↓

button-effects4.png

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-07-06T17:44:29+09:00

【現役Vueフリーランスエンジニアおすすめ】実務で使えるCSSマテリアルデザイン１０１選（保存版）

スクリーンショット 2020-07-06 17.42.42.png

コピペだけで作れるマテリアルデザインを１０１個ご紹介します。

box-shadow, filter, transform,などをふんだんに使っており、transitionで滑らかな動きが表されています

コードには説明もわかりやすく書いてあるのでかなり参考になります

Webデザイン初心者の方はもちろんですが、バックエンドエンジニアの方にもとても助かる内容になっています

CSSボタンアニメーション１０１選

１. シンプルなスライダーマテリアルデザイン３選

そのまま使えるスライダーアニメーションのマテリアルデザインとなっています

transition-durationを使っていてわかりやすく説明もされているのでかなり重宝します

qiita-material-image1.png

↓参考記事は下の記事です↓

qiita-material-design1.png

２. filterとopacityを使いこなすスライダーマテリアルデザイン３選

filterとopacityを使ったそのまま使えるスライダーアニメーションのマテリアルデザインとなっています

transition-durationを使っていてわかりやすく説明もされているのでかなり重宝します

qiita-material-image2.png

↓参考記事は下の記事です↓

qiita-material-design2.png

３. transformを使用したスライダーアニメーション3選

translateやrotate、box-shadowも適宜使用することで様々な場面（Web制作やWebアプリケーションなど）で利用できるデザインになっています

qiita-slider-3d.png

↓参考記事は下の記事です↓

qiita-17.png

４. transform:scaleを使用したスライダーアニメーション3選

scaleでスライダー画像やナビゲーションボタンの拡大縮小を行いそれに対してアニメーションを使用しており幅広く使えるものになっています

qiita-slider-good.png

↓参考記事は下の記事です↓

qiita-18.png

５. clip path polygonを応用して2枚の画像を半々で表示するアニメーション3選

clip path polygonを応用して2枚の画像を半々(三角形)で表示するCSSアニメーション

それぞれに違った実務で使えるエフェクトがついています

qiita-clip-path-polygon.png

↓参考記事は下の記事です↓

qiita-19.png

６. hoverするとドロップダウン表示するナビゲーションメニュー３つ

hover(マウスオーバー)するとドロップダウン表示するナビゲーションメニューが３つ紹介されています

それぞれに違ったアニメーションがついていて面白いです

hover-animation-navigation-dropdown3.png

↓参考記事は下の記事です↓

qiita-20.png

７. 絶対失敗しないナビゲーションメニューサンプル３選

ナビゲーションメニューにいろいろなエフェクトがついていて使い勝手がいいです

カスタマイズもしやすいのでありがたいデザインです

matereal-design-navigation3.png

↓参考記事は下の記事です↓

qiita-21.png

８. 絶対失敗しないヘッダーデザインにコピペで使えるナビゲーションメニュー４選

ヘッダーデザインにコピペで使えるナビゲーションメニュー４選が紹介されていて、そのまま使えるマテリアルデザインなのでかなり重宝します

header-design-navigation-animation1.png

↓参考記事は下の記事です↓

qiita-22.png

９. 【まとめ】CSSだけで動きのあるナビゲーションバーデザイン３選

CSSだけで動きのあるナビゲーションバーデザイン３選が紹介されています

かなりシンプルなデザインですがシンプルだからこそ使える場所が多いと思います

navigation-bar-animation2.png

↓参考記事は下の記事です↓

qiita-23.png

１０. filterエフェクトを使いこなすhoverアニメーション３選

filterエフェクトを使いそのまま使えるhoverアニメーションのマテリアルデザインとなっています

qiita-material-image3.png

↓参考記事は下の記事です↓

qiita-material-design3.png

１１. overflow: hiddenを使いこなす美しいCSSアニメーション３選

overflow: hiddenを使いそのまま使えるhoverアニメーションのマテリアルデザインとなっています

美しい画像アニメーションとなっています

qiita-material-image4.png

↓参考記事は下の記事です↓

qiita-material-design4.png

１２. position:absoluteとfilterを使いこなし鏡みたいに反射するアニメーション３選

position:absoluteとfilterを使いそのまま使えるhoverアニメーションのマテリアルデザインとなっています

鏡みたいに反射する見ているだけで面白いアニメーションです

qiita-material-image5.png

↓参考記事は下の記事です↓

qiita-material-design5.png

１３. filter: hue-rotateとtransitionを使いこなし色が暴れ出すアニメーション３選

filter: hue-rotateとtransitionを使いそのまま使えるhoverアニメーションのマテリアルデザインとなっています

色が暴れ出すかなり美しいデザインになっています

qiita-material-image6.png

↓参考記事は下の記事です↓

qiita-material-design6.png

１４. filter:blurとtransitionを使いこなしぼかし画像が動き出すアニメーション３選

filter:blurとtransitionを使いそのまま使えるhoverアニメーションのマテリアルデザインとなっています

qiita-material-image7.png

↓参考記事は下の記事です↓

qiita-material-design7.png

１５. transitionとfilterを使いこなし美しく変化するCSS画像エフェクト５選

transitionとfilterを使いそのまま使えるhoverアニメーションのマテリアルデザインとなっています

美しく変化するのを見るだけでも面白いです

qiita-material-image8.png

↓参考記事は下の記事です↓

qiita-material-design8.png

１６. margin-leftとscaleを使いこなすスライドアニメーション１６選

margin-leftとscaleを使いそのまま使えるhoverアニメーションのマテリアルデザインとなっています

transform:scaleを使っていてわかりやすく説明もされているのでかなり重宝します

qiita-material-image9.png

↓参考記事は下の記事です↓

qiita-material-design9.png

１７. hoverとfilter:brightnessを使いこなし明るさ調節するCSS画像エフェクト３選

hoverとfilter:brightnessを使いそのまま使えるhoverアニメーションのマテリアルデザインとなっています

filterを使いこなすためにはまずひとつひとつ丁寧にい理解していきましょう

qiita-material-image10.png

↓参考記事は下の記事です↓

qiita-material-design10.png

１８. transformを使いこなすボタンアニメーション１６選

transformを使ってボタンを変形し、WebサイトやWebアプリケーションで使えるボタンエフェクトとなっています

transformを全種類使っていてわかりやすく説明もされているのでかなり重宝します

css-effect-hover-button-transform-skew.png

↓参考記事は下の記事です↓

スクリーンショット 2020-07-02 16.02.15.png

１９. transitionを使いこなすボタンアニメーション9選

transitionを使ってボタンにアニメーションを効かせおり、WebサイトやWebアプリケーションで使えるボタンエフェクトとなっています

box-shadowやborder-radiusをエフェクトで使用して見た目のデザインもいい感じです

hover-button-animation-color.png

↓参考記事は下の記事です↓

button-effects1.png

２０. transformを使いこなすマテリアルデザイン5選

transformを使ってボタンにアニメーションを効かせおり、WebサイトやWebアプリケーションでそのまま使えるマテリアルデザインとなっています

マテリアルデザインなのでそのまますぐにでもコピペして使用できます

css-effects-hover-button-materialdesign-3d.png

↓参考記事は下の記事です↓

スクリーンショット 2020-07-03 20.48.02.png

２１. filterが網羅できるCSSボタンアニメーション15選

filterを使ってボタンにエフェクトを効かせおり、特にデザインの見た目をカッコよくしたい場合に非常に使えます

filterエフェクトを全種類使っているので永久保存版としても重宝できそうなまとめ記事になっています

勉強にもフロント開発でも役立つと思います

hover-button-animation-filter.png

↓参考記事は下の記事です↓

button-effects2.png

２２. scaleでオシャレなCSSボタンアニメーション3選

transform:scaleを使ってボタンにエフェクトを効かせおり、オシャレでかっこいいボタンになっています

ボタンの背景が滑らかにスライドしたり、フワッと出てきたりするのでみているだけで面白いです

css-animation-button-diagonal.png

↓参考記事は下の記事です↓

button-effects3.png

２３. ボタンでつくる回転アニメーション9選

transitionを使ってボタンが自然に回転します

ボタンが回転するって純粋に興味ありませんか？

回転扉みたいに動くんです

hover-animation-button-explain3.png

↓参考記事は下の記事です↓

button-effects4.png

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-07-06T17:44:29+09:00

【現役Vueエンジニアおすすめ/コピペOK】実務で使えるCSSマテリアルデザイン１０１選（改訂版）

スクリーンショット 2020-07-06 17.42.42.png

コピペだけで作れるマテリアルデザインを１０１個ご紹介します。

box-shadow, filter, transform,などをふんだんに使っており、transitionで滑らかな動きが表されています

コードには説明もわかりやすく書いてあるのでかなり参考になります

Webデザイン初心者の方はもちろんですが、バックエンドエンジニアの方にもとても助かる内容になっています

CSSボタンアニメーション１０１選

１. シンプルなスライダーマテリアルデザイン３選

そのまま使えるスライダーアニメーションのマテリアルデザインとなっています

transition-durationを使っていてわかりやすく説明もされているのでかなり重宝します

qiita-material-image1.png

↓参考記事は下の記事です↓

qiita-material-design1.png

２. filterとopacityを使いこなすスライダーマテリアルデザイン３選

filterとopacityを使ったそのまま使えるスライダーアニメーションのマテリアルデザインとなっています

transition-durationを使っていてわかりやすく説明もされているのでかなり重宝します

qiita-material-image2.png

↓参考記事は下の記事です↓

qiita-material-design2.png

３. transformを使用したスライダーアニメーション3選

translateやrotate、box-shadowも適宜使用することで様々な場面（Web制作やWebアプリケーションなど）で利用できるデザインになっています

qiita-slider-3d.png

↓参考記事は下の記事です↓

qiita-17.png

４. transform:scaleを使用したスライダーアニメーション3選

scaleでスライダー画像やナビゲーションボタンの拡大縮小を行いそれに対してアニメーションを使用しており幅広く使えるものになっています

qiita-slider-good.png

↓参考記事は下の記事です↓

qiita-18.png

５. clip path polygonを応用して2枚の画像を半々で表示するアニメーション3選

clip path polygonを応用して2枚の画像を半々(三角形)で表示するCSSアニメーション

それぞれに違った実務で使えるエフェクトがついています

qiita-clip-path-polygon.png

↓参考記事は下の記事です↓

qiita-19.png

６. hoverするとドロップダウン表示するナビゲーションメニュー３つ

hover(マウスオーバー)するとドロップダウン表示するナビゲーションメニューが３つ紹介されています

それぞれに違ったアニメーションがついていて面白いです

hover-animation-navigation-dropdown3.png

↓参考記事は下の記事です↓

qiita-20.png

７. 絶対失敗しないナビゲーションメニューサンプル３選

ナビゲーションメニューにいろいろなエフェクトがついていて使い勝手がいいです

カスタマイズもしやすいのでありがたいデザインです

matereal-design-navigation3.png

↓参考記事は下の記事です↓

qiita-21.png

８. 絶対失敗しないヘッダーデザインにコピペで使えるナビゲーションメニュー４選

ヘッダーデザインにコピペで使えるナビゲーションメニュー４選が紹介されていて、そのまま使えるマテリアルデザインなのでかなり重宝します

header-design-navigation-animation1.png

↓参考記事は下の記事です↓

qiita-22.png

９. 【まとめ】CSSだけで動きのあるナビゲーションバーデザイン３選

CSSだけで動きのあるナビゲーションバーデザイン３選が紹介されています

かなりシンプルなデザインですがシンプルだからこそ使える場所が多いと思います

navigation-bar-animation2.png

↓参考記事は下の記事です↓

qiita-23.png

１０. filterエフェクトを使いこなすhoverアニメーション３選

filterエフェクトを使いそのまま使えるhoverアニメーションのマテリアルデザインとなっています

qiita-material-image3.png

↓参考記事は下の記事です↓

qiita-material-design3.png

１１. overflow: hiddenを使いこなす美しいCSSアニメーション３選

overflow: hiddenを使いそのまま使えるhoverアニメーションのマテリアルデザインとなっています

美しい画像アニメーションとなっています

qiita-material-image4.png

↓参考記事は下の記事です↓

qiita-material-design4.png

１２. position:absoluteとfilterを使いこなし鏡みたいに反射するアニメーション３選

position:absoluteとfilterを使いそのまま使えるhoverアニメーションのマテリアルデザインとなっています

鏡みたいに反射する見ているだけで面白いアニメーションです

qiita-material-image5.png

↓参考記事は下の記事です↓

qiita-material-design5.png

１３. filter: hue-rotateとtransitionを使いこなし色が暴れ出すアニメーション３選

filter: hue-rotateとtransitionを使いそのまま使えるhoverアニメーションのマテリアルデザインとなっています

色が暴れ出すかなり美しいデザインになっています

qiita-material-image6.png

↓参考記事は下の記事です↓

qiita-material-design6.png

１４. filter:blurとtransitionを使いこなしぼかし画像が動き出すアニメーション３選

filter:blurとtransitionを使いそのまま使えるhoverアニメーションのマテリアルデザインとなっています

qiita-material-image7.png

↓参考記事は下の記事です↓

qiita-material-design7.png

１５. transitionとfilterを使いこなし美しく変化するCSS画像エフェクト５選

transitionとfilterを使いそのまま使えるhoverアニメーションのマテリアルデザインとなっています

美しく変化するのを見るだけでも面白いです

qiita-material-image8.png

↓参考記事は下の記事です↓

qiita-material-design8.png

１６. margin-leftとscaleを使いこなすスライドアニメーション１６選

margin-leftとscaleを使いそのまま使えるhoverアニメーションのマテリアルデザインとなっています

transform:scaleを使っていてわかりやすく説明もされているのでかなり重宝します

qiita-material-image9.png

↓参考記事は下の記事です↓

qiita-material-design9.png

１７. hoverとfilter:brightnessを使いこなし明るさ調節するCSS画像エフェクト３選

hoverとfilter:brightnessを使いそのまま使えるhoverアニメーションのマテリアルデザインとなっています

filterを使いこなすためにはまずひとつひとつ丁寧にい理解していきましょう

qiita-material-image10.png

↓参考記事は下の記事です↓

qiita-material-design10.png

１８. transformを使いこなすボタンアニメーション１６選

transformを使ってボタンを変形し、WebサイトやWebアプリケーションで使えるボタンエフェクトとなっています

transformを全種類使っていてわかりやすく説明もされているのでかなり重宝します

css-effect-hover-button-transform-skew.png

↓参考記事は下の記事です↓

スクリーンショット 2020-07-02 16.02.15.png

１９. transitionを使いこなすボタンアニメーション9選

transitionを使ってボタンにアニメーションを効かせおり、WebサイトやWebアプリケーションで使えるボタンエフェクトとなっています

box-shadowやborder-radiusをエフェクトで使用して見た目のデザインもいい感じです

hover-button-animation-color.png

↓参考記事は下の記事です↓

button-effects1.png

２０. transformを使いこなすマテリアルデザイン5選

transformを使ってボタンにアニメーションを効かせおり、WebサイトやWebアプリケーションでそのまま使えるマテリアルデザインとなっています

マテリアルデザインなのでそのまますぐにでもコピペして使用できます

css-effects-hover-button-materialdesign-3d.png

↓参考記事は下の記事です↓

スクリーンショット 2020-07-03 20.48.02.png

２１. filterが網羅できるCSSボタンアニメーション15選

filterを使ってボタンにエフェクトを効かせおり、特にデザインの見た目をカッコよくしたい場合に非常に使えます

filterエフェクトを全種類使っているので永久保存版としても重宝できそうなまとめ記事になっています

勉強にもフロント開発でも役立つと思います

hover-button-animation-filter.png

↓参考記事は下の記事です↓

button-effects2.png

２２. scaleでオシャレなCSSボタンアニメーション3選

transform:scaleを使ってボタンにエフェクトを効かせおり、オシャレでかっこいいボタンになっています

ボタンの背景が滑らかにスライドしたり、フワッと出てきたりするのでみているだけで面白いです

css-animation-button-diagonal.png

↓参考記事は下の記事です↓

button-effects3.png

２３. ボタンでつくる回転アニメーション9選

transitionを使ってボタンが自然に回転します

ボタンが回転するって純粋に興味ありませんか？

回転扉みたいに動くんです

hover-animation-button-explain3.png

↓参考記事は下の記事です↓

button-effects4.png

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-07-06T17:44:29+09:00

【現役Vueフリーランスエンジニア実装】完全オリジナルのCSSマテリアルデザイン１００選（解説付き）

スクリーンショット 2020-07-07 18.25.55.png

コピペだけで作れるマテリアルデザインを１０１個ご紹介します。

box-shadow, filter, transform,などをふんだんに使っており、transitionで滑らかな動きが表されています

コードには説明もわかりやすく書いてあるのでかなり参考になります

Webデザイン初心者の方はもちろんですが、バックエンドエンジニアの方にもとても助かる内容になっています

CSSボタンアニメーション１０１選

１. シンプルなスライダーマテリアルデザイン３選

そのまま使えるスライダーアニメーションのマテリアルデザインとなっています

transition-durationを使っていてわかりやすく説明もされているのでかなり重宝します

qiita-material-image1.png

↓参考記事は下の記事です↓

qiita-material-design1.png

２. filterとopacityを使いこなすスライダーマテリアルデザイン３選

filterとopacityを使ったそのまま使えるスライダーアニメーションのマテリアルデザインとなっています

transition-durationを使っていてわかりやすく説明もされているのでかなり重宝します

qiita-material-image2.png

↓参考記事は下の記事です↓

qiita-material-design2.png

３. transformを使用したスライダーアニメーション3選

translateやrotate、box-shadowも適宜使用することで様々な場面（Web制作やWebアプリケーションなど）で利用できるデザインになっています

qiita-slider-3d.png

↓参考記事は下の記事です↓

qiita-17.png

４. transform:scaleを使用したスライダーアニメーション3選

scaleでスライダー画像やナビゲーションボタンの拡大縮小を行いそれに対してアニメーションを使用しており幅広く使えるものになっています

qiita-slider-good.png

↓参考記事は下の記事です↓

qiita-18.png

５. clip path polygonを応用して2枚の画像を半々で表示するアニメーション3選

clip path polygonを応用して2枚の画像を半々(三角形)で表示するCSSアニメーション

それぞれに違った実務で使えるエフェクトがついています

qiita-clip-path-polygon.png

↓参考記事は下の記事です↓

qiita-19.png

６. hoverするとドロップダウン表示するナビゲーションメニュー３つ

hover(マウスオーバー)するとドロップダウン表示するナビゲーションメニューが３つ紹介されています

それぞれに違ったアニメーションがついていて面白いです

hover-animation-navigation-dropdown3.png

↓参考記事は下の記事です↓

qiita-20.png

７. 絶対失敗しないナビゲーションメニューサンプル３選

ナビゲーションメニューにいろいろなエフェクトがついていて使い勝手がいいです

カスタマイズもしやすいのでありがたいデザインです

matereal-design-navigation3.png

↓参考記事は下の記事です↓

qiita-21.png

８. 絶対失敗しないヘッダーデザインにコピペで使えるナビゲーションメニュー４選

ヘッダーデザインにコピペで使えるナビゲーションメニュー４選が紹介されていて、そのまま使えるマテリアルデザインなのでかなり重宝します

header-design-navigation-animation1.png

↓参考記事は下の記事です↓

qiita-22.png

９. 【まとめ】CSSだけで動きのあるナビゲーションバーデザイン３選

CSSだけで動きのあるナビゲーションバーデザイン３選が紹介されています

かなりシンプルなデザインですがシンプルだからこそ使える場所が多いと思います

navigation-bar-animation2.png

↓参考記事は下の記事です↓

qiita-23.png

１０. filterエフェクトを使いこなすhoverアニメーション３選

filterエフェクトを使いそのまま使えるhoverアニメーションのマテリアルデザインとなっています

qiita-material-image3.png

↓参考記事は下の記事です↓

qiita-material-design3.png

１１. overflow: hiddenを使いこなす美しいCSSアニメーション３選

overflow: hiddenを使いそのまま使えるhoverアニメーションのマテリアルデザインとなっています

美しい画像アニメーションとなっています

qiita-material-image4.png

↓参考記事は下の記事です↓

qiita-material-design4.png

１２. position:absoluteとfilterを使いこなし鏡みたいに反射するアニメーション３選

position:absoluteとfilterを使いそのまま使えるhoverアニメーションのマテリアルデザインとなっています

鏡みたいに反射する見ているだけで面白いアニメーションです

qiita-material-image5.png

↓参考記事は下の記事です↓

qiita-material-design5.png

１３. filter: hue-rotateとtransitionを使いこなし色が暴れ出すアニメーション３選

filter: hue-rotateとtransitionを使いそのまま使えるhoverアニメーションのマテリアルデザインとなっています

色が暴れ出すかなり美しいデザインになっています

qiita-material-image6.png

↓参考記事は下の記事です↓

qiita-material-design6.png

１４. filter:blurとtransitionを使いこなしぼかし画像が動き出すアニメーション３選

filter:blurとtransitionを使いそのまま使えるhoverアニメーションのマテリアルデザインとなっています

qiita-material-image7.png

↓参考記事は下の記事です↓

qiita-material-design7.png

１５. transitionとfilterを使いこなし美しく変化するCSS画像エフェクト５選

transitionとfilterを使いそのまま使えるhoverアニメーションのマテリアルデザインとなっています

美しく変化するのを見るだけでも面白いです

qiita-material-image8.png

↓参考記事は下の記事です↓

qiita-material-design8.png

１６. margin-leftとscaleを使いこなすスライドアニメーション１６選

margin-leftとscaleを使いそのまま使えるhoverアニメーションのマテリアルデザインとなっています

transform:scaleを使っていてわかりやすく説明もされているのでかなり重宝します

qiita-material-image9.png

↓参考記事は下の記事です↓

qiita-material-design9.png

１７. hoverとfilter:brightnessを使いこなし明るさ調節するCSS画像エフェクト３選

hoverとfilter:brightnessを使いそのまま使えるhoverアニメーションのマテリアルデザインとなっています

filterを使いこなすためにはまずひとつひとつ丁寧にい理解していきましょう

qiita-material-image10.png

↓参考記事は下の記事です↓

qiita-material-design10.png

１８. transformを使いこなすボタンアニメーション１６選

transformを使ってボタンを変形し、WebサイトやWebアプリケーションで使えるボタンエフェクトとなっています

transformを全種類使っていてわかりやすく説明もされているのでかなり重宝します

css-effect-hover-button-transform-skew.png

↓参考記事は下の記事です↓

スクリーンショット 2020-07-02 16.02.15.png

１９. transitionを使いこなすボタンアニメーション9選

transitionを使ってボタンにアニメーションを効かせおり、WebサイトやWebアプリケーションで使えるボタンエフェクトとなっています

box-shadowやborder-radiusをエフェクトで使用して見た目のデザインもいい感じです

hover-button-animation-color.png

↓参考記事は下の記事です↓

button-effects1.png

２０. transformを使いこなすマテリアルデザイン5選

transformを使ってボタンにアニメーションを効かせおり、WebサイトやWebアプリケーションでそのまま使えるマテリアルデザインとなっています

マテリアルデザインなのでそのまますぐにでもコピペして使用できます

css-effects-hover-button-materialdesign-3d.png

↓参考記事は下の記事です↓

スクリーンショット 2020-07-03 20.48.02.png

２１. filterが網羅できるCSSボタンアニメーション15選

filterを使ってボタンにエフェクトを効かせおり、特にデザインの見た目をカッコよくしたい場合に非常に使えます

filterエフェクトを全種類使っているので永久保存版としても重宝できそうなまとめ記事になっています

勉強にもフロント開発でも役立つと思います

hover-button-animation-filter.png

↓参考記事は下の記事です↓

button-effects2.png

２２. scaleでオシャレなCSSボタンアニメーション3選

transform:scaleを使ってボタンにエフェクトを効かせおり、オシャレでかっこいいボタンになっています

ボタンの背景が滑らかにスライドしたり、フワッと出てきたりするのでみているだけで面白いです

css-animation-button-diagonal.png

↓参考記事は下の記事です↓

button-effects3.png

２３. ボタンでつくる回転アニメーション9選

transitionを使ってボタンが自然に回転します

ボタンが回転するって純粋に興味ありませんか？

回転扉みたいに動くんです

hover-animation-button-explain3.png

↓参考記事は下の記事です↓

button-effects4.png

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-07-06T12:37:23+09:00

swiper.min.cssが404のとき

スライダー が突如表示崩れした

→だいたいcdnのせい。
console見るとswiper.min.cssが404になってる。

unpkgはdist用で使うな

swiperの公式に、

a. Use Swiper from CDN
If you don't want to include Swiper files in your project, you may use it from CDN. The following files are available:

<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.css">
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">

<script src="https://unpkg.com/swiper/swiper-bundle.js"></script>
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>

これを鵜呑みにしてはいけない。
そもそもunpkgはお試しみたいなもん。
以下のサイトはそう言ってる（公式だとどこに書いてあるかわからなかった）。

https://kentcdodds.com/blog/unpkg-an-open-source-cdn-for-npm

unpkg is great for open source project demos and instructional material (I use it heavily in my Beginner's Guide to ReactJS), but it’s not well suited for mission-critical applications at scale because:
unpkg is a free, best-effort service and cannot provide any uptime or support guarantees.
That’s why Michael recommends:
if you rely on it to serve files that are crucial to your business, you should probably pay for a host with well-supported infrastructure and uptime guarantees.

https://co.bsnws.net/article/233

本番環境での利用は推薦されていませんが、プロジェクトで使うか検討したい時、
codepen等のオンラインエディタで使用する時には 非常に役立つサービスです。

じゃあどうする

cloudflare使おうぜ
https://cdnjs.com/libraries/Swiper







swiper便利だけど、IE11非対応（というか内部のdom7）なので、うまいこと対処して使おう

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-07-06T06:07:59+09:00

【Rails】アクティブハッシュによる選択肢の表示まで

「送料込み」や「着払い」を選択する度に配送方法の選択肢を変えたい時の
手順についてこちらでご紹介。

1.アクティブハッシュの準備

今回は商品の配送方法についてだったので、以下の選択肢を準備。

class ShippingMethod < ActiveHash::Base
  self.data = [
    {id: 1, name: '未定'}, {id: 2, name: 'ラクダ便'},
    {id: 3, name: 'こうもり便'}, {id: 4, name: 'ゆうメール'},
    {id: 5, name: 'レターパック'}, {id: 6, name: '普通郵便(定形、定形外)'},
    {id: 7, name: 'クロネコヤマト'}, {id: 8, name: 'ゆうパック'},
    {id: 9, name: 'クリックポスト'}, {id: 10, name: 'ゆうパケット'}
  ]
end

2. HTMl側に表示させる

htmlでとりあえず全ての選択肢を表示させます。

.box_form  
  .form-title
    %span.box-form-explanaion
      配送の方法
    %span.indispensable
      必須
  = f.collection_select :shipping_method_id, ShippingMethod.all, :id, :name, {prompt:"選択してください"}, {class: 'exhibit-form-field'}

以上で終了です。
ご覧いただきありがとうございました。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-07-06T05:08:06+09:00

初心者によるプログラミング学習ログ 361日目

100日チャレンジの361日目

twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。
すでに100日超えましたが、継続。
100日チャレンジは、ぱぺまぺの中ではプログラミングに限らず継続学習のために使っています。
361日目は、

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-07-06T00:42:26+09:00

初心者的プログラミング（HTML・CSS）感動ランキング

プログラミング初心者がびっくりしたこと！！！

はじめに

初めまして、くるみと申します。
「プログラミングを勉強するぞ！！」とか言ってTwitterを始めた所謂『形から入る』系人類です。Qiitaで何かアウトプットしてみたいというこれまた『形から入ろう』と思って記事を書いてます。
ブログみたいな内容になっちゃいそうなので問題があったら消します:baby:

今回は自分がプログラミングを勉強し始めて「むずかし〜」とか「すご〜」と思ったことををメモがてらみなさまに共有したいです！
誰向きの記事なのかもはや分からないけど、初心者の方は共感してください:relaxed:
中・上級者の方は鼻で笑いながら自分の初心者時代を懐かしんでください！笑

HTML＆CSSびっくり/むずかしポイントランキング

早速初心者の自分が感動・・・と云いますかびっくりしたことや難しかったことをランキングで紹介します！

第３位：そもそもプログラミング言語と違う

これTwitterとかでもよく見る言葉なんですけど、HTMLはマークアップ言語でCSSはスタイルシート言語。

マークアップ言語とは、文書の構造を指定する言語です。
スタイルシート言語とは、文章のスタイルを指定するための言語です。

要するにこれらは、表面を整えるためのものであって、コンピューターに命令を下すためのプログラミング言語とはまた違うんですね.
正直、自分としてはアルファベットでごちゃごちゃ書いてたら全部プログラミングと思っていたのでびっくりしました笑

第２位：インライン要素とブロック要素

みなさん「インライン要素」と「ブロック要素」について知っていますか？
HTMLで文章を作る時に、この分類によってどの要素の内側にどの要素を配置できるかなどのルールが定められているみたいです。

ブロック要素


見出し・段落・表など、文書を構成する基本となる要素がこのブロック要素です。
ブロック要素のタグで囲まれた部分は、１つのかたまりとして認識されるみたいです。だから、cssで指定等すると、全部に反映されちゃうんですね。


「でも文章の一部分だけにスタイルを反映させたい・・・」
そんな時に使えるのが、↓のインライン要素！


インライン要素


インライン要素は、ブロック要素の内容として用いられ、文章の一部として扱われます。
文章の中の一部だけに色をつけたり、強調するような場合に使われる要素なんですね。

ブロック要素の中には、ブロック要素やインライン要素を入れることはできますが、インライン要素の中にはインライン要素は入れられれも、ブロック要素は入れることができません。

初めてHTMLに触れた時、ブロック要素しか知らなかったもので、
全部にスタイルが反映されちゃうのなんだかイケてないなぁ・・・って思ってたんですけど、ちゃんと仕組みとして考えられているんですね。。。自分が無知なだけでした・・・！笑

第1位：「title」タグ

ブラウザのタブに、そのサイトの名前が表示されるじゃないですか。
それって、この「title」タグが仕事をしてくれてるようなのです！

初めてprogateをした時に、１番感動したのがここです笑

さらにタイトルタグは、ウェブサイトのタイトルを示すものであり、検索した時の結果画面で出てくるもののようです。だから、ブログとかHPのSEO対策とかを考える際にかなり重要になってくるということですね。

素人的には、webサイトのタイトルがどこに書かれているかなんて全く気にしてなかったんですけど、知ってみるとすごく納得でした。
自分が今まで何となく接していたものにきちんとしたルールがあるのに感動しました・・・本当に！！

終わりに

まとめると、プログラミンング・・・の世界に少し触れてみたことで、自分が今まで何となく接していたものにきちんとしたルールがあったことが一番の感動でした。
自分が知らないことを知るのは楽しいですね。
この調子で勉強していきたいです！

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-07-06T00:28:25+09:00

お絵かきできるSNSを作りたい！11

１つ前に戻す(日本語あってる？)を実装したのでついついやりたくなるCtrl+ZをWEBページに実装ます。
方法は簡単でページ全体に対してonkyedownイベントを付与するだけです。

document.onkeydown = function(e) { 
    var keycode,shift,ctrl,alt; 
    keycode = event.keyCode; 
    shift = event.shiftKey; 
    ctrl = event.ctrlKey; 
    alt = event.altKey; 
    event.cancelBubble = true; 
    keychar = String.fromCharCode(keycode).toUpperCase(); 
}

このサンプルでは、documentに対して付与しました。

あとで扱いやすいように以下の変数を宣言しています。
keycode→押された文字列を大文字にして格納
shift→Shiftを押されているかの判定用
ctrl→Ctrlを押されているかの判定用
alt→Altを押されているかの判定用

つまり、Ctrl+Zを押された場合は１つ前に戻す用のdoPrevCanvas関数を呼びたいのでこんな感じです。

document.onkeydown = function(e) { 
    var keycode,shift,ctrl,alt; 
    keycode = event.keyCode; 
    shift = event.shiftKey; 
    ctrl = event.ctrlKey; 
    alt = event.altKey; 
    event.cancelBubble = true; 
    keychar = String.fromCharCode(keycode).toUpperCase(); 
    if (ctrl) { 
        if (keychar == "Z") {
            doPrevCanvas();
        }
    }
}

これでCtrl+Zが出来ました。
どうせなのでもういくつかショートカットを作ろうと思います。

作ったショートカットは以下の通り。
Ctrl+Z→１つ前に戻す
Ctrl+上矢印キー→上レイヤー
Ctrl+下矢印キー→下レイヤー
Ctrl+左右矢印キー→線の太さ変更
Ctrl+スペースキー→線の色の変更
Shift+左右矢印キー→画像の左右反転
Shift+スペースキー→フルスクリーン（全体画面）
Shift+Sキー→画像保存

・[github]修正内容はこちら
線の太さ変更用に一部HTMLを変更しています。

この後は画像をサーバーにアップロード出来るようにするか、WebSocketを使ってお絵かきチャットできるようにするか、画像をドラッグアンドドロップだけで下絵にできるトレース機能を作るか機能改善するかは未定です。
ブランチ切ってそれぞれのバージョン作っても良いかもですね。

最初：お絵かきできるSNSを作りたい！

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

日付別

タグ一覧