CSSのセレクタがいまいち、という人にお勧めです! セレクタの使い方が分かりやすくまとめられたPDFのチートシートを紹介します。 このチートシートは通常のチートシートだけでなく、ゲーム版もあり、CSSのセレクタをどれくらい知っているか確認することもできます。
商用でも無料で利用できる1,000種類のアイコンが3つのスタイル、そしてPhotoshoop用・Adobe XD用・Sketch用・Figma用・inVision用、そしてSVGまで完備されたMaterial Icons Libraryを紹介します。 一度にすべてのアイテムがダウンロードできるので、備えておくと便利だと思います。 Material Icons Library ラインセスはApache License Version 2.0で、個人でも商用でも無料で利用できます。 アイコンはMaterial Designを踏襲しており、全部で1,000種類のアイテムが揃っています。スタイルは角丸・アウトライン、ツートーンの3種類。合計すると、3,000種類以上になります。 アイコンの特徴 フォーマットは、Photoshop, Adobe XD, Sketch, Figma, inVision
クレジットカード番号・電話番号・日付・時間・金額などを入力するフォームのinput要素に、数字を区切ったり、記号文字を加えたり、入力する数字のフォーマットを簡単に定義できる軽量スクリプトを紹介します。 単体のスクリプトとしてだけでなく、Reactコンポーネント、AngularJSディレクティブでも利用できます。 Cleave.js -GitHub Cleave.jsの特徴 Cleave.jsのデモ Cleave.jsの使い方 Cleave.jsの特徴 Cleave.jsは、フォームのinput要素に入力する数字のフォーマットを簡単に定義できます。 クレジットカード番号のフォーマット 電話番号のフォーマット 日付・時間のフォーマット 数値のフォーマット 区切り文字、プレフィックス、ブロックパターン
サーバーサイドのレンダリング(SSR)を使用して、数分の1秒以内にページが高速に表示されるWordPressのフロントエンドを構築するテクニックを紹介します。 バックエンドのキャッシュと組み合わせることで、非常に高速になり、しかも安価にWordPressサイトを構築できます。 Zero-latency WordPress Front-end -GitHub 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様のライセンスを元に翻訳しています。 デモページ サーバーサイドのレンダリング(SSR) バックエンドのサービス 非キャッシュページのアクセス キャッシュページのアクセス キャッシュのパージ 始めてみよう Nginxの設定 バックエンドのJavaScript フロントエンドのJavaScript Cordova 終わりに デモページ サンプルのコードで何ができるのか
CSSベースの新着のフレームワークをはじめ、もはや定番といっていいフレームワーク、軽量フレームワーク、何かに特化されたフレームワークを紹介します。 CodyHouse CodyHouse's Framework -GitHub CodyHouse's Frameworkは先日ローンチしたばかりですが、当ブログでは開発の過程を記事にして紹介していました。 レスポンシブに対応したスペースをCSSで効率的に定義する方法 カオス化したスタイルシートから卒業!CSSでカラーを管理する効率的な方法 Webサイトやスマホアプリでよく使用されるさまざまなコンポーネントを最適なコードで実装することができます。また、CSSはマージン用・カラー用・タイポグラフィ用・ボタン用などに分かれているので、自分用にカスタマイズして利用することもできます。 Bulma Bulma -GitHub こういったフレームワークで
VisBugはChromeの機能拡張で、ブラウザに表示したページのデザインやコンテンツを検証・編集できます。グリッドの確認はもちろん、要素を移動させたり、入れ替えたり、別の画像にしたり、テキストを編集したり、カラーを変更したりなど、さまざまなアイデアを実行・テストすることができます。 制作や検証時だけでなく、クライアントとの打ち合わせ、社内ミーティングなど、活躍するシーンがたくさんある便利ツールです。 VisBug -GitHub VisBugの特徴 VisBugのインストール VisBugの機能 VisBugの特徴 VisBugはChromeの機能拡張で、デベロッパーツールのデザイナーやディレクター向けという感じです。開発者のAdam Argyle氏は、Googleの現役UXエンジニア。 機能拡張なので、使うのは簡単です。 Chromeで当ブログを表示し、VisBugを起動してみました。
少人数で一回限りのプロジェクトであれば、カラーシステムは割と簡単に構築できます。しかし、大人数や長期間のプロジェクトになると、そう簡単ではありません。 Webサイトやスマホアプリで、長期的に使用でき、拡張性があり、アクセシブルなUI用のカラーシステムを構築する新しい方法を紹介します。 Re-approaching Color 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに カラーの名前の付け方 カラーの選択方法 カラーのアクセシビリティ はじめに カラーとは世界を認識するのに役立ち、そしてインターフェイスにとっても重要な存在です。わたし達が予測して、そして理解し、意思決定するのをカラーは導きます。 例えば、レッドの文字は注目し、グリーンの数字はリラックスし、グレーの文章の前にブラックの文章を読むでしょう。ブルーの文字は
シンプルなアイコン素材は、重宝しますよね。 Webサイトやブログ、スマホアプリなどにぴったりな、シンプルにデザインされた無料で利用できるSVG完備のアイコン素材を紹介します。 CC0なので、商用利用時のクレジット表記は不要、複製、改変、配布などもOKで、使い勝手がかなりよいと思います。
Webサイトやスマホアプリのどの部分にでもフォームに入力された値を検証するバリデーションを簡単に実装できる、わずか2.29kBの超軽量ライブラリを紹介します。 バリデーションでよく使用されるルールもデフォルトで30個以上用意されており、ルールをカスタマイズして利用するのも簡単です。 v8n -GitHub v8nの特徴 v8nのドキュメント v8nの使い方 v8nの特徴 v8nの名称は、「validation」の「v」と「n」の間に正確に8文字あるという意味です。 流暢でチェーン化可能なAPI チェーン化可能なAPIを使用して、フォームの検証を簡単に作成できます。 有用な標準検証ルール フォームの検証でよく使用される30個以上のルールが用意されています。 カスタマイズ性 フォームの検証用ルールは、簡単にカスタマイズできます。 非同期検証をサポート バックエンドでの検証のように時間のかかるル
HTMLやCSSのコーディング作業は無しで、デスクトップ・スマホ向けのさまざまな種類のテンプレートをすぐ簡単に構築できるフレームワークを紹介します。 ランディングページはもちろんのこと、CMSにも使用できるように設計されており、オープンソースとして利用できます。 普通のページビルダーのように見えますが、実際にはより多くの機能を備えています。 CMSもサポート テンプレートを簡単に作成できる Webサイト、スマホアプリ、HTMLメールなど、HTMLベースのテンプレートを素早く簡単に作成できます。 レスポンシブ対応 レイアウトのベースはFlexboxで、デスクトップ、タブレット、スマホに完全対応。 CMSをサポート 動的テンプレートの作成をスピードアップするためにCMS内部で使用できるように設計されています。 HTML, CSSのコーディング作業は無し コーディング作業は一切無しで、テンプレー
テキスト、ボーダー、背景、アクセント、エラーなど、カラーをCSSでどのように定義すると効率的に管理できるのか、保守が簡単になるのか、そのテクニックを紹介します。 Create your design system, part 3: Colors by CodyHouse 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに カラーをCSSで効率的に管理するために セマンティックにするか、宣言型にするか 基本的なカラーパレットの作成 セマンティックカラーの追加 このアプローチを採用する理由 テーマに使用するカラー はじめに 元々は、近日公開予定の「Web Components」のために作成したものですが、グローバルのCSSとして利用できるので、一足先に公開します。 Web Components|CodyHouse カラーをCS
Webページに実装されているHTML要素の構造を可視化し、header, nav, main, articleなどセマンティック要素が正しく実装されているか検証できるスタイルシートを紹介します。 デバッグ機能も備えており、不正なマークアップや問題のあるマークアップを表示することもできます。 Construct.css Construct.css -GitHub Construct.cssはセマンティックHTMLの使い方をより身近にするために、スタイルをフックとしてクラス名を使用するのではなく、直接タグをスタイルするCSSのライブラリです。目に見えないセマンティックのタグであることを視覚的に確認することができます。 ブラウザで簡単に利用できるブックマークレットも用意されています。 ブックマークレット Construct.cssのブックマークレット ブックマークレットを使用すると、以下のCSS
さまざまなデータを最小限の記述でビジュアル化し、アニメーションで表示する高性能なJavaScriptライブラリを紹介します。 メーターやファンやコントローラーなど、デザインがレトロなのも面白いですね。 Zeu.js -GitHub 上記は静止画ですが、もちろんアニメーションで動きます。 デモのカラーは派手ですが、オプションで簡単に変更できます。 My Command Center Zeu.jsはCanavasベースで、外部ファイルと空のcanvas要素を用意し、あとはタイプとデータを定義するだけで実装できます。 <!-- 外部ファイル --> <script src="zeu.min.js"></script> <!-- 空のcanvas要素 --> <canvas id="text-meter" width="200" height="100"></canvas> <script> //
HTML, CSS, JavaScript, Swiftなどのコードで、キーボードのタイピング練習ができるオンラインツール・アプリを紹介します。 最近では、HTML, CSS, JavaScriptを手打ちで入力する機会はかなり減りましたが、タグやプロパティを入力する指の動きなどけっこう覚えているものですね。
Web制作に限らず、制作業界すべてのマネジメントにおいて、要件やスケジュールの確認、変更や修正内容の確認は、非常に重要なプロセスです。 広告関係4団体によって策定された、それらの内容を明確にし、確認書としてメールの書面をもって確認するためのガイドラインを紹介します。 広告関係4団体が「広告制作取引『受発注』ガイドライン」を策定 策定に加わった4団体は、下記の通り。 JAA 日本アドバタイザーズ協会 JAAA 日本広告業協会 JAC 日本アド・コンテンツ制作協会 OAC 日本広告制作協会 上記ページで、ガイドラインのPDFがダウンロードできます。 このガイドラインは制作費や納期などの発注内容を事前に明確にし、適切なスケジュール管理のもと業務管理を行い、受注/発注両者が長時間労働の抑制に取り組むことを目的としたものです。それらを「受発注確認書」として電子メールで取り交わすことをルールといたしま
Webページやスマホアプリをはじめ、レスポンシブ対応ページなどで役立つ、CSSのあまり知られていない仕様や少し高度な使い方を紹介します。 Lesser known CSS quirks & advanced tips 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 01. 垂直方向のpaddingは要素の幅に対して相対的 02. マージンの相殺が適用されない条件 03. 不透明度でz-indexの積み重ね順序を変更できる 04. CSSのカスタムプロパティ(変数) 05. vertical-align: top | middle | bottom 06.「height: 100%;」の挙動 07. idとclassの詳細度 08. 属性のターゲティング 09. 複数の値を指定する場合、垂直、水平の順番になるとは限らない 10.
ページ上の任意の要素を目立つようにハイライトさせたり、ページの機能を紹介するツアーを実装できるスクリプトを紹介します。 一昔前までのは実装が少し面倒だったり、jQueryなど他のスクリプトに依存していましたが、ここで紹介するのは実装が非常に簡単で、超軽量の4kb! しかも依存は一切無し! 既存ページにもすぐに利用できると思います。 Driver -GitHub Driverの特徴 Driverのデモ Driverの使い方 Driverの特徴 ページ上の任意の要素をハイライト表示します。 Webアプリの機能を順番に紹介することもできます。 ユーザーにフォーカスシフターを追加します。 キーボードでも操作可能で、ユーザーフレンドリーです。 実装が簡単で、他のスクリプトやスタイルシートの依存はありません。 わずか4kbの超軽量バニラ スクリプト。 強力なAPIを備えており、高度なカスタマイズも可能
子要素を親要素の左右の中央寄せに配置するのは、簡単です。 インライン要素は「text-align: center;」で、ブロック要素であれば「margin: 0 auto;」で中央に配置できます。 難しいのは天地、上下の中央です。 CSS Hackはなしで、要素を上下左右の中央寄せに配置する実装方法を紹介します。 Absolute Centering with CSS 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 positionプロパティを使って、要素を上下左右の中央寄せに配置 単位vhを使って、要素を上下左右の中央寄せに配置 Flexboxを使って、要素を上下左右の中央寄せに配置 CSS Gridを使って、要素を上下左右の中央寄せに配置 positionプロパティを使って、要素を上下左右の中央寄せに配置 「position
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く