Webサイトのガイドライン、カラーや文字やアイコンや画像のスタイル、使用するコンポーネントを定義するスタイルガイドが作成できるテンプレートを紹介します。 Style Guide Guide Style Guide Guide Style Guide Guide(誤字ではないです)は、MITライセンスで利用できるスタイルガイドのテンプレートで、企業サイトの納品用にも無料で利用できます。
動画は拡大縮小が簡単な画像とは異なり、アスペクト比を維持したままレスポンシブ対応で埋め込むと、幅のサイズだけが変わり、高さがそのままになってしまいます。 この問題を解決するには、動画を配置するiframeをdivなどの親コンテナで内包し、アスペクト比にあった高さをpaddingで指定し、親コンテナのサイズに合わせて動画のサイズを変更させます。 動画をレスポンシブ対応で実装する現在主流となっているテクニックの解説と、もっとスマートに実装できるこれからのテクニックを紹介します。 Experiments in fixed aspect ratios 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 動画をレスポンシブ対応で、アスペクト比を維持したまま配置 もっとスマートに実装するためのスタディ 動画をレスポンシブ対応で、アスペクト比を維
テキストはスマホでは両横にマージンを保持しつつ幅いっぱいに、デスクトップでは指定した幅で表示し、常に画像だけ幅いっぱいに表示させるレイアウトを実装するスタイルシートのテクニックを紹介します。 floatやflexboxだと難しいレイアウトですが、CSS Grid Layoutを使うと非常に簡単に実装できます。 Breaking Out With CSS Grid Layout by Tyler Sticka CSSのレイアウトでありがちなバグ・仕様? 実装のゴール CSS Grid Layoutを使った実装 新しいテクニックの使い方 実装の注意点 CSSのレイアウトでありがちなバグ・仕様? 固定幅のコンテナ内からビューポートの幅いっぱいに配置するには、calc()を使うと簡単なコードで実現できます。 参考: Breaking Out With Viewport Units and Calc
ちょっと珍しい写真素材の時間がやってきました。 今回は、建物や物件の写真が商用でも無料で利用できる素材です。 物件数は9108棟! 写真は40,000枚以上で、思わず自分が前に住んでいたとこがないか探してしまいました。 物件写真.net 建物の写真に著作権が発生することを知らない人は、意外と多く感じます。 参考: 著作権・肖像権について、写真やイラストなどの素材を安全に使うために知っておきたいこと 物件写真.netではそういった問題を解消すべく、すべての人が自由に使用できる物件写真素材を扱っており、不動産業界だけでなく、広告の素材やイラストの背景などにも無料で利用できます。 利用にあたっては、完全無料で商用利用可。クレジット表記の義務無しで、登録も不要です。詳しくは、下記ページをご覧ください。 初めての方へ -物件写真.net どんな建物・物件の写真素材があるか見てましょう。 写真は、3つ
.alpha .btn{display:inline-block;margin:6px;font-size:inherit;line-height:1.42;padding:0.8em 1.6em;font-weight:normal;border-width:0;border-style:solid;background:transparent;border-radius:0.2666666667em;cursor:pointer;font-family:"Booster Next FY", "Avenir Next", Avenir, sans-serif;user-select:none;vertical-align:bottom;transition:box-shadow 0.2s, transform 0.2s, color 0.2s} .alpha .btn:hover{box
Sublime Textは快適で非常に使いやすいエディタですが、そのままの状態では最近の他のエディタに機能で劣っている面があります。 エディタとしての機能を強化し、HTML, CSS, JavaScriptのコーディング作業を快適にする便利なプラグインを紹介します。 Sublime Text 3 Plugins for Frontend Web Development キャプチャは、Sublime Text 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様のライセンスに基づき翻訳しています。 Sublime Textの管理系プラグイン Sublime Textの一般系プラグイン Sublime TextのJavaScript関連のプラグイン Sublime TextのHTMLとCSS関連のプラグイン Sublime Textのリンター関連のプラグイン Sublim
HTMLは汚さずに、ヘッダ、ナビゲーション、サイドバー、ボタンなど、さまざまな要素をスクロールした際に指定した位置にぴたっと貼り付けるスクリプトを紹介します。 IE7+からサポートされており、「position: sticky;」の代替になる便利なスクリプトです。 Fixed Sticky- GitHub Fixed Stickyの特徴 Fixed Stickyのデモ Fixed Stickyの使い方 Fixed Stickyの特徴 Fixed Stickyで貼り付ける要素の位置は、親要素に依存します。 つまり、スクロールしてぴたっと貼り付く位置は、常に親要素となるコンテナ内です。 基本的な動作を見てみましょう。 まずは、要素に「top: 20px;」を指定してみます。
Webサイトやスマホアプリのレイアウトの構成・展開、UIエレメントのバリエーション、カラーの使い方など、デザインの定義がまとめられたスタイルガイドを紹介します。 ロゴやブランディングも引き出しを増やすためにも参考にしたいですね。
ピクセルアートを描く時に使うラインやドットで構成されたさまざまなイラストのパーツ・エレメントが収録されたPhotoshopのブラシ素材を紹介します。 ピクセルアートならではのギザギザの斜めのラインをはじめ、L字、Y字、矩形、円形、四角柱、円柱、三角柱、マス目など、いろいろ揃っています。 NASC Photoshop Pixel Art Brush Set Photoshop Pixel Art Brushの使い方 Photoshop Pixel Art Brushのダウンロード Photoshop Pixel Art Brushの使い方 ブラシセットには、175種類のピクセルアートのパーツ・エレメントが揃っています。 その中の一部をご紹介、他にもさまざまなパーツやアルファベットなども揃っています。
WordPressはPHPの知識無しでも利用できますが、ちょっとしたカスタマイズをする際、テーマのカスタマイズ、テンプレートファイル、テンプレートタグ、子テーマを使った拡張、function.phpの設定など、PHPは避けて通れません。 WordPressのテーマづくりに必要なPHPの使い方が初心者でもやさしく学べるオススメの本を紹介します。 ここ2, 3年触っていない人も、けっこう変化しているので要チェックです。 本書はHTMLやCSSはひととおり分かるけど、PHPが苦手という人を対象にしたものです。WordPressをカスタマイズできるようにPHPの知識がゼロでもテーマを作成・カスタマイズしたい人にぴったりな一冊です。
CSSについてあまり詳しくないデザイナーでも、デザインのさまざまな検証や調整ができるデベロッパーツールの使い方を紹介します。 テキストや要素が多い少ないでコンテンツのデザインが崩れないか、要素のデザインを簡単に比較したり、画像や要素のカラーを一括で変更したりなど、制作にすぐに役立つものばかりです。 Using DevTools to Tweak Designs in the Browser 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 要素に与えられたclassを切り替える コンテンツの量でデザインが崩れないかテストする 指定した要素を非表示にする デザイン要素のスクリーンショット デザインのカラーを変更する CSSの変数を使用する(カスタムCSSプロパティ) 「filter: invert();」で要素のカラーを反転する C
jQueryは確かに便利ですが、すべての機能が必要かと言われれば、そうではない人が多いと思います。 「$」やセレクタなど、jQueryの機能をサポートしたjQueryの代替として利用できる超軽量スクリプトを紹介します。 Selector -GitHub 最新のjQueryのファイルサイズは、下記の通り。 jquery-3.2.1.js 270 KB jquery-3.2.1.min.js 90 KB そして、Selectorのファイルサイズは、1/4以下! selector.js 65 KB selector.min.js 17 KB もちろん、jQueryの機能すべてが利用できるのではなく、オブジェクトやセレクタや関数に限られています。 サポートされているjQueryの機能 サポートされているjQueryオブジェクト $ サポートされているjQueryセレクタ add addClass
ユーザーが一目で分かるよう精巧で、幾何学的な美しい図形でデザインされたユーザインターフェース用のSVGのアイコン素材を紹介します。 個人でも商用でも無料で、企業サイトなどにも利用できます。
CSSアニメーションは確実に進化しています。 ユーザーを楽しませるだけでなく、ユーザーの注意をつかみ、サイトのゴールに導くための重要な手段にもなります。 単調なアニメーションではなく、キーフレームを使い、タイミング・ディレイ・反復・方向・「will-change」機能を使ったCSSアニメーションの実装のポイントを紹介します。 How to Use CSS Animations Like a Pro 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 1. キーフレーム 2. アニメーションのタイミング 3. アニメーションのディレイ 4. アニメーションの再生状態 5. アニメーションの反復回数 6. アニメーションの方向 7. アニメーションの塗りつぶしモード 8. 「will-change」機能 9. CSSの4つの重要な値 1
最近リリースされた日本語のフリーフォント、バージョンアップされた日本語のフリーフォントを紹介します。 そういえば、4月10日はフォントの日、だそうです。 しかも、アドビ システムズ株式会社の制定! 知らなかった、、、 イラスト: Girls Design Materials 最近のだけでなく、これまで全部の日本語の無料フォントは下記をどうぞ。 2019年用、日本語のフリーフォント 366種類のまとめ 最新のフリーフォント、まずは先日リリースされたばかりの源ノ明朝から。 源ノ明朝(Source Han Serif) 源ノ明朝 -GitHub 個人・商用サイトで無料利用可。同人誌や各種印刷物なども可。 Adobeによる5番目のオープンソースフォントで、日本語・簡体中国語、繁体中国語、韓国語の東アジアで用いられている4つの言語に対応したセリフ体。65,535の字形に、ExtraLight, Li
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く