この記事では、比較的新しいCSSプロパティやCSSの機能を画像で分かりやすく解説しています。 2021年にTwitterで「1枚の画像で新しいCSSがわかる」という連載をしていて、2023年に新しいブラウザーにあわせて再度連載していたのですが、その投稿内容をまとめて解説文などをブラッシュアップしたものです。 IE11のサポートが終了したことで、ほとんどのCSSプロパティやCSSの機能が利用可能になったので、ぜひ試してみてください。 画像・CODEPEN作成協力: emiさん backdrop-filter:blur() を使ったぼかし表現 backdrop-filter:blur()の中の数値を大きくするほど、強いぼかしをかけることができます。 以下のCODEPEN内の［CSS］をクリックすると、CSSを確認できます。 背景に写真を指定した .box 要素内に .blur を配置し、bac

この記事について この記事は、スマートフォン時代のWebデザインスクール や Web制作の基礎から学べる「Webコーディングスクール」 の資料制作をお手伝いして頂いているemiさんによる寄稿記事です。 emiと申します。USAGI DESIGN emi.というサイトでWebデザインやコーディング練習用のデザインデータを配布しています。普段はWebデザインやコーディング、メンターなどをしております。 Flexboxとは Flexbox（Flexible Box Layout Module）はフレキシブルボックスレイアウトモジュールという名前の通り、ボックスのレイアウトを簡単に実現できるものです。 Flexboxを使用すると、今までFloatで処理してきた横並びレイアウトはもちろん、親要素と子要素のプロパティを組み合わせてボックスとボックスの余白を調整することもできます。 gapがモダンブラウ

この記事について この記事は、スマートフォン時代のWebデザインスクール や Web制作の基礎から学べる「Webコーディングスクール」 の資料制作をお手伝いして頂いているemiさんによる寄稿記事です。 emiと申します。USAGI DESIGN emi.というサイトでWebデザインやコーディング練習用のデザインデータを配布しています。普段はWebデザインやコーディング、メンターなどをしております。 三角形や矢印をWebブラウザーで表示するためには、PNGなどのラスター画像、SVG、CSSを使う方法があります。 場面に応じた実装方法を選ぶことで、該当箇所に変更があった場合に対応しやすくなります。 この記事では、実装方法によってどのような違いが出るのか、3つのパターンで解説します。 コンテンツの区切りで斜めになっている背景手順や流れでよくある矢印before/afterでの矢印 セクショニング

この記事について この記事は、スマートフォン時代のWebデザインスクール や Web制作の基礎から学べる「Webコーディングスクール」 の資料制作をお手伝いして頂いているemiさんによる寄稿記事です。 emiと申します。USAGI DESIGN emi.というサイトでWebデザインやコーディング練習用のデザインデータを配布しています。普段はWebデザインやコーディング、メンターなどをしております。 完成したデザインをWebサイトとしてWebブラウザーに表示するためには、コーディングが必要になります。 コーディングを勉強中だったり、コーディング経験がまだあまり多くない方によくある悩みとして以下のようなものがあります。 どこから作業を進めていけばいいのか分からない同じようなスタイルを持ったclassが増えていってしまうスマホサイトのデザインが用意されていない時にどうすればいいのか分からない こ

この記事について この記事は、スマートフォン時代のWebデザインスクール や Web制作の基礎から学べる「Webコーディングスクール」 の資料制作をお手伝いして頂いているemiさんによる寄稿記事です。 emiと申します。USAGI DESIGN emi.というサイトでWebデザインやコーディング練習用のデザインデータを配布しています。普段はWebデザインやコーディング、メンターなどをしております。 メインビジュアルがマンネリ化していませんか 「メインビジュアルの見せ方がワンパターン化してきた」「CSSでちょっと凝った感じに見えるメインビジュアルを作ることができれば」など、シンプルなのにいつもより少し見栄えのするCSSで実現できるメインビジュアルを紹介します。 CSSのテキストマスクを使ってみる CSSのbackground-clipを使用すると、背景画像をテキストの形で切り抜いたように表示

先日、Google検索結果でこのブログが表示されたときに「モバイルフレンドリーではありません」という表示が出ていることに気づきました。 気になって以下のページにURLを入力して調べたところ、WordPressのプラグインから出力されているCSSがGoogleにインデックスされないようブロックされており、それによってレイアウトが崩れてしまったようです。 モバイル フレンドリー テスト – Google Search Console この記事では、そのような場合の対処法について書いています。 対処法 最初に結論を書くと、昔から使用しているWordPressの場合、WordPressインストールしたフォルダー（ディレクトリ）にある robots.txt というファイル内に以下のように書かれている場合があります。 （最近新しくインストールしたWordPressではこの行はないはずです） Disal

「Web系の最新情報を知りたいけど、日々業務が忙しくて追いかけられない」という方のために、1ヶ月のWeb系ニュースの中で「これだけは押さえておきたい」というものを1つの記事にまとめています。 Webデザイン・アクセシビリティ Figmaチームが本国から来日！　Figma Tokyo Meetup レポート – Yahoo! JAPAN Tech Blog 私も参加していましたが、日本でのFigmaの盛り上がりを改めて感じました。 どんなふうに見えてるの？　色覚に配慮したUI設計事例 #UI – Yahoo! JAPAN Tech Blog Yahoo!ファイナンスの例などを挙げ、色覚に配慮したUI設計について書かれています。 コーディング CSSフレームワークBulmaについて – 一休.com Developers Blog CSSフレームワークの比較など。以前はBootstrapユーザ

Webニュース 2018年9月の、これだけは押さえておきたいWeb関連の動き Monday, October 1st, 2018 「Web系の最新情報を知りたいけど、日々業務が忙しくて追いかけられない」という方のために、1ヶ月のWeb系ニュースの中で「これだけは押さえておきたい」というものを1つの記事にまとめています。 デザイン 追従ヘッダー実装時に使える動作・デザインパターン例 | NxWorld 追従ヘッダーも一般的になってきましたが、こうやって見るといろいろなパターンがありますね。 Adobe macOS Mojave（10.14）対応状況 | Adobe Community 現在、Creative Cloudの最新版とMojave 10.14の互換性があることを確認しております。 と書いてありますが、実際はPhotoshop CCの動作に問題が生じているようです。 また、外観をダー

私はメインマシンとして Mac を使用していますが、一時期全くメンテナンスをせずに使っていたら、10ヶ月ほどで買った時より明らかに動作が遅くなってしまいました。 そこで、最近は毎月1回メンテナンス作業を行うことにしています。 具体的には以下のような感じです。 関連記事: Windows 10を快適に使用し続けるために月1回やった方が良いメンテナンス ディスクユーティリティ メニューバー右端の検索アイコンをクリックするか、command + space または control + space キーを押して Spotlight を起動します。 disk と入力します。すると、候補にディスクユーティリティが出てくるはずなので、Enter キーを押して起動します。 ディスクユーティリティでディスクを検証 ディスクユーティリティの［First Aid］ボタンをクリックし、［実行］をクリックするとMa

Webニュース 2018年5月の、これだけは押さえておきたいWeb関連の動き Thursday, May 31st, 2018 「Web系の最新情報を知りたいけど、日々業務が忙しくて追いかけられない」という方のために、1ヶ月のWeb系ニュースの中で「これだけは押さえておきたい」というものを1つの記事にまとめています。 デザイン Google IO 2018のMaterial Designアップデートまとめ｜池内健一｜note Material Theming により、多彩なスタイルが可能になったことが2018年のマテリアルデザインの大きな変更点のようです。 Sketch 向けテーマエディターも用意されています。 関連: Theme Editor Home – Material Design 新しいマテリアルデザインとの向き合い方｜Ayaka Ikeda｜note Goodpatchで開催さ

「Web系の最新情報を知りたいけど、日々業務が忙しくて追いかけられない」という方のために、1ヶ月のWeb系ニュースの中で「これだけは押さえておきたい」というものを1つの記事にまとめています。 Webデザイン デザイナーの秘密道具@spicagraph デザイン、キャッチコピー、アピールポイントなどの話です。イラスト入りで分かりやすいですね。 Adobe XDで快適！と感じたこと6つ – aicocco’s PhotoLog – g.o.a.t ワイヤーとカンプ、プロトタイプを1つのファイルで できるようになったというのは良いですね。 iOS 11 iPhone GUI | Facebook Design FacebookによるiPhone iOS11 UI素材。PSD、Sketch等。 コーディング CSSで変数（カスタムプロパティ）を使ってみよう | Webクリエイターボックス IE11

「Web系の最新情報を知りたいけど、日々業務が忙しくて追いかけられない」という方のために、1ヶ月のWeb系ニュースの中で「これだけは押さえておきたい」というものを1つの記事にまとめています。 Webデザイン チームの課題から考える、Adobe XDとSketchの導入メリット – PSYENCE:MEDIA リクルート社ではPhotoshopで作られていたデザインがSketchやXDに置き換えられはじめているとのこと。 Sketchが適しているのは大規模なサービスを運用し、複数のデザイナーがいる場合、XDが適しているのは「作る→検証する→再考する」を行うことが多い場合だそうです。 Adobe XD「私は潤滑油のような存在です」　ぼく「採用！」 – Qiita タイトルはふざけているように見えるかもしれませんが、内容は「Adobe XDがデザイナーとフロントエンドエンジニアとの円滑なコミュニ

「Web系の最新情報を知りたいけど、日々業務が忙しくて追いかけられない」という方のために、1ヶ月のWeb系ニュースの中で「これだけは押さえておきたい」というものを1つの記事にまとめています。 Webデザイン Adobe XD 11月アップデートリリース！デザインスペック追加で開発者への受け渡しをもっと簡単に #AdobeXD | Adobe Creative Station デザインスペックはAdobe MAXでも話題になっていましたね。かなり期待されている機能だと思います。 もっと楽するweb制作！Illustrator & Photoshop 動画解説 – のんびりデザインしているような。 Adobe MAXでの北村さんのセッションの動画や補足がまとめられています。 知財教材「デザイナーが身につけておくべき知財の基本」 | 経済産業省 特許庁 デザインと知的財産権などについてまとめられ

「Web系の最新情報を知りたいけど、日々業務が忙しくて追いかけられない」という方のために、1ヶ月のWeb系ニュースの中で「これだけは押さえておきたい」というものを1つの記事にまとめています。 Webデザイン 空レイヤー名にルールを書くだけで Photoshop の自動アセットが劇的に楽になった – LOGzeudon レイヤーごとに指定しなくても、空のレイヤーに初期設定を書くことができたのですね。 Adobe、Creative Cloudの次期メジャーアップデートでMacのシステム要件を引き上げ「OS X 10.11 El Capitan」以上をサポートすると発表。 | AAPL Ch. Yosemite以下はそろそろAppleのサポートが切れるからだと思われますが、Windowsは2009年の7からサポートされているのが少し不公平な気もします。 Webブラウザー 新ブラウザ「Firefo

私はWeb制作が初めての方向け講座だけでなく現役の制作者の方向けに様々なWeb講座をしていますが、現役のWeb制作者の方でもHTMLに関して意外と知られていないんだなと思うことがいくつかあります。 特に、HTML5以前の古いHTMLの使い方のまま覚えている方が多いように思われますので、この記事ではそれを中心に取り上げてみました。 なお、この記事はHTML 5.1およびWHATWG HTML Standardの仕様書を参考に書いています。 width=”100%” のように数値以外の文字列を “” に入れるのはNG たとえばimg要素などで、ブラウザの幅いっぱいに画像を表示したいという場合、昔はimg要素に width=”100%” のような属性をつけることがありましたが、HTML5からはwidthなどの属性値に数値以外を含めることができなくなっています。（つまり%などの単位を含めることがで