疑似クラスを使いなせるようになると、CSSはより楽しくなります。 リストなど複数の兄弟要素を配置した時に、最後の要素にだけスタイルを適用しないようにするには、:not()と:last-of-typeを組み合わせると便利です。 下記のように最後だけラインをつけないとか、marginやpaddingを変えるという時によく使用されるCSSのテクニックです。

Webデザインを学び始めた人が、まず戸惑い、壁にぶつかるのが、一度完成したデザインを文字列に組み替えてレイアウトを整えるといったHTML×CSSの工程ではないでしょうか。初学者がHTML×CSSでデザインを再現するオススメの学習フローは、①レッスンブックで手を動かして、一般的なサイトのつくりを体系的に学び、制作パターンを知る。②その後、自分のサイトに制作パターンを当てはめてコーディングをする。③HTMLやCSSをゼロから組み立てるための設計の仕方を学び、用語を逆引きしながら理解を深める。といった流れがオススメです。 また、実務経験者であっても、日々進化する新しいコーディング方法を学び、知識と技術のアップデートをすることで、シンプルで効率の良いコードを書くことができます。 本記事では、普段からクリエイターの卵たちを指導しているスクール講師に、オススメ書籍を紹介していただきます。実際に書籍の中

近年のJavaScriptにまつわる知識、フロントエンド界隈の変化には著しいものがあります。JavaScriptを学び、エンジニアとして仕事をされる方のキャリアパスとして「フロントエンドエンジニア」というものがあるのですが、この「フロントエンドエンジニア」がカバーする仕事の範疇も非常に大きなものとなっています。 WEB DEVELOPER ROADMAP 2022 「フロントエンド デベロッパーのためのロードマップ」 https://roadmap.sh/frontend こちらは、開発者向けプラットフォーム「GitHub」で公開されているフロントエンドエンジニアとしての学習ロードマップをまとめたものです。要するに、フロントエンドエンジニアとして必要な知識やスキルセットにはどんなものがあるのかを順立てて紹介している図なのですが、これを見ても、フロントエンドエンジニアとして求められる可能性の

写真加工やイラスト作成、Webのデザインパーツを作ったり、立体加工や合成でアート作品を作ったり……。いろいろなことができるAdobe Photoshopは、搭載されている機能の数も多く、そのすべてを理解するのは容易ではありません。 しかし、趣味で写真加工を楽しみたい人と、アート作品を作りたい人、プロのレタッチャーを目指す人では自ずと習得すべきポイントも変わってきます。せっかくPhotoshopを学ぶなら「自分のやりたいこと」に最短距離で到達して欲しい。 本記事では、普段からクリエイターの卵たちを指導しているデジタルスクール講師に、タイプ別のオススメ書籍を紹介していただきます。実際に書籍の中身を覗きながら選べるので、本気で学びたい！と思っている方は必見ですよ！

商用でも無料、かわいくておしゃれなイラスト素材をまとめました。Webやアプリ、プレゼン、提案書、ポスター、同人誌など、さまざまなメディアで無料で利用できます。 ほぼすべてがクレジット表記は必要無しなので、使いやすいと思います。 イラストセンター 個人・商用プロジェクトで無料で利用できます。 現在10,000点以上、分かりやすくて使いやすいイラストが揃っています。カテゴリも豊富で、だいたいのものが揃っています。野菜や果物など、同じテイストでたくさんあるのもいいですね。料理もたくさんの種類があります。一度に利用できるイラストの数は20点までとなっており、詳しくは利用規約をご覧ください。

最近のデバイスやブラウザに対応させる最小限のファビコンセットには、6種類のファイルで対応できます。ブラウザはもちろん、スマホやタブレットにも対応し、さらにSVGも含めて6種類だけです。 ファビコンに必要な6種類のファイル、ファビコンの設定方法、ファビコン画像を作成する方法について紹介します。 How to Favicon in 2024: Six files that fit most needs by Andrey Sitnik Sitnik氏は、PostCSS, Autoprefixer, NanoIDの制作者です。 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 2024/2/28: 元記事がアップデートされたので、当記事もアップデートしました。 はじめに ファビコンの設定方法 -ショートバージョン ファビコンの設定方法

[レベル: 中級] この記事では、Google によるタイトルリンクの書き換えを防ぐのに役立つ 10 個の施策を紹介します。 先日、Cyrus Shepard（サイラス・シェパード）氏が調査した title タグ書き換えの分析と対策について Web担当者Forum の連載コラムで取り上げました。 その続編になります。 1. title タグの長さを適切に title タグを適切な長さに調整します。 具体的には、（半角で）51 〜 60 文字程度が好ましいとのことです。 検索結果の幅（現在は約 650 ピクセル）にちょうど収まる長さです。 長すぎるのはもちろん、短すぎても書き換えが発生しやすくなります。 極端に長いもしくは短い title タグは実に 95% が書き換えられていました。 2. h1 タグと一致させる title タグと h1 タグの記述を一致させます。 アップデート後のタイト

視覚的に情報を伝えられる「アイコン」は、ボタンやナビゲーションなどのUIによく使用されています。なかでもアイコンとテキストを横並びにするレイアウトは実務で組む場面が多くあります。 横並びのレイアウトはさまざまな実装方法が存在し、それぞれに注意すべき点があります。たとえば、Flexboxで横並びのレイアウトを作ると以下のようなレイアウト崩れが発生する場合があります。経験したことのあるHTMLコーダーの方もいるのではないでしょうか？ さらに、アニメーションやアクセシビリティも考慮すると実装方法に向き不向きがあります。この記事では横並びのレイアウトを例に、4つの実装方法とその注意点を紹介します。 ※この記事のサンプルコードでは、CSSクラスの親子関係をわかりやすく、読みやすくするためにSass（SCSS）を使用しています。 レイアウトの実装方法 まずはレイアウトの実装方法から紹介します。以下の条

当サイトでは、定期的に新しく公開された最新Webサイトデザインをまとめています。今回は、2021年のベスト・オブ・Webデザイン50個を厳選、ピックアップしご紹介します。 配色えらびやレイアウトの参考にぴったりで、2022年予想の人気デザイントレンドも意識した素敵なWebサイトを中心にまとめています。 【総まとめ】2021年話題になった世界のベストWebデザイン厳選50個 Rockwool トップ画面に表示されたビルをクリック、スクロールで進んでいくと、壁や床、排水管にいたるまで細部まで細かくアニメーション付きで説明する、新しすぎる制作実績の見せ方。ぜひ一度サイトを開いて体験してみましょう。 Skolkovo Business District マウスの動きに合わせて、照明を当てることで、ビルでできる影を操ったり、マウスを左右に動かし、3Dモデリングを360度回転できます。スクロールに合わ

この記事では、2021年に公開された便利なWebオンラインツール・ベスト100個+をまとめてご紹介します。 定期的にリストアップしている最新オンラインツールまとめ記事では、2021年にかけて合計338個の新しいツールやサービスを紹介してきました。 その中でも、特にWebデザイン制作に便利なツールを選りすぐったコレクションで、「無料で利用できるツール」を揃えています。 これらのツールやサービスを活用すれば、Webデザイン制作をより快適に進めることができるでしょう。 カテゴリごとに整理しているので、目的にあったお気に入りツールを探してみましょう。 コンテンツ目次 1. CSSツール（11個） 2. パターンツール（3個） 3. イラスト系ツール（9個） 4. デザインツール（17個） 5. 配色ツール（7個） 6. グラデーションツール（12個） 7. SVGツール（9個） 8. スクリーンシ

Typescale Save CSS Go Pro Login Typescale New Board My Boards Bookmarks Likes Explore Login Go Pro Support Terms Privacy © Typescale Board Settings Responsive Body size Scale Responsive Min-width Body size Scale Body Font Weight Line-height Letter-spacing Color Background Headings Font Weight Line-height Letter-spacing Color

デザインはちょっとした一手間を加えるだけで、ぐっとよくなります。 プロのUIデザイナーによるWebページやスマホアプリのUIとUXを改善するデザインの知識とテクニックを紹介します。 第7弾は、テキストや要素をより分かりやすく魅せるデザインのテクニックです。 UI & UX Micro-Tips: Volume Seven. by Marc Andrew 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 1. メッセージは分かりやすく簡潔に 2. 長文コンテンツには、20ptを試してみてください 3. エラーメッセージは色だけで情報を伝えないように 4. 4ptベースラインと8ptグリッドで調和のとれた縦のリズムを作成 5. 見出しは文字間隔と行の高さを小さくする 6. 要素をよりはっきりと魅せる はじめに 次のプロジェク

デザインはちょっとした一手間を加えるだけで、ぐっとよくなります。 プロのUIデザイナーによるWebページやスマホアプリのUIとUXを改善するデザインの知識とテクニックを紹介します。 第6弾は、アクセシブルで美しいユーザーインターフェイスを構築するデザインのテクニックです。 UI & UX Micro-Tips: Volume Six. by Marc Andrew 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 1. スマホアプリではタブバーを常に表示する 2. ウェイトを使用するだけで、強調と階層を作ることができます 3. スマホではタップ可能な領域を広くする 4. サイト内のナビゲーションは一貫性のあるものにする 5. コンテンツが豊富なサイトでは検索を目立たせる 6. 適当にフォントサイズを選ぶのではなく Typ

デザインはちょっとした一手間を加えるだけで、ぐっとよくなります。 プロのUIデザイナーによるWebページやスマホアプリのUIとUXを改善するデザインの知識とテクニックを紹介します。 第5弾は、ユーザーエクスペリンスやインタラクションに関するテクニックです。 UI & UX Micro-Tips: Volume Five. by Marc Andrew 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 1. フォントサイズやグリッドは時にはルールを曲げてもよい 2. エラーメッセージは親切で分かりやすいものにする 3. ロード中は何が起きているのか分かるようにする 4. アクションを実行した際に何が起きるのか分かるようにする 5. タブバーには重要なアイテムだけを表示する 6. ドロップダウンに重要なアクションを隠さない

デザインはちょっとした一手間を加えるだけで、ぐっとよくなります。 プロのUIデザイナーによるWebページやスマホアプリのUIとUXを改善するデザインの知識とテクニックを紹介します。 第4弾は、UIに一貫性・統一感を持たせるためのデザインテクニックです。 UI & UX Micro-Tips: Volume Four. by Marc Andrew 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 1. デザイン要素に一貫性を持たせる 2. ホワイトスペースはたっぷり使用してください 3. 冒頭のパラグラフをスタイルして、ユーザーを引き込む 4. 短いパラグラフを効果的に使用する 5. カラーパレットを定義し、デザインに統一感を持たせる 6. アイコンをグリッドシステムで使用する際の注意点 はじめに 次のプロジェクトのため

デザインはちょっとした一手間を加えるだけで、ぐっとよくなります。 プロのUIデザイナーによるWebページやスマホアプリのUIとUXを改善するデザインの知識とテクニックを紹介します。 第3弾となる今回は、フォントやテキストに関するデザインのテクニックです。 UI & UX Micro-Tips: Volume Three. by Marc Andrew 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 1. フォントによって伝わり方が変わる 2. フォントで階層を示すにはウェイト、サイズ、カラーを使用する 3. ダークで見やすくするためにはフォントを重くする 4. 書体の選択によって、感情表現を生み出すことができる 5. 複数の書体を使用する場合は、最大2種類のルールを守る 6. すべて大文字で読みやすくするには、文字間隔

デザインはちょっとした一手間を加えるだけで、ぐっとよくなります。 UI&UXデザイナーによるWebページやスマホアプリのUIとUXを改善するデザインの知識とテクニックを紹介します。 先日の記事の続編で、プロのデザインを学べます。 UI & UX Micro-Tips: Volume Two. by Marc Andrew 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 1. ユーザーの混乱を避けるために、UIで確立されたアイコンを使用する 2. 近接を使用して、要素間の関係性を伝える 3. 4ptベースライン＋8ptグリッド＝調和のとれた縦のリズム 4. 見出しのline-heightを減らすのは良いこと 5. 配色で困ったら、類似色で探してみる 6. UIデザインから不要なノイズを取り除く はじめに 次のプロジェクト

デザインはちょっとした一手間を加えるだけで、ぐっとよくなります。 UI&UXデザイナーによるWebページやスマホアプリのUIとUXを改善するデザインの知識とテクニックを紹介します。 UI & UX Micro-Tips: Volume One. by Marc Andrew 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 1. 装飾的な要素をたまに使うのは全く問題ありません 2. UIの要素は互いに区別できるようにする 3. シャドウはわずかな量があるだけで十分 4. 見た目的に分かりやすいフォントを選択する 5. パンくずはユーザーが理解しやすいようにする 6. 彩度の高いカラーは慎重に はじめに 次のプロジェクトのために効率的で美しいUIを作成するとき、デザインをすばやく改善するためにわずかな調整で済むことがありま