私がよく使っているのが、下のボタンです。 ホバーしてね！単色の背景色が、グラデーションに変わるホバーエフェクト。ホバーした時に「おっ！」となるから好きです。 ただ、このホバーエフェクトは、CSS の指定に注意が必要です。 例えば、下記の指定では上手くいきません。 .example { background-color: #039be5; transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .example:hover { background-image: linear-gradient( 45deg, #039be5, #00b7ee, #00d0e8, #00e7d8, #7afac4 ); } この指定をしたのが、下のボタンです。 ダメだよ！transition を指定していますが、背景色が瞬時に切り替わります。ふわっとしたホバーエフェク

もう年末ですね。 去年の今頃は風邪で鼻水だらだらの記憶がありますが、皆さんは如何お過ごしですか？ どうも、しばおです。 さて、いきなりですが、皆さん ハンバーガーボタン ってどうやって作ってます？ ハンバーガーボタン の作り方をググったりすると、空っぽの span タグ 3個で作ってたり、div タグ や チェックボックスで作ってたりするのをよく見かけます。 でもね。僕的には、button 要素がベストだと思っているんです。 そこで今回は、なぜハンバーガーボタンを button 要素で作った方がいいのかや、僕なりの作り方をできる限り詳しく解説をしてみたいと思います。 ちなみにこの記事は、ある程度、HTMLやCSS、JavaScriptを使った基本的なコーディングを理解している人向けになりますので、CSSって何？って方は先に、基本的なコーディングを学習しておいて下さい。 ハンバーガーボタン

position: sticky;とは、ヘッダやナビゲーション、サイドバーなど指定した要素をスクロールした際にぴたっと指定した位置に貼り付ける（スティッキー）便利なプロパティです。 position: sticky;の基礎知識、機能の仕組み、そして実際にどのようなコードで機能し、機能しないのか、便利な使い方などを紹介します。 CSS Position Sticky - How It Really Works! by Elad Shechter 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに position: sticky;はじめの一歩 position: sticky;の仕様 position: sticky;の便利な使い方 ブラウザのサポート 終わりに -参考記事 はじめに CSSのposition: sticky

スクロールに応じてページ要素を固定表示できるposition: stickyが便利で面白い使い方ができそうなので実験してみました。仕様がまだ草案（Working Draft）の段階 で、将来、細かい部分に変更がないとは言い切れませんが、Edgeを含めた最新のブラウザで、ほぼサポート されています。 position: stickyの仕様 ブラウザ・サポート状況（Can I use…） フィーチャー・クエリ（@supports） と一緒に使えば、position: stickyに対応していないブラウザにも考慮した実装が可能なので、注意は必要ですがちょっとしたエンハンスメントとして使うのに良さそうです。 まずは「こんなのが簡単にできちゃいますよ」というデモからご紹介します。 面白い使い方 基本的な使い方だけでも便利なスティッキーですが、応用するとスクロール効果のような面白い使い方ができます。以

CSS Gridって本当に便利だなぁと思う今日この頃ですが、そのなかでも特に注目しているのがrepeat()とminmax()です。この2つのCSS関数を使うとグリッドレイアウトの構築が楽になるだけでなく、CSS Gridだけでメディアクエリなしでもレスポンシブなレイアウトが実現できます。 今回はそのrepeat()で使えるauto-fillとauto-fitという値について。ちょっと違いが分かりづらいのでメモっておきたいと思います。 auto-fillとauto-fitの違い auto-fillとauto-fitの違いは実装例を見るのが一番わかりやすいので、まずはデモをご覧ください。repeat()とauto-fill、auto-fit、minmax()を使ったデモです。 デモはこちら デモページをブラウザで開いてウィンドウ幅を変えてみてください（CSS Gridがサポートされているブラ

レスポンシブなレイアウトにはメディアクエリが欠かせないわけですが、CSS GridやFlexboxを使えばメディアクエリなしでもレスポンシブなレイアウトが可能です。メディアクエリが全くいらなくなるということはないと思いますが、CSS GridとFlexboxを使えば、メディアクエリの記述を減らす方法があります。しかもコンテンツの幅に合わせて中身のレイアウトを調整するようなエレメント・クエリ的な使い方も、ある程度なら実現できます。 応用すれば今後のレスポンシブなレイアウトのCSSの組み方を変えてしまうような方法です。 ※デモはFirefox 58.0.2、Chrome 64.0.3282.140、Safari 11.0.3でテストしています。 CSS Gridを使ったレスポンシブレイアウト CSS Gridで以下の2つのCSS関数を使うと、メディアクエリなしでレスポンシブなレイアウトが実現で

CSS チュートリアル CSS の基本 CSS の第一歩 CSS の第一歩の概要 CSS とは何か CSS 入門 CSS の全体像 CSS の働き 評価課題: 経歴ページのスタイル設定 CSS の構成要素 CSS の構成要素の概要 CSS セレクター Type, class, and ID selectors Attribute selectors Pseudo-classes and pseudo-elements Combinators カスケードと継承 Cascade layers ボックスモデル 背景と境界 書字方向の操作 内容のはみ出し CSS の値と単位 CSS における大きさの指定 画像、メディア、フォームの要素 表のスタイル付け CSS のデバッグ CSS の整理 評価課題: CSS の基本的な理解度 評価課題: 素敵なレターヘッドの便箋の作成 評価課題: かっこいいボック

昨年くらいから流行っているらしいゴーストボタンというもののサンプルをいくつか作ってみました。皆さん色々作られていて、今さら感もありますがぜひご覧ください。 今回、以下のルールに沿って16個サンプルを作りました。 HTMLは全て同じ マウスを乗せる前は同じ状態 擬似要素は使っても1つだけ 擬似要素を2つ使ったり、spanなんかをはさんでやるともっと色々できると思いますが、今回はシンプルにマウスを乗せたときに動きをつけるサンプルを紹介します。 サンプルはこのページで全て載せていますが、まとめて見たいという方はこちらをどうぞ。 ということで、HTMLはこんな感じになります。 <a href="#" class="btn sample1">sample 1</a> 普通のリンクですね。btnは共通部分、sample1はサンプルごとで違ってくる部分になります。 では、共通部分のCSSです。 a.bt

イージング関数は、時間の経過に伴うパラメーターの変化率を指定します。 現実の物体は、即座に動いたり停止したりすることはなく、一定の速度で動くこともほとんどありません。引き出しを開けるとき、私たちは最初に引き出しをすばやく引き出し、それが外に出てくるにつれてゆっくりと動かします。床に向けてなにかを（例えばペンのような）放すと、最初に重力によって下に向かって加速し、床に当たった後上に跳ね返ります。 あなたの必要なイージングを選択して、あなたのプロジェクトの中で使用してみてください。

当ブログの右側のサイドバーと下部のシェアボタンは、スクロールしても固定されて付いてくるようになってます。 これまでは、この手の仕組みはjQueryで実装してましたが、今回はCSS3で新たに追加された「position: sticky」を使って実装してみました。 position: stickyとはpositionプロパティの新しい値です。 「position: sticky」と位置（top, right, bottom, left）を指定して、固定したい要素が指定した位置にくると「fixed」のように振る舞い、それ以外だと「relative」になる、という感じです。 一応、以下に簡単なデモを作ってみました。 See the Pen position: sticky by miso (@misodtm) on CodePen. このブログでは下記のように指定してます。 HTML <div c

ベースHTML ベースのHTMLです。っていっても基本aタグだけです。 html <a href="#" class="btn01">BUTTON</a> 1.くるくるって回るアニメーション くるくるっと２回転するアニメです。 くるっと１回転の場合は「rotate」を360にすればOKです。 css .btn01 { color: #fff; text-decoration: none; background-color: #dda0dd; display: block; width: 150px; height: 150px; line-height: 150px; border-radius: 50%; /* ここで動く速度とか設定 */ transition: all 1s ease; -webkit-transition: all 1s ease; } .btn01:hover {

CSSのGrid Layoutとは、ウェブサイトのレイアウトを構築するための新しい仕様です。今まではウェブサイトのレイアウトを実現するために、floatやFlexboxを使っていた方が多いのではないでしょうか。 Grid Layoutを使えば、HTML要素の構造を汚さず、従来の手法に比べてウェブサイトのレイアウトがつくりやすくなります。たとえばfloatだと親要素にdivを増やす必要があったのが、Grid Layoutを使えばそのようなムダなHTML要素を増やさなくて構わなくなります。 今回はレイアウトをつくりながら、Grid Layoutの基礎知識について紹介します。余裕のある方は、記事を読みながら実際に手を動かしてレイアウトをつくってみましょう。 この記事で学べること Grid Layoutの基本的な使い方 Grid Layoutの利点 サブグリッドの使い方 よくあるレイアウトをつくり

CSS チュートリアル CSS の基本 CSS の第一歩 CSS の第一歩の概要 CSS とは何か CSS 入門 CSS の全体像 CSS の働き 評価課題: 経歴ページのスタイル設定 CSS の構成要素 CSS の構成要素の概要 CSS セレクター Type, class, and ID selectors Attribute selectors Pseudo-classes and pseudo-elements Combinators カスケードと継承 Cascade layers ボックスモデル 背景と境界 書字方向の操作 内容のはみ出し CSS の値と単位 CSS における大きさの指定 画像、メディア、フォームの要素 表のスタイル付け CSS のデバッグ CSS の整理 評価課題: CSS の基本的な理解度 評価課題: 素敵なレターヘッドの便箋の作成 評価課題: かっこいいボック

CSS3 の border-radius を使えば、ボックスの角を丸めることができますよね？ でも、ベベル（丸くない border-radius）を付けるにはどうしたらいいか、ずーと気になっていたので、調べてみたら見つけました！ ということで、今日の記事では「LEA VEROU」で紹介されていた、↓みたいにボックスの角にベベルを付ける方法を紹介します。 考え方 この方法では 4つの background-image を使います。 まず最初に、background-size を使って背景を4等分します。そして、それぞれの角から斜めの線形グラデーションで、透明を塗りこむことで角を見えなくするというのがこのからくりです。 この「等分すれは、複数のグラデーションを指定できる」というテクニックは、他にも応用できそうなので是非覚えておいてください。 スタイルはこんな感じです。実際に使う場合は、以下のク

その他 解像度にあわせて画像変更 解像度にあわせて画像変更 Chrome Firefox Edge IE11（一部非対応） IE9（一部非対応） iPhone（iOS6-8） iPad（iOS7） Android4.2 2017年3月31日更新 通常の画像と高解像度用の画像の表示・切り替え方法を紹介します。 <img>タグのサイズを指定する cssのbackgroundで背景にして、background-sizeを指定する cssのbackgroundで背景にして、css3のMeia Queriesでディスプレイの解像度によって切り替え <img>タグの画像をJavaScriptでディスプレイの解像度によって切り替え 同じ内容の画像で、画像サイズのみを変更（解像度の対応）するときにおすすめ！ <img>タグにHTML5の「srcset」を使用して、ディスプレイの解像度やウインドウサイズによ

フォームのイマココ！とか表示できるシンプルなステップバーをCSSだけで作ってみた。 当然のようにIE8とかは無視してます。ご了承下さい。 SAMPLE See the Pen SIMPLE FORM STEP BAR by Chaika (@chaika-design) on CodePen. SIMPLE FORM STEP BAR HTML <ol class="stepBar step3"> <li class="step current">STEP1</li> <li class="step">STEP2</li> <li class="step">STEP3</li> </ol> Compass (SCSS) .stepBar { position: relative; list-style: none; margin: 0 0 1em; padding: 0; text-ali

最近ではCSS3の対応ブラウザが増えたおかげで、画像を使わずともサイト上で色々な表現ができるようになりました。 CSSでデザインの実装を行う場合、｢カスタマイズやメンテナンスが容易」｢レスポンシブWebデザインとも相性が良い」｢画像を読み込まないのでモバイルユーザーにも優しい」｢Retinaディスプレイなど高解像度の環境で見ても綺麗」等、制作側とユーザーの両方にメリットがあります。 今回は、フラットデザインのWebサイトなどでよく見かける、シンプルな矢印アイコンのCSSをいくつかご紹介したいと思います。 目次： 共通HTML＆CSS シンプルな矢印アイコン シンプルな矢印アイコン シンプルな矢印アイコン（大） シンプルな太い矢印アイコン シンプルな太い矢印アイコン（大） 斜めの矢印アイコン 右上向きの矢印アイコン 右上向きの矢印アイコン（大） 右下向きの矢印アイコン 右下向きの矢印アイコン