これは便利で簡単！CSSを書いている時に、Flexboxのチートシートを利用できるVS Codeの機能拡張
Post on:2020年9月18日
CSSを書いている時に、ふとFlexboxのプロパティがどんな挙動だったか確認したくなることはありませんか？
CSSをVisual Studio Codeで書きながら、CSS Flexboxのチートシートを利用できる機能拡張を紹介します。
Flexboxの各プロパティや値がどのような挙動か、一目で分かります。
2020年、オンラインサービスやWebアプリの開発を独学で勉強したい人に役立つ練習プロジェクトのまとめ
Post on:2020年9月17日
Webアプリやスマホアプリ、オンラインショップ、オンラインサービスなど、Web開発における一通りの需要に応えられるような知識・スキルを練習するのに役立つプロジェクトを紹介します。
8つのプロジェクトにはそれぞれ異なる課題が設定されており、開発者が行う実際のタスクが反映されています。
バックエンドが中心ですが、フロントエンドのCSSのテクニックなども磨けます。
8 Projects with modern designs to become a Full-stack Master 2020
by Thu Nghiem
意識低い系デザイン本がついに発売！整列ビーム、近接ホールド、デザインの基本がマンガで分かる -デザイナーじゃないのに！
Post on:2020年9月16日
デザインの4原則といえば、
「整列ビーム」「近接ホールド」「メリハリパンチ」「反復リピート」です！
Webでも紙のデザインでもこの原則を使うだけで、デザインがぐっとよくなります。
マンガを笑いながら読んでいる間に、デザインの基本がしっかり身についてしまう、新感覚の意識低い系デザイン本を紹介します。
JavaScriptでのメディアクエリ、matchMedia()の使い方を解説
Post on:2020年9月15日
メディアクエリと言えば、CSSの@mediaでスクリーンサイズに合わせて最適なスタイルを適用するものを思い浮かべる人が多いと思います。JavaScriptで実装したコンポーネント、例えば、スライダーなどをレスポンシブ対応にする際にはJavaScriptでメディアクエリを扱った方が便利です。
JavaScriptでのメディアクエリ、matchMedia()の使い方を紹介します。
Working with JavaScript Media Queries
by Marko Ilic
コピペで簡単！シンプルなHTMLとCSSで実装された17種類のヘッダのテンプレート -headers.css
Post on:2020年9月14日
新しいプロジェクトですぐに利用できるようシンプルなHTMLとCSSで実装された、17+種類のWebサイトのヘッダを実装するテンプレートを紹介します。
ヘッダはロゴ、ナビゲーション、検索フォームのシンプルな構成ながら、バリエーションは豊富で、実装コードだけでなく、デザインのアイデアとしても便利です。
CSSでheight: 100vh;を定義したのに、iOSのスマホで高さいっぱいに表示されないのを解決するCSSのテクニック
Post on:2020年9月11日
iOSのスマホでheight: 100vh;を定義してビューポートの高さいっぱいに表示したいのに、アドレスバーが表示されているとその分下が隠れて表示されてしまい、高さいっぱいにならないのを解決する方法を紹介します。
CSSのみのテクニックで、JavaScriptは必要ありません。
height: 100vh;だけでなく、min-heightやmax-heightでも機能します。
1クリックで簡単！建物や建築物の写真画像をブループリント、青図にするPhotoshopのアクション
Post on:2020年9月11日
建物や建築物の写真画像をブループリント、青図にするPhotoshopのアクションを紹介します。通常は有料ですが、無料なので早めのダウンロードをお勧めします。
操作は1クリックで簡単に完成し、元画像を劣化させることもありません。
Photoshop CS3+対応で、CC2020でも動作しました。
画像の遅延読み込みにloading属性とJavaScriptを併用した最大限のパフォーマンスを発揮させる実装方法
Post on:2020年9月10日
画像やiframeの遅延読み込みに使用するloading属性と非サポートブラウザ用にJavaScriptを併用した現代的なアプローチで、最大限のパフォーマンスを発揮させる実装方法を紹介します。
Best way to lazy load images for maximum performance
by Adrian Bece
