これは便利で簡単!CSSを書いている時に、Flexboxのチートシートを利用できるVS Codeの機能拡張

CSSを書いている時に、ふとFlexboxのプロパティがどんな挙動だったか確認したくなることはありませんか?

CSSをVisual Studio Codeで書きながら、CSS Flexboxのチートシートを利用できる機能拡張を紹介します。
Flexboxの各プロパティや値がどのような挙動か、一目で分かります。

CSSをVS Codeで書きながらFlexboxのチートシートを利用できる機能拡張

CSS Flexbox Cheatsheet -VS Code

続きを読む

2020年、オンラインサービスやWebアプリの開発を独学で勉強したい人に役立つ練習プロジェクトのまとめ

Webアプリやスマホアプリ、オンラインショップ、オンラインサービスなど、Web開発における一通りの需要に応えられるような知識・スキルを練習するのに役立つプロジェクトを紹介します。

8つのプロジェクトにはそれぞれ異なる課題が設定されており、開発者が行う実際のタスクが反映されています。
バックエンドが中心ですが、フロントエンドのCSSのテクニックなども磨けます。

オンラインサービスやWebアプリの開発を独学で勉強したい人に役立つ練習プロジェクトのまとめ

8 Projects with modern designs to become a Full-stack Master 2020
by Thu Nghiem

続きを読む

意識低い系デザイン本がついに発売!整列ビーム、近接ホールド、デザインの基本がマンガで分かる -デザイナーじゃないのに!

デザインの4原則といえば、
「整列ビーム」「近接ホールド」「メリハリパンチ」「反復リピート」です!
Webでも紙のデザインでもこの原則を使うだけで、デザインがぐっとよくなります。

マンガを笑いながら読んでいる間に、デザインの基本がしっかり身についてしまう、新感覚の意識低い系デザイン本を紹介します。

デザイナーじゃないのに!

続きを読む

JavaScriptでのメディアクエリ、matchMedia()の使い方を解説

メディアクエリと言えば、CSSの@mediaでスクリーンサイズに合わせて最適なスタイルを適用するものを思い浮かべる人が多いと思います。JavaScriptで実装したコンポーネント、例えば、スライダーなどをレスポンシブ対応にする際にはJavaScriptでメディアクエリを扱った方が便利です。

JavaScriptでのメディアクエリ、matchMedia()の使い方を紹介します。

JavaScriptでのメディアクエリ、matchMedia()の使い方を解説

Working with JavaScript Media Queries
by Marko Ilic

続きを読む

コピペで簡単!シンプルなHTMLとCSSで実装された17種類のヘッダのテンプレート -headers.css

新しいプロジェクトですぐに利用できるようシンプルなHTMLとCSSで実装された、17+種類のWebサイトのヘッダを実装するテンプレートを紹介します。

ヘッダはロゴ、ナビゲーション、検索フォームのシンプルな構成ながら、バリエーションは豊富で、実装コードだけでなく、デザインのアイデアとしても便利です。

17+種類のWebサイトのヘッダを実装するHTML+CSSのシンプルなテンプレート

headers.css
headers.css -GitHub

続きを読む

CSSでheight: 100vh;を定義したのに、iOSのスマホで高さいっぱいに表示されないのを解決するCSSのテクニック

iOSのスマホでheight: 100vh;を定義してビューポートの高さいっぱいに表示したいのに、アドレスバーが表示されているとその分下が隠れて表示されてしまい、高さいっぱいにならないのを解決する方法を紹介します。

CSSのみのテクニックで、JavaScriptは必要ありません。
height: 100vh;だけでなく、min-heightmax-heightでも機能します。

iOSのスマホで100vhを定義したのに、高さいっぱいに表示されない時の解決方法

PostCSS 100vh Fix -GitHub

続きを読む

1クリックで簡単!建物や建築物の写真画像をブループリント、青図にするPhotoshopのアクション

建物や建築物の写真画像をブループリント、青図にするPhotoshopのアクションを紹介します。通常は有料ですが、無料なので早めのダウンロードをお勧めします。

操作は1クリックで簡単に完成し、元画像を劣化させることもありません。
Photoshop CS3+対応で、CC2020でも動作しました。

サイトのキャプチャ

Download Blueprint Photoshop Action

続きを読む

画像の遅延読み込みにloading属性とJavaScriptを併用した最大限のパフォーマンスを発揮させる実装方法

画像やiframeの遅延読み込みに使用するloading属性と非サポートブラウザ用にJavaScriptを併用した現代的なアプローチで、最大限のパフォーマンスを発揮させる実装方法を紹介します。

画像の遅延読み込みの現代的なアプローチ、loading属性と非サポートブラウザ用にJavaScriptを併用

Best way to lazy load images for maximum performance
by Adrian Bece

続きを読む

top of page

©2020 coliss