はじめに結論から ホバースタイルは、 :hover だけで指定するのではなく、次のように指定しましょう！ @media (hover: hover) { /* リンクの場合 */ a:any-link:hover { } /* ボタンの場合 */ button:enabled:hover { } /* 特定できない場合 */ .button:where(:any-link, :enabled, summary):hover { } } ポイント 1 マウスのときだけホバースタイルを当てる :hover 擬似クラスで指定したスタイルは、タッチデバイスの場合フォーカス状態で適用されてしまいます。 つまり、タッチしたあとのスタイルがずっとホバースタイルのままになってしまいます。 これは意図と合わないため、マウスで操作しているかどうかを区別してスタイルを当てる必要があります。 マウス（正確には、ホ

Web制作を変える！2022年の便利オンラインツール・ベスト110選 これからのウェブデザインに欠かせないツール大集合 この記事では、2022年に公開された便利なWebオンラインツール・ベスト110個+をまとめてご紹介します。 定期的にリストアップしている最新オンラインツールまとめ記事では、2022年にかけて、合計343個の新しいツールやサービスを紹介してきました。 その中でも、Webデザイン制作に便利なツールを厳選したコレクションで、「無料で利用できるツール」を揃えています。 特に今年は、人工知能やAIテクノロジー関連のツールが増えたことで、Webデザイン制作をより快適に進めることができるでしょう。 カテゴリごとに整理しているので、目的にあったお気に入りツールを探してみましょう。 コンテンツ目次 🕹 CSSツール（16個） 🧰 Webデザイン便利ツール（19個） 🦄 デザインツール

CSSだけでドット絵（Pixel Art）を描く・アニメーションさせる方法を紹介する。ただ、バニラCSSだけでも大丈夫なのだが、よりメンテナブルにするためSassで描く方法も併せて紹介する。 ちなみに下図のようなドット絵がつくれる。 マリオとMinecraftの土ブロックは、CSSアニメーションをつかって動かしている。もちろんJavaScriptは使っていない。 box-shadowプロパティについて ドット絵を描くためには、CSSのbox-shadowプロパティを使う。 そもそもbox-shadowプロパティは、要素にドロップシャドウ効果（影をつける）を与えるのが本来の使い方なので、まずは基本的な使い方からまとめる。 いくつかの構文がある。 box-shadow: offset-x offset-y color box-shadow: offset-x offset-y blur-rad

Winでは基本的にフォントレンダリングをCSSで制御することは出来ません。また、スマートフォンのブラウザもほとんど制御できず、基本的にグレースケールで表示されることが多いようでした。 MacではSafariのみがグレースケールですね、これが原因で「Safariで文字が細く見えてしまう」現象が起こっています。 デバイスのdpiによる見え方 このまま各ブラウザでアンチエイリアスを揃える設定しても良いのですが、1x, 2xの解像度による見え方を見ていきましょう。(今回はThunderbolt Display = 109ppi, MBP Retina Display = 220ppiで検証・比較。実際に表示した画面をスマホのカメラで加工が無いようにして撮りました。) 109ppi(Thunderbolt Display) 220ppi(MBP Retina Display) 以下のことがわかります

こんにちは。Supership デザイナーのハガです。今回はcssのお話です。 皆さんはcssで、あるデザインを実現しようとした時、あれってどうやるんだっけ？みたいな経験をしたことはありませんか？自分はよくあります。そんな時コピペするだけでokみたいなcssスニペット集があると嬉しいと思い、主に自分のためのメモ的な意味を多分に含みつつご紹介していきたいと思います。（今回紹介しているcss達は主にスマホのためのモダンなブラウザを対象としているため、ieのようなレガシーな感じはごめんなさい。） 10個のcssテクニックコアとなる部分はboldで表現しています。細字の部分はお好きに調整してください。 1.カルーセル<ul class="carousel"> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li>

HTML・CSSコーディングを取り巻く状況は、数年前と大きく変わっています。最近では、2016年11月にHTML 5.1が勧告されたり、2015年8月頃にChromeのブラウザーシェアがInternet Explorerを抜いたりといったニュースがありました。また、2017年4月にはWindows Vistaのサポートも終了するため、今後対応すべきはWindows 7のIE 11以降となります（※）。当たり前だと思っていたコーディング技術を今一度見直す時期にきているのではないでしょうか。本記事では2016年に見直した、今の時代に即したコーディング技術を紹介します。 ※ 参考記事「Internet Explorerサポートポリシー変更の重要なお知らせ - Microsoft」 1. meta keywords設定は検索順位に関係がない ウェブコンテンツのキーワードを指定するmeta keyw

ページのレイアウト、アニメーションをはじめ、エフェクトやフィルターなど、ここ数年でCSSでできる表現の幅がかなり広がりました。 Web制作に携わる人がチェックしておきたい、これからどんどん取り入れていきたいCSSのライブラリを紹介します。 Driveaway -GitHub デモページ レスポンシブ対応のMasonryレイアウトをスクリプト無し、CSSで簡単に実装できます。CSSアニメーションを使ったインタラクションも豊富に用意されており、パネルが回転する「Flip」、パネルにフォーカスがあたる「Focus」、鼓動のように動く「Pulse」など、楽しませてくれます。

CSSのfont-familyで游ゴシックを指定すると、Windowsで細くなってしまう問題の原因と解決方法を中心として、最近の日本語フォント事情をまとめました。 CSS Nite LP47 Coder's High 2016にてお話した内容です。 昔からマークアップエンジニアを悩ませて…

海外サイト Envato Blog で公開された「25 Free Web-Based Apps & Tools For Working With CSS」の著者 Paul Andrew より許可をもらい、翻訳転載しています。 CSS スタイルシートを作成していると、時間ばかりかかる退屈な作業をこなさなければいけない時があります。 たとえば、CSSアニメーションや FlexBox レイアウトを作成、調整したり、モダンブラウザ対応の書き方を思い出したり、レスポンシブ用にemをpxへの変換や CSS ファイルの圧縮やクリーンアップ、画像をデータURIへ変換など、どれもクリエイティブとは程遠いものばかり。 今回は、作業時間を大幅に短縮し、より快適なスタイルシートの作成ができる便利なツール25個をまとめてご紹介します。 紹介するツールを活用することで、これまで時間がかかっていた頭の痛くなる作業も、ボ

多少複雑なデザインでも、画像や JavaScript には頼らず、CSS で実現させる。そこにはもはや手軽さなどは存在しない。あるのは男のロマン。 https://speakerdeck.com/ixkaito/bian-tai-de-css-torituku ということで、「変態的CSSトリック」が流行っているようなので、JavaScriptや画像を使わない変態的なCSSテクニックを探してみました。何を持って変態的とするかは個人の性癖によるところが大きいので、あくまでも主観ですが。 CSS counterで数字を計算 実はCSS 2からあるcounter系のプロパティ。順番に番号を振れる便利なプロパティですが、意外とマイナーな存在では？　次のデモは、リンクの数だけページネーション番号を自動的に付与するもの。うん、便利ですね。 え、でもこれだとノーマルっぽい？　じゃあこちらでどうでしょう。

多少複雑なデザインでも、画像や JavaScript には頼らず、CSS で実現させる。そこにはもはや手軽さなどは存在しない。あるのは男のロマン。

2019年2月22日 CSS, JavaScript, jQuery 人間の目は動きを感知すると反射的に目が動き、意識をそちらに向けるそうです。そのため、アニメーションは要素をほんの少し動かすだけで注目を集められるという強い力を持っています。今回はそんなアニメーションを手軽に実装できるCSSやJavaScriptのライブラリーをいくつか紹介します。 ↑私が10年以上利用している会計ソフト！ アニメーションを使う時に気をつけたい事 アニメーションを使えば、前後の画面に繋がりを持たせたり、ユーザーに次の動きを予測させ、安心感を与えることができます。よく使われるものが、ふんわりと画面や要素を移り変えるフェードという効果です。目の前の物が一瞬で消え、パッと新しい物が現れる…なんて、現実世界ではありえませんよね。もちろん、単純に見ていて楽しい、かっこいい、なんていう刺激を与えられます。 しかし、ユー

『フォトショップ・ブイアイピー』の新着記事です。フォトショップやデザインをたのしむウェブサイト。2009年３月創刊以来、3800を超えるコンテンツを更新しています。フリーフォントなどの無料デザイン素材／配色やWeb制作といった最新トレンドも公開中。

iOS9がリリースされ、iPhone6sも発売され、iOS9 Safari9で使える新機能をWebプログラマ目線で使ってみたいものをいくつか試してみました。iOSはアップデートの進捗がわりと良いので、新機能でもモバイルサイトであれば積極的に使える…はず。デスクトップ版の方は…お察しください。 ぶっちゃけ今回はそこまで目玉機能はなく、地味です。地味ですが、SafariでWebアプリを作れるようになりそうな気配がどことなくするようなしないような感じの内容です。残念ながらServiceWorkerには対応していないので、それに対応してくれたらもっとアレなんですが。 iOS Safari9の新機能（OSX版含む） CSS系 backdropフィルタ対応 新し目のiOSやOSXとかのメニューバーが半透過されるあれが作れます。要は背景要素に対してフィルタがかけられるプロパティです。綺麗で良いですね。

2012年7月12日のGoogle ウェブマスター向け公式ブログの記事「HTML と CSS のコーディングガイドライン」で紹介されていた「Google HTML/CSS Style Guide」に書いてあるコーディング方法と感想を紹介します。 Google HTML/CSS Style Guideの日本語翻訳 Google HTML/CSS Style Guideは英語なのでGoogle Chromeで翻訳して確認していたんですが、すでに翻訳してあるサイトがあったのでこちらも参考に両方を見て確認していきました。 Google HTML/CSS Style Guideを翻訳してある記事「Google HTML/CSS Style Guide」を適当に和訳してみたは、かなり助かり参考になりました。 それではGoogle HTML/CSS Style Guideに書いてあるHTMLとCSSのコ

価値あるCSSの設計と運用のために 第1回 まず、どうやっています？ 10人のエンジニアがいたら、10通りの進め方があるとも言えるCSSの設計。どのような設計や運用がベターか知りたい人もいるのではないでしょうか。その一端を、座談会形式で話してもらいました。 はじめに このシリーズでは、CSSを設計／運用していくというテーマで、どんなことに注意しているかを話してもらいます。 第1回目となる今回は、設計に入るときに確認したいことです。対応ブラウザやコーディングルールなどの技術面のほかに、デザインカンプや仕様書に「まだ」出ていない情報をどこまで汲み取るのかという「気遣い」「空気を読む」などの話題も出ています。 参加者は、ピクセルグリッドのエンジニア5名です。 高津戸 壮（@Takazudo） 小山田 晃浩（@yomotsu） 山田 敬美（@tacamy） 坂巻 翔大郎（@GeckoTang） 中

前回の「破綻しにくいCSS設計の法則 15」は思いがけず大変なご好評をいただきました。ただ書いた当人としては、まとまりに欠けていたように思えましたので、今回はもう少し本質的なところを書いてみたいと思います。 CSSとは実際のところ何か CSSが破綻する理由 破綻しないCSS設計とは 1. CSSとは実際のところ何か CSSはJSONと同様にシンプルなフォーマットで、基本的には以下のような構造になっています。

ブラウザスタイルは平坦化しておく リセットCSSはオプトアウト可能にしておく 登場頻度の高い組合せはplaceholderとして登録してから利用する 可能な限り画像はスプライト生成してから利用する それ以上分解不可能なコンポーネントは要素のように扱う コンポーネントは自己完結型のものを使う BEMはDRYになるよう粒度を下げる 可能な限り@extendは利用しない レスポンシブでない場所では、Utilitiesクラスを活用する shame.cssはいつも綺麗にしておく 詳細度または特異性の高いものほど後方に記述する 可能な限り!importantしない 可能な限りハックしない 変数をデザインガイドとして活用する CSSファイルを分割するメリットはほとんどないので一つにまとめる 1. ブラウザスタイルは平坦化しておく 例えば、こういうScrap & Buildは単に通信量のムダ。 * { f