知っておくと便利！ CSSでUIデザインを微調整する時短テクニックとプロセスを解説
WebサイトやアプリのUIデザインで欠かせないのが、FigmaなどのデザインツールとChromeなどのデベロッパーツールです。この2つをどのように使い分けるとよいのか、デザインツールでやるよりもブラウザ上でCSSでやった方が便利な時短テクニック、UIデザインを微調整するプロセスを紹介します。 Tweaking In The Browser by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに ブラウザでのデザインがうまくいかない理由 ブラウザでの微調整 ブラウザで配色を微調整する ブラウザでフォントサイズを微調整する ブラウザでグリッドレイアウト・システムを微調整する ブラウザでレスポンシブ対応のフォントサイズを微調整する ブラウザでコンテナクエリを微調整する ブラウザで多言語サイトのデザイ
Chrome 95のデベロッパーツールの新機能が便利！vh, vw, rem, emなど、CSSの単位を簡単にオーサリング
先週リリースされたChrome 95のデベロッパーツールに搭載された新機能が便利なので、紹介します。 最近の新機能だと、Flexboxのデバッグツール（紹介記事）やCSS Gridのデバッグツール（紹介記事）などがありますが、Chrome 95ではCSSの単位（vh, vw, rem, emなど）を簡単にオーサリングできるようになりました。 New CSS length authoring tools ※デベロッパーツールの日本語表示（Chrome 94の新機能）は、設定（歯車アイコン）から言語を日本語に変更します。 デベロッパーツールの新機能の使い方は、簡単です。 Webページを開き、デベロッパーツールを起動します。 スタイル（Styles）パネルで、長さを定義したCSSのプロパティ（width, height, margin, paddingなど）を探します。 単位にカーソルを合わせる
知っておくと便利で役に立つHTMLの属性のまとめ
あまり知られていないけど、知っておくと便利で役に立つHTMLの属性を7つ紹介します。 Google翻訳が翻訳しようとするのを防ぐtranslate属性、リンクをダウンロードするように指示するdownload属性、アップロードできるファイルのタイプを指定できるaccept属性など、HTMLだけで実装できるのかという便利な属性ばかりです。 7 useful HTML attributes you may not know by Mariana 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに multiple属性 accept属性 contenteditable属性 spellcheck属性 translate属性 poster属性 download属性 終わりに はじめに HTMLは、Web制作の要です。しかし、多くのプロ
CSSのaspect-ratioプロパティがすべてのブラウザにサポートされました、画像をアスペクト比で実装する今までとこれからの実装方法
先日アップデートされたSafari 15とSamsung Internet 15により、すべてのエバーグリーンブラウザでaspect-ratioプロパティがサポートされました。 ※エバーグリーンとは、最新版に自動アップデートされるブラウザのことです。 aspect-ratioプロパティを使用することで、レスポンシブ対応の画像をアスペクト比を維持したまま簡単に実装できます。 CSSでアスペクト比を実装する今までとこれからの実装方法を紹介します。 CSS ways to Create Fixed Aspect Ratio aspect-ratioプロパティとは 1. Padding Hack 2. Viewport width solution 3. aspect-ratioプロパティ デモ aspect-ratioプロパティとは aspect-ratioプロパティは名前の通り、アスペクト比を
モダンCSSによる絶対配置（position: absolute;）の削減
テキストを画像の上に配置、タグを重ねたい、ヒーローセクションで画像の上にコンテンツを配置、画像のアスペクト比を維持させたい時など、CSSの絶対配置（position: absolute;）を使用することがあります。もちろん、それでうまくいく時はありますが、なんらかの制約があったり、テキストが長いと崩れたりします。 position: absolute;が必要だと思われていた実装で、使用しなくても実装できるモダンCSSのテクニックを紹介します。 Less Absolute Positioning With Modern CSS by Ahmad Shadeed はじめに ケース1: カードのオーバーレイ ケース2: カードのタグ ケース3: ヒーローセクション ケース4: display: contents; ケース5: カードアイテムの並べ替え ケース6: 中央寄せ ケース7: 画像のアス
2020年、オンラインサービスやWebアプリの開発を独学で勉強したい人に役立つ練習プロジェクトのまとめ
Webアプリやスマホアプリ、オンラインショップ、オンラインサービスなど、Web開発における一通りの需要に応えられるような知識・スキルを練習するのに役立つプロジェクトを紹介します。 8つのプロジェクトにはそれぞれ異なる課題が設定されており、開発者が行う実際のタスクが反映されています。 バックエンドが中心ですが、フロントエンドのCSSのテクニックなども磨けます。 8 Projects with modern designs to become a Full-stack Master 2020 by Thu Nghiem 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに Image Uploader My Unsplash CatWiki Authentication App Shoppingify Chat Group Tw
コーディング作業はもう一切不要！2.0でものすごい進化を遂げた、国産の無料デザインツール -STUDIO 2.0
去年当ブログで紹介した際にも評判が高かったSTUDIOが、満を持して2.0にアップデートされました！ STUDIOはコーディング作業は一切不要で、Webサイトやスマホアプリのデザインを積み木感覚で楽しくデザインできるツールで、無料で始めることができます。 STUDIO STUDIOの特徴 STUDIOの使い方 STUDIOの特徴 STUDIOは無料で利用できる国内産のデザインツールで、Webサイトやスマホアプリのモックアップ作成から、デザイン、さまざまな実機でのプレビュー、公開、そして運用や解析まで、それぞれの専門知識に詳しくなくても簡単にできます。
ビジネス系のイラストはおしゃれなのが無いと困っている人に！商用無料で使えるイラストのSVG素材 -unDraw
ビジネス系のサイトをはじめ、ランディングページ、ポートフォリオ、もちろん個人ブログにもぴったりなイラストのSVG素材が無料でダウンロードできるサイトを紹介します。 シンプルでセンスのあるイラストが揃っており、しかもクレジット表記不要の太っ腹ライセンスなので、使い勝手がよいと思います。 unDraw unDrawの特徴 イラストのSVG素材 素材のダウンロード unDrawの特徴 unDrawではランディングページ、スマホアプリ、プロダクトなどで利用できるイラストのSVG素材が無料でダウンロードできます。 イラストのフォーマットは、SVGと透過PNG イラストのテーマカラーは変更可能 MITライセンスで、使用時のクレジット表記は不要 テーマカラーの変更は、オンラインで簡単にできます。SVGだけでなく、PNGにも対応しています。
デザインの作業フローが大きく変わる！PhotoshopやIllustratorに予定されているAdobe Senseiの機能のまとめ
2018年1月末のアップデートで、ついにPhotoshopでもAdobe Senseiが実装され、複雑な選択範囲が1クリックで簡単に作成できるようになりました。 紹介記事: Photoshopの選択範囲の作成が驚くほど簡単に PhotoshopやIllustratorなどに実装が予定されているAdobe Senseiの機能を紹介します。Adobe Senseiの主な役割は作業的な部分の効率化で、これにより人はよりクリエイティブな部分に時間を割くことができます。 Adobe Sensei|AI（人工知能） Top 11 Tech Sneak Peeks from MAX 2017 that Wow'ed ※記事の掲載にあたり、Adobe広報様に許可を頂いています。 Adobe Senseiが最適な画像を見つけ出す -SceneStitch Adobe Senseiがデザインの要素を認識する
Appleのデザインは奥が深い！チーズはハンバーガーのどこに置くべきか
チーズはハンバーガーのどこに置くべきでしょうか？ AppleとGooleのハンバーガーの絵文字はTwitterでかなり話題になっていました。各社のハンバーガーや味といった観点からではなく、デザイン面からこの違いを解説した記事を紹介します。 Hamburger Emoji (🍔) War: Why Is Apple Right 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 2つのハンバーガーの絵文字 Twitterで「Appleはパティ（肉）の上にチーズがあるのに、Goolgeはなぜパティの下にチーズがあるのか」と指摘され、GoogleのCEO、Sundar Pichai氏は、「我々のを取り下げる」とツイートしました。 Sundar Pichai氏のツイート この件はThe Vergeで最初に見かけました。そこではこの2つの
Adobe XD, Photoshop, Illustratorの注目情報が満載！Adobe MAX Japan 2017 フォローアップのまとめ
Webデザイナー、Web制作者、イラストレーターなど、Adobeのアプリを使用している人は必見です。先日開催されたAdobe MAX Japan 2017のフォローアップをまとめました。 Adobe XD, Photoshop, Illustrator, Dreamweaverなどの新機能を中心にくわしく使い方が解説されています。日常的に使用している人でも、意外と知らない機能に目から鱗かもしれません。 Select Subject in Photoshop CC なんと1クリックで、複雑な選択範囲が作成できます！ 1:03あたりから、人物を1クリックするだけで一瞬で選択範囲が作成されています。 Photoshopの次のアップデートで搭載予定の新機能で、Adobe Senseiの人工知能を使い、画像の主題を自動認識して選択範囲を作成します。「Select Subject」という名で、動画を見
CSS Gridで、Webページでよく使うレイアウトを実装したシンプルなHTML/CSSのテンプレートのまとめ
CSS Gridを使って、ヘッダ・フッタ付きの2カラム、3カラム、カード型といったレイアウトをはじめ、テキストはグリッドに揃えて画像は全幅で表示など、Webページでよく使うレイアウトを実装するシンプルなテンプレートを紹介します。 来年からは、CSS Gridで実装するのが主流になりそうですね。 CSS Grid Starter Layouts CSS GridとFlexbox、それぞれどう使いこなせばいいだろうという方は、下記ページが参考になると思います。 Webページのこれからのレイアウトテクニック！FlexboxとCSS Gridは一緒に使用してこそ価値がある 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 CSS Gridで実装するヘッダ・フッタ・3カラム（聖杯レイアウト） CSS Gridで実装するヘッダ・フッタ・2カラ
Webのディレクターはどこまでシステムや開発のことを理解しておくべきか -Webディレクションの新・標準ルール
ディレクターの中でも、システム寄りはよく分からないという人は少なくないと思います。はい、私がそうでした。システム周りのことはすべてSEの人に頼っていました。 Webサイトやアプリの要件や予算から、リソースの確保・スケジュール・設計・開発・テスト・リリースまで、ディレクターがシステム開発のワークフローをディレクションする上でしっかりと理解しておきたいことがまとめられた解説書を紹介します。 本書は、昨日11/21に発売されたばかり。 今年発売された「Webディレクションの新・標準ルール」の第2弾として、システム開発にスポットがあてられた全くの別物です。 ちなみに第1弾は、UXのディレクションが中心です。 紹介記事: Webディレクターが役割をしっかり果たさないとプロジェクトが進まない -Webディレクションの新・標準ルール
レスポンシブ対応、縦長ページで見かけるさまざまなUIコンポーネントを備えたHTML/CSSのテンプレート -Shards
最新のBootstrap 4をベースに、ランディングページやスマホアプリのプロモーションページなど、縦長ページでよく見かけるさまざまなUIコンポーネントを備えたHTML/CSSテンプレートで構成された無料のUIキットを紹介します。 もちろんレスポンシブ対応で、非常に軽量に構築されているので、快適に利用できます。 Shards Shards -GitHub ShardsはMITライセンス、個人でも商用のプロジェクトでも無料で利用できます。 Shardsのデモ ShardsのUIコンポーネント Shardsの使い方 Shardsのデモ ダウンロードファイルには、すぐに利用できるデモページも含まれています。 まずは、プロダクト・サービス向けの縦長ランディングページ。
あまり知られていない、フォームをCSSでスタイルするために役立つ便利なセレクタとその使い方
フォームをCSSでスタイルするのは難しいと思われていました。しかし、input要素とそれに関連する要素をスタイルするためのあまり知られていないセレクタがあります。いくつかは比較的新しいセレクタですが、昔から存在するセレクタもあります。 フォームの見た目だけでなく、機能も強化するCSSの便利なセレクタとその使い方を紹介します。 Advanced CSS-Only Form Styling by Jonathan Harrell 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 フォームにスタイルを適用したデモ :placeholder-shown :required :optional :disabled :read-only :valid :invalid :in-range/:out-of-range :checked フォーム
[CSS]Webページのこれからのレイアウトテクニック！FlexboxとCSS Gridは一緒に使用してこそ価値がある
Webページのレイアウト、一昔前まではfloat、最近のプロジェクトではFlexboxが主流だと思います。CSS Gridはどうでしょうか？ CSS Gridは主要なすべてのブラウザにサポートされ、採用を検討している、また既に導入している人も少なくないでしょう。 注意しておきたいのが、CSS GridがあればFlexboxはいらないという考え方です。 これからのレイアウトは、FlexboxとCSS Gridを一緒に使用することで、それらの性能を効果的に利用できます。 Flexbox and Grids, your layout’s best friends by Eva Ferreira 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 FlexboxとCSS Gridは一緒に使用することでパワーを発揮する 神話は崩された Fri
![[CSS]Webページのこれからのレイアウトテクニック！FlexboxとCSS Gridは一緒に使用してこそ価値がある](https://cdn-ak-scissors.b.st-hatena.com/image/square/222e57e0cb617f5924de9e159879efca2a68aa3e/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201704%2F2017111110.png)
[CSS]便利なのが登場！レイアウトやUIコンポーネント用のスタイルシートが簡単にまとめて利用できる -Tailwind CSS | コリス
既存のページに外部CSSを加えるだけで、最近のWebサイトやブログで見かけるさまざまなコンポーネントやエレメント、Flexboxベースの柔軟なレイアウトをカスタマイズできるスタイルをまとめたCSSのフレームワークを紹介します。 Flexboxを使ってみたい、天地の中央に配置したい、シャドウを加えたい、レスポンシブ対応のナビゲーションを備えたいなど、簡単に利用できます。 デザインにも幅広く対応しているので、自分のオリジナルのデザインで利用できます。 Tailwind CSS Tailwind CSS -GitHub Tailwind CSSの特徴 Tailwind CSSの使い方 Tailwind CSSで用意されているスタイル Tailwind CSSの実装例 Tailwind CSSの特徴 Tailwind CSSはMITライセンスで、個人でも商用でも無料で利用できます。 ボタン、フォー
![[CSS]便利なのが登場！レイアウトやUIコンポーネント用のスタイルシートが簡単にまとめて利用できる -Tailwind CSS | コリス](https://cdn-ak-scissors.b.st-hatena.com/image/square/2d34cdd6f924a706cf29bd75ff95cedf76093a2f/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201704%2F2017110601.png)
レスポンシブ対応のHTMLメールをドラッグ＆ドロップで驚くほど簡単に作成できる無料ツール -Topol.io
便利なツールがどんどんリリースされています。 一から作成するとなかなか面倒なレスポンシブ対応のHTMLメールを簡単に作成できる無料のオンラインツールを紹介します。 デザインもさまざまなテンプレートが用意されており、主要なメールクライアントすべてをサポートしています。 Topol.io Topol.ioはHTMLメールのフレームワーク「MJML」をベースに作成されており、さまざまなメールクライアントで見栄えがよいHTMLメールを簡単に作成できます。 さまざまなデザインのHTMLメールを作成できる Topol.ioの使い方は簡単です。 登録など面倒なことは不要で、HTMLメールを作成し、ダウンロードできます。 まずは、サイトにアクセスし、「Start Designing」ボタンをクリックします。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
TwitterカードやOGPなど、head内のmetaに記述するコードを簡単に生成できるオンラインサービス -Hey Meta
ヘッダ・フッタ・ナビゲーションなど、最近のWebデザインで採用されているアイデアのまとめ -Good Web Design
