見栄えからアニメーションまで基本的にCSS（一部SVGも使用）を使って作成されているユニークなローディングアニメーションを、CodePenで公開されている中から紹介します。 ローディングはそんなに長い時間表示させることは少ないですし、自分の場合はサクっと汎用的なシンプルなデザインのものを実装することがほとんどですが、こういった部分まで拘りたいとかちょっと面白いアニメーション付けたいってときに参考になるものやインスピレーションもらえそうです。 Loading Idea HTMLとCSSで作成した三角形を並べ、それらをタイミングずらしてopacityを使うことで見栄えを実装しています。 このデモはすべて同じカラーですが、カラーをバランス良く異なるものに設定するのも良さそうです。

CSSで表現できる新作ボタンエフェクトをまとめています。一部、jQueryなどプラグインが必要となりますが、CSSのコピー&ペーストで利用できるサンプルやテクニックを、WEB制作のためのコードコミュニティサイト Codepen よりピックアップしてご紹介します。 CSS3のテクニックがより進歩したことで、アニメーションなどより手軽なものとなっています。実際のコードを見ながらサンプルを確認、編集できるので、制作時間の短縮にもつながるだけでなく、世界基準の新テクニックをウェブサイトに採用することもできます。 CSSコピペで実装する、こだわりのボタン用HTMLスニペット40選 コピペでラクラク、押したくなるボタン用HTMLコードスニペット39個まとめ コピペで利用可！思わず押したくなるボタンエフェクト用HTMLスニペット40個まとめ ホバーエフェクトを確認するのには、「Run Pen」をクリック

css書きたくない。できればjsも書きたくない。js必要なの嫌。軽くやりたい。という個人の日記です。 参考 Best CSS Frameworks of 2017 | Three29 10 Free Lightweight CSS Frameworks for a Fast Start 2017年にチェックしておきたい、CSSの軽量フレームワークのまとめ | コリス ググれ。 lightweight css framework - Google 検索 Gridだけやりたいやつは除外した。 Bootstrap Materialize mui （追記）UIkit （追記）Semantic UI Pure Bulma Skelton Spectre.css Kube Vuetify Fictoan avalanche Beuter Vanilla Milligram InvisCSS Look

Deep dive CSS: font metrics, line-height and vertical-align published 6 years, 10 months ago (February 2017) Line-height and vertical-align are simple CSS properties. So simple that most of us are convinced to fully understand how they work and how to use them. But it’s not. They really are complex, maybe the hardest ones, as they have a major role in the creation of one of the less-known feature

object-fit・currentColor・will-change・image-renderingなどマイナーだけど便利過ぎるCSSプロパティの使い方 作成：2016/11/14 更新：2016/11/15 Web制作 > object-fit・currentColor・will-change・image-renderingなど、結構マイナーだけど、実用的なCSSプロパティをピックアップしました。 エンジニア速報は Twitter の@commteで配信しています。 object-fitプロパティはボックスに合わせて、アスペクト比を維持したまま画像サイズを調整できます。 例えば600×300の画像をCSSで400×400で指定したとすると正方形に引き伸ばされます。この時アスペクト比は崩れてしまいます。 しかし、imgにobject-fit: contain;を追加すると、imgに指定し

CSS Nite LP47 Coder's High 2016 http://cssnite.jp/lp/lp47 「イマドキのコーダー環境構築」で発表したスライドです。 ※スライド上のURLリンクは効かないので、下部文字起こしから飛んでください。

Google FontsやAdobe TypekitのWebフォントを利用すると、IEなどのブラウザはWebフォントのダウンロードが完了するまでは代替フォントでテキストを描画します。 その後Webフォントのダウンロードが完了した際にWebフォントを用いたテキストの再描画を行い表示を切り替えます。 このテキストが切り替わる瞬間に文字幅の変化によるコンテンツの移動やちらつきのような現象が発生します。 特にこのちらつき現象はWebフォント以外の原因で発生する描画のちらつきも含めてFlash Of Unstyled Text (FOUT)と呼ばれているようです。 今回はこのテキストの再描画を防ぐ方法を紹介します。CSSだけで設定できますのでとても簡単です。 テキストの再描画についてデモコード設置方法参考サイト １．テキストの再描画について Google DevelopersのWebフォントの解説に

いつもサイト運営者を悩ませる Font-Family の指定。 今回は最先端な Font-Family 指定を考えてみました。 2017年になりましたが特にフォント環境の動きがなかったので、少なくとも当年中はこの記事を更新の更新を続けていきます。 当サイトで指定しているFont Family 当サイトでは現在、こんな感じで指定しています。 font-family: -apple-system, BlinkMacSystemFont, 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', '游ゴシック Medium', meiryo, sans-serif; クリップボードにコピー スポンサーリンク Mac では安定のヒラギノ Mac では普段目にするフォント、ヒラギノ角ゴを指定します。 なんだかんだでずっと Mac のシステムフォントとして使われてます

どうもこんばんは。 初老のデザイナーたあです。 簡潔に書きます。 タイトルを挟む1pxとかの横線を簡単に書くCSSを一生懸命考えてみたので忘備録。 こういうやつですね .title-border { display: flex; align-items: center; } .title-border:before, .title-border:after { border-top: 1px solid; content: ""; flex-grow: 1; } .title-border:before { margin-right: 1rem; } .title-border:after { margin-left: 1rem; } これを線を入れたいとこに入れるだけっす。 こんな感じで <div class="title-border">これ</div> 以上でした。 なお余白の取り方

Webページをレスポンシブ対応にする時、悩ましいコンテンツの一つがテーブルではないでしょうか。単にセルの幅を狭くするだけでは、一行に一文字しかない妙に縦長なテーブルになってしまいます。 省略したり、プルダウンを利用したりなどいろいろなアイデアがありますが、もっとシンプルで簡単に、そして実用的な賢い実装アイデアを紹介します。 Responsive table layout レスポンシブ対応のテーブルのデモ レスポンシブ対応のテーブルの実装 レスポンシブ対応のテーブルのデモ デモでは4x5のテーブルで、さまざまなデバイスのスクリーンサイズでコンテンツが最適になるよう実装されています。

CSSの相対的な単位（em, rem）を使って、Webページで使われるUIコンポーネントのさまざまなサイズを変化させるスタイルシートのテクニックを紹介します。 em, remは文字の大きさだけでなく、画像やアイコンのサイズ、背景、フォーム、ボタン、配置など、さまざまな指定に利用できます。 Building Resizeable Components with Relative CSS Units 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 フォントのサイズを変化 縦と横の比率を維持したボタン 縦と横の比率を維持した画像 box-shadowを使ったボーダーの幅と高さ アイコンの幅と高さ、そして間隔も キャプション付き画像 装飾された背景 アイコン付き検索フォーム チェックボックスで実装されたトグル ブロックの一行の長さ ボタ