TailwindCSSを始めようとしている人へ JSフレームワーク内でスタイルをどのように当てるべきかは,多く議論されるものであるが,そんな中でTailwindCSSが注目と人気を集めている様子である. それはそうと私はなかなか使うまで踏み出せなかったが,v3.0以降にようやく使ってみたので, 使い方をざっくり知りたい人 できることをざっくり知りたい人 TailwindCSSをエアプしたい人 に向けて個人的な所感と要点を書いていく. TailwindCSSをすごく簡単に classNameに特定のclassを指定することでStyleを当てていくCSSフレームワーク. 例えば,ここにあるように, bg-red-600とclassNameをつけることで,CSSのbackground-color: #dc2626;と同様のCSSプロパティを当てたことになる. 普段このように書くところを

セレクトボックスはセレクト要素自体の背景にSVGでアイコンを配置することでwrapすることなくプルダウンアイコンを表示できます。 また、こちらもフォーカスした時にoutlineをbox-shadowで表現しています。 multipleの時はheight:autoにし、プルダウンアイコンを非表示にしています。 .c-select{ &:focus{ border-color:rgba($select-focus-color,.3); outline: none; box-shadow: 0 0 0 3px rgba($select-focus-color,.2); } &:disabled{ background-color: #eee; cursor:not-allowed; } &[multiple]{ height: auto; background-image: none; padd

CSSで美しいシャドウをつけるbox-shadowの書き方を紹介します。 少し大きめのシャドウを適用し、ネガティブに縮小させることで、通常のシャドウより少しだけ彩度が高くなり、要素がくっきり見えます。

開いているウェブページが読み込み中であることを、分かりやすく伝えるローディングアニメーション。これまではGIFなどで作成されることもしばしばでしたが、CSSの進化によって自由でカスタマイズ性の高いローディングアニメーションがたくさん登場しています。 今回はコピペで利用できるCSSローディングアニメーションを、コミュニティサイト Codepen よりピックアップしご紹介します。 よりオリジナル性の高いデザインを作成することができ、待ち時間が楽しみになるようなエフェクトを中心に揃えています。どうしてもファイルサイズが大きくなってしまうページなどに活用してみてはいかがでしょう。 詳細は以下から。 待ち時間が楽しくなる、CSSコピペで実装できるローディングアニメーションまとめ #22 – Loader with Pure CSS 動きに合わせて、背景のグラデーションカラーが美しく変化するローディン

CSS初心者の方が「サイズがバラバラの写真をトリミングして縦横比を揃えて綺麗に表示したい」と思った時に、「CSS　画像トリミング」なんてググると 、まず出てくるのが”object-fit”ではないでしょうか。たった1～2行ほどのコードを書き加えるだけで画像が綺麗にトリミングされます。「おおーっ！」って感じですよね。 しかし残念ながら”object-fit”は、IEでサポートされていません。IEはもう更新されませんから、ユーザーが居なくなるまでは実務では使いづらいところです。IEでも使用できるようにするスクリプトも出回っていますが、「面倒くさくて、そんなもん入れたくない」という人も多いでしょう。そこで、今回は”object-fit”やjavascriptを使用せずに、CSSだけで画像を特定の縦横比にトリミングする方法を書いてみたいと思います。縦横比に合わせるので、レスポンシブレイアウトでも問

目立つボタンでコンバージョン率を上げたい ということであれば、光るボタンを実装するのも1つの手かもしれません（もちろん、必ずコンバージョンが上がるわけではないです）。 ということで以下では、CSSとちょっとしたHTMLで「数秒ごとにキラっと光るボタン」を実装する方法です。 こんな感じのやつ。 通常のHTMLでも利用できますが、以下ではWordPressに実装する方法として紹介します。 主な手順 主な手順としてはこちら。 CSSを貼り付ける ボタン用のHTMLを書く 基本的にコピペのみで実装する方法です。 CSSを貼り付ける まず、WordPressに実装するには、テーマ（子テーマ）のstyle.cssに以下のCSSを貼り付けます。 /* ボタン */ .btn-shine { color: #fff; background-color: #c9171e;/*背景色の変更*/ font-we

CSSは設計手法も大事ですが、どういう単語で名前をつけていくかも大事だと思っています。 個人個人でばらつきが出るところでもありますし、「単語名 英語」で検索をして探した単語を使ったけど若干意味合いが違ったといったこともあると思います。 クラス名を決めるためのリストを見かけることもありますが、英単語の読みは書かれていても意味合いが書かれていることは少ないように思います。 自分の確認用と、チームで製作するさいの基準になるようなものを作りたいと思い、単語とその意味を短くまとめてGitHubにあげています。 CSS クラス名リスト | GitHub 以下投稿時の内容です。 名前をつけることは難しいですが、とても重要なことです。 CSSには設計思想が必要ですが、実践するにあたり、名前と機能の意味がとおり、名前のつけ方にブレがないようにするべきです。 このドキュメントでは、CSSでよく使われる単語を分

スクロールダウンを指示する動きのあるデザインを探してましたが、ちょうど良いものが見つけられなかったので、CSSアニメーションの練習も兼ねて作成してみました。 ゴール（条件） ・コピー＆ペーストで使い回せるように、スクロールダウンアニメーションを複数個作る ・CSS Animationを使ってCSSアニメーションを作成する CSSアニメーションのサンプル See the Pen scroll arrow by yamaki (@yamaki0405) on CodePen. See the Pen scroll arrow2 by yamaki (@yamaki0405) on CodePen. See the Pen scroll arrow3 by yamaki (@yamaki0405) on CodePen. CSSアニメーション早見表 今回CSS Animationを使ってみて苦労

↓↓↓最新の2021年版を作成しましたのでこちらもご覧ください。↓↓↓ hashimotosan.hatenablog.jp PDFはこちらからどうぞ[508KB] 2019年Pixel 3aやGalaxy S10など一通り新機種が発表されたので、2019年改めてブレイクポイントについて考えてみました（3年ぶり！）。 3年経ってほとんどのサイトがレスポンシブデザインになって、ブレイクポイントを少なく効率よく設定していく方向になっているのだと思います 前回、ブレイクポイントの設定はフレイムワークも参考に考えていましたが、 改めて考えてみると、モバイルファーストの観点からも640px/1024pxではないのではないかと感じました。 以下が3年前の前回の記事です。 いくつかブレイクポイントを調べましたが、 だいたい以下のような分け方が多かったです。 640px/1024px 480px/896x

この他に macOS の Chrome では、ShiftキーとMetaキーを併用することで、新しいタブで開きつつそのタブをアクティブにすることができました。 CSS によるスムーズスクロール ページ内リンクをクリックしたときのスクロールを、アニメーションによってスムーズにしたいということはよくあります。これは CSS のscroll-behaviorプロパティを使えば非常に簡単に実装できます。 body { scroll-behavior: smooth; } たったこれだけの宣言で、JavaScript を一切用いることなく、ページ内リンクをクリックしたときのスクロールにアニメーションが伴うようになります。また、ページ内リンクのクリックだけでなく、可視領域外にある要素がフォーカスされたときや、ページ内検索に一致したテキストがハイライトされたときなど、スクロールが伴う場面すべてに適用されま

jQueryライブラリ「drawer.js」のスクロールがおかしくなった レスポンシブでドロワーメニューを作るときは、何も考えずに「Drawer」を突っ込んでいました。 今年（2018年）に入ったあたりから、iPhone実機でメニューを出して下の方にスクロールさせたときの挙動がおかしくなっているのに気が付きました。 上にスワイプすると、Drawerメニューが意図せず閉じてしまうのです。 iOSのアップデートの関係でしょうか。わかりませんが。 これをとりあえず直しました。 Drawerのメニューを出すハンバーガーボタンを押したときに、html,body要素にclassを出し入れするようにします。 ハンバーガーボタンを押してDrawerメニューが出ているときのみ、html,bodyにクラスを付与するわけです。 ここでは.fixedとしました。 $(document).on("click", "

label には :before と :after 擬似要素を使い、グレーの角丸とアイコンを表現しています。 ラジオボタンは角丸で円を、チェックボックスは二辺のみborderを付けた要素を45度回転させています。 モダンブラウザ IE9+ android4.0系標準ブラウザ iOS7 Safari コード <form action=""> <section> <h2>radio</h2> <input type="radio" name="hoge" value="高坂さん" checked id="radio01" /> <label for="radio01" class="radio">高坂さん</label> <input type="radio" name="hoge" value="南さん" id="radio02" /> <label for="radio02" class=

レスポンシブでハンバーガーメニューになる固定サイドバー 近年ではモニターサイズが広くなってきた影響もあり、サイドバーを固定表示させてるサイトが多くみられるようになった気がします。 そこでここでは画面が狭くなるとハンバーガメニューになるレスポンシブに対応した固定サイドバーの作成方法をご紹介します。 投稿日2017年09月21日 更新日2017年09月21日 ロゴもサイドバーに含むレイアウトで、サブメニューがある場合はマウスオーバーすると右に表示するタイプです。 HTML 幅を狭めた時にはロゴ部分とメニューは別にしたかったので、構造的に分けてCSSで調節するようにします。 html <header id="global-head"> <h1 id="brand-logo">Logo</h1> </header> <div id="nav-toggle"> <div> <span></span>

ショップページにTABLEタグを使って商品のスペック表や価格表など掲載することは多いのではないでしょうか。そんなTABLEタグですが行数、列数が多い複雑な表になると見づらくなってしまいます。また、TABLEタグを使ってレイアウトをしていくこともあるでしょう。そんな時に知っておくと便利で使い勝手の良い表にする方法について調べてみました。 複雑な表になってくると、閲覧している際に行ずれしてしまうことがあります。そんな時にあると便利なのが、表の上をマウスオーバーした際にカーソルがどの行、列、セルにあるのかを背景色を変えて見せる方法です。本日はCSSのみで実装する方法とjQueryを使った2つの方法について紹介したいと思います。 CSSでテーブルのマウスオーバー時に行やセルの背景色を変更する方法 マウスカーソルと連動して現在カーソルがある行やセルの背景色が変わるようにしておくのは行数、列数が多い細

日本語で「CSS設計」を検索すると、記事やつぶやきなどでセレクタの命名規則に関する話題が多いです。 CSSを設計する上で、命名規則は重要な要素でしょう。 簡単なセレクタ名だと他のスタイルと重複する可能性もあります。他のスタイルと重複しないようにセレクタの子孫数を増やしてしまうと、今度はスタイルの取り回しが悪くなります。 またデザインをコンポーネントに分ける粒度について紹介されていますが、命名規則の分け方のように紹介されているよう感じます。 論理的に構造をわけて命名していくため、覚えやすく、伝えやすさもあわさって、現在の「CSS設計 = 命名規則」のような構図ができあがったと感じています。 CSS設計は命名規則だけか 命名規則はCSS設計において、重要な要素です。 しかしCSSは命名規則させ気を付ければ良い、というものではありません。 私は、すでにあるサイトの一部のコンテンツの作成やすでに用