CSSでif~else文が使えたら、と思ったことはありませんか? もちろんifとかelseはCSSにはありませんが、CSSだけでif~else文と同じようにスタイルを設定できます。 CSSでif~else文を実現するには...記事の続きを読む
![CSSだけでif~else文と同じことができる! しかもすべてのブラウザでサポートされています](https://cdn-ak-scissors.b.st-hatena.com/image/square/e6b98ccbf325b6171959feba688afc2857346430/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-202401%2F2024030201%402x.png)
折れ線グラフを描画するためのフォント「Linefont」、波形・スペクトル・ダイアグラム・ヒストグラムなどの棒データを描画するためのフォント「Wavefont」が、Google Fontsで利用できるようになったので紹介します。 Linefont | Wavefont フォントのライセンスはSIL Open Font Licenseで、個人でも商用プロジェクトでも無料で利用できます。 まずは、Linefont。 Linefontは中小規模の折れ線グラフ(時系列など)を描画するためのフォントです。値は0~100の範囲でさまざまな文字に割り当てられます。範囲、値、ウェイトはWavefontと互換性があり、視覚的な一貫性を維持しながらフォントを交換できます。
Kindle Unlimitedで3ヵ月無料キャンペーン(申込は2023/7/12まで)が開催されているので、Unlimited対象となるWeb制作・デザイン・イラスト関連のKindle本をまとめてみました。 こんなに読めれば、十分に元が取れると思います。元といっても0円ですが。Unlimitedは他にも文芸や小説、マンガ、雑誌なども数多く対象となっており、3ヵ月間だけ登録するのもありです。 ※Unlimited対象は、2023/7/5時点の情報です。 まずは、Kindle Unlimitedが3ヵ月無料になるキャンペーンから。 99円とか199円とかはありますが、0円は二度見三度見レベルです。 Kindle Unlimited 3ヵ月無料キャンペーン ※キャンペーンの申込は、7/12まで。 Unlimited対象のカテゴリ別は、下記から。 Unlimited対象: Kindle本全体 U
WebサイトとスマホアプリのUIデザイン、UXデザインのさまざまな手法やプロセスを網羅的に幅広く、分かりやすく解説した解説書を紹介します。 UI/UXデザインを一通り学んでおきたい人にお勧めで、実際の現場や最近の流れを受けて必要となる知識を身につけることができます。さらに、UI/UXデザイナーのキャリアにも触れられており、会社選びや働き方について参考になります。 本書はUI/UXデザインの初学者向けの解説書です。一つひとつの項目について深掘りはされていませんが、幅広くUI/UXデザイナーとして必要になる知識を得ることができます。手法やプロセスなどはそれだけで一冊の書籍になることもあるので、まずは一通り知っておくことが大事です。 全ページカラーで、キャプチャや図も豊富なので、楽しく学ぶことができます。
あおぼし -GitHub Aoboshi One -Google Fonts 個人・商用サイトで無料利用可。同人誌や各種印刷物なども可。 Copperplate Gothicのような文字の太さが均一でセリフのある和文書体を目指してつくられたかなフォント。ひらがな・カタカナ・英数記号文字・ラテン文字が収録されています。 フリーフォントのダウンロードはページ上部の「Download Family」から、またはGitHubの「Code- Download Zip」から。 つきみ丸ゴかな -GitHub Tsukimi Rounded -Google Fonts 個人・商用サイトで無料利用可。同人誌や各種印刷物なども可。 東京築地活版製造所の3号かなの骨格にインスパイアされたかなフォント。筆の動きを残した丸ゴシックで、縦組みにぴったりです。ひらがな・カタカナ・一部の記号文字が収録されています。 フ
Notion(ノーション)をすでに使用している人も多いと思います。簡単に説明すると、iOS, Android, macOS, Windows, macOS対応のアプリで、そしてブラウザでも利用できるドキュメントを作成・共有できるワークスペースです。個人のメモ、知識をまとめるWiki、プロジェクト管理、またリモートワークにも大活躍です。 Notionでのプロジェクト管理、特にWebクリエイターとエンジニアにフォーカスした作業がはかどる案件管理手法の解説書を紹介します。 表紙に既視感を覚えた人は、大正解! 本書は当ブログでも大好評だった「Visual Studio Code完全入門(紹介記事)」の第3弾です。ちなみに、第2弾は「Docker&仮想サーバー完全入門(紹介記事)」 「Notionプロジェクト完全入門」では、Notionに装備されているデータベース機能を使用して、Web制作の業務上の
Web制作やUIデザインの必須ツール「Figma」は2022年7月に日本語版がリリースされ、9月にはAdobeの傘下になることが発表され、今後もますます必須ツールとして欠かせないものなるでしょう。 Figmaの基本的な使い方をはじめ、実践的なUIデザインの制作、Figmaならではの生産性を上げ効率的なテクニックなどを詳しく解説した解説書を紹介します。 本書はリファレンスとプラクティス両方の側面があり、Figmaをこれから始める人にも、Figmaをもっと使いこなしたい人にもお勧めの一冊です。 本書は、Figma日本語版に対応した解説書です。インストール・セットアップをはじめ、基本的な使い方、Figmaならではの生産性を上げる機能の解説だけでなく、ワイヤーフレームやプロトタイプや詳細デザインの作成など実践的な作業フローまで学べます。チュートリアルに使用されるファイルは、サポートサイトからダウン
CSSは進化のスピードが速いですが、2022年はさらに速くなりました。そして大きな転換期とも言えるのが、IEのサポート終了です。これにより今まで使用できなかったCSSの機能がたくさん使用できるようになりました。 参考: IEをサポート外にした時に使用できるCSSのプロパティや機能のまとめ 2022年現在、CSSの使用状況を調査した「The State of CSS 2022」を紹介します。 The State of CSS 2022 The State of CSS 2022は、State of CSSでおこなわれたアンケートの調査結果(14,310人分)をまとめたものです。 まずは、アンケートに回答された人の属性。 世界中の人がアンケートに参加しており、日本人も参加しています。年齢は24-44才が多く、性別は男性が多めです。
2023年のトレンドカラーがPantoneから発表されました。 トレンドカラーは鮮やかで紫がかったレッドの「ビバ マゼンタ(Viva Magenta)」、世界でもっとも明るい染料の一つコチニールの赤にインスパイアされたカラーです。 この活力に溢れたレッドはよろこびをあらわした新しいカラー、大胆でウィットに富み、すべての人を包み込みます。 Pantone Color of the Year 2023 PANTONE 18-1750 Viva Magenta「ビバ マゼンタ」 トレンドカラー「ビバ マゼンタ」を使用した配色 ビバ マゼンタのカラーデータ PANTONE 18-1750 Viva Magenta「ビバ マゼンタ」 2023年のトレンドカラーは、PANTONE 18-1750 Viva Magenta「ビバ マゼンタ」です。 PANTONEのエグゼクティブ ディレクターであるLea
HTMLだけでスマホやタブレットのカメラにアクセスできる、HTMLのcapture属性を紹介します。 私はこの属性を知らなかったのですが、実際にiPhoneとiPadで試してみたところ、前面カメラにも背面カメラにもアクセスできました。JavaScriptなどは必要なく、簡単なHTMLでできます。 You Can Access A User’s Camera with Just HTML by Austin Gil (@heyAustinGil) 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに HTMLのcapture属性とは capture属性のサポート状況 終わりに はじめに 私は先日、今までに見たことがないHTMLの属性、captureに出会いました。capture属性は非常にクールなので、動画と記事を書くことにし
Kindleセール「夏の翔泳社祭 2022」で、Webや紙のデザイン、Web制作、プロジェクト管理、同人誌・絵師さん向けのイラスト関連の良書がたくさん対象です! セール期間は2022年8月25日(木)まで。 あまりセール対象にならない本もあるので、お見逃しないように! さらにKindle本5点まとめて買うと さらに10%ポイント還元(8/21まで)の対象になっているものもたくさんあるので、合わせ技で実質55%オフです! 【最大50%OFF】 夏の翔泳社祭 2022(電子書籍セール) 約600点対象 まずは、2021年発売された中で個人的にベスト1の書籍! HTML+CSSの解説書で、Flexboxをメインにした実装はもちろんのこと、知識やテクニックを身につけるためのさまざまな工夫とアイデアが凝らしてあり、初心者も中級者も、そして人に教える立場の人にもお勧めできる良書です。
CSSの新機能「カスケードレイヤー」がいよいよ主要ブラウザすべてにサポートされます。カスケードレイヤー@layerを使用すると、CSSの詳細度とスタイルの順番をカスケード内で明示的にレイヤー化(階層化)でき、これまでのCSSの実装方法が大きく変わるものです。 Chromeのデベロッパーによるカスケードレイヤーの基礎知識を紹介します。 Cascade layers are coming to your browser by Una Kravets 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様のライセンスに準じて翻訳しています。 はじめに CSSの詳細度とカスケード @layerの動作 レイヤーの優先順位の管理 インポートファイルの整理 レイヤーとカスケード カスケードレイヤーの注意点 カスケードレイヤーの参考リソース はじめに カスケードレイヤー(@layerC
スクロールした時にヘッダの高さが縮んで上部に固定表示させるWebページを見たことがあると思います。今まではJavaScriptを使用する必要がありましたが、CSSのposition: sticky;を一工夫して使用することで簡単に実装できます。 高さを縮ませるのはヘッダに限らず、パネルやバナーなど他の要素でも簡単に実装でき、汎用性にも優れていると思います。 Shrinking Header on Scroll Without JavaScript by Håvard Brynjulfsen 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 デモページのデザインがシンプルなので、一見見落とすかもしれませんが、ページをスクロールするとヘッダの高さが縮んで上部に固定表示されます。 デモページ 仕組みは、簡単です。 ヘッダは外側と内側の2
CSSは進化が早く、中央揃えのテクニックも一昔前のものよりも確実に使いやすくなっています。天地左右の中央に要素を配置する際に、要素の幅や高さが可変だったり、要素の数が増えても対応する最新の実装テクニックを紹介します。 現在主流の5つのテクニックからそれぞれの特徴と最も万能で信頼できるテクニックを評価します。 Centering in CSS by Adam Argyle 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 1. Content Center 2. Gentle Flex 3. Autobot 4. Fluffy Center 5. Pop & Plop 中央揃えに最適なテクニック はじめに CSSの中央揃えは、ジョークの対象にもなる悪名高い課題でした。しかし今日ではCSSはすべて進化し、素直にこれらのジョー
HTMLは非常にシンプルな実装で、テキストベースのWebページをさくっと実装するための超軽量でシンプルなclassレスの超軽量CSSフレームワークを紹介します。 HTMLにclassは一切不要です、外部CSSを記述するだけで簡単に利用できます。ダークモードにも対応しており、カスタマイズも簡単。テキストベースのドキュメントとか、シンプルなブログや自己紹介ページなど、備えておくと便利です。 SPCSS -GitHub SPCSSの特徴 SPCSSのデモ SPCSSの使い方 SPCSSの特徴 SPCSSはclassレスで使用できる、テキストベースのサイトを実装するための超軽量CSSです。 ダークテーマをサポート(prefers-color-scheme: dark;)。ライトモードのテキストカラーはブラック(#000)ではなく、ダークグレー(#333)に。 一行が長くなりすぎないように<body
iPhone 12シリーズが発表され、iPhone 12/12 Proの予約も始まりましたね。23日配送予定で予約できたので、私も楽しみです。ユーザーとしてはその新しいデザインや機能にワクワクしますが、デザイナー・デベロッパーとしては悩みのタネが増えるかもしれません。 ビューポートのサイズの種類が増え、多くの解像度、アスペクト比、断片化が進むデバイスの複雑さがUIの設計にどのように影響するのかを紹介します。 iPhone 12 vs Designers by Michal Malewicz 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 iPhone 12のリリース だけど、このメタルとガラスの中には象がいる 2020年の現状 どのようにデザインすればよいか? 重要な要素は折り目の上に 終わりに iPhone 12のリリース 1
Bootstrap 5 alphaがついにリリースされましたね。 この新しいBootstrap 5では、jQueryが削除され、IEのサポートも終了し、実装の手順も少し変わりました。 Bootstrap 5で管理画面のダッシュボードを実装するチュートリアルを紹介します。 Tutorial: how to build a simple admin dashboard interface using Bootstrap 5 by @zolidev 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに Bootstrap 5の準備 ユーザー設定を含むナビゲーションバーの実装 ナビゲーションアイテムを含むサイドバーの実装 タイトル、キャッチ、パンくずを含むセクションの実装 いくつかのカードを含むメインコンテンツ フッタの実装 Vol
先日の記事で春後半の夏前にリリースされるとお伝えした通り、Bootstrap 5のalpha版がついにリリースされました! IEすべてのバージョンのサポート終了、jQueryの削除をはじめ、注目すべき新機能を紹介します。 Bootstrap v5 Bootstrap v5の特徴 Bootstrap v5のダウンロード・インストール Bootstrap v5のグリッドやコンポーネント Bootstrap v5の特徴 最も注目すべき点は、jQueryへの依存がなくなり、Internet Explorerのサポートも終了したことです。ちなみに、Bootstrap 4.5ではIE10/11をサポートしています(v4.5 Supported browsers)。より高速なJavaScript、より少ない依存関係となり、よりフレンドリーなツールを構築することに重点が置かれています。 また、現時点ではア
Webページやスマホアプリの実装で悩ましいのが、スペースの与え方です。マージンとパディングをどう使うか、margin-topとmargin-bottomのどちらにすべきか、グリッド間のスペース、表示デバイスによって異なるスペース、大規模プロジェクトにおけるスペースの管理方法など、CSSにおけるスペースについて解説します。 Spacing in CSS by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに CSSにおけるスペースの種類 CSS GridのGap(溝) CSS FlexboxのGap(溝) CSSのポジション CSSのプロジェクトで使用するスペースの実装テクニック スペーサーのコンポーネント CSSの数学関数: Min(), Max(), Clamp() はじめに 2つ以上の要素
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く