デザインの練習方法がよく分かる！無名デザイナーが365日、毎日ロゴをつくり続け、有名デザイン賞を受賞したロゴデザイン上達法

無名デザイナーが365日、毎日ロゴをつくり続け、国内外の有名デザイン賞を受賞したロゴデザイン上達法を紹介します。 著者自らが実践したデザインの練習方法、ロゴデザインに必要な発想力と造形力を鍛える方法、結果を出したロゴデザ...記事の続きを読む

5h

CSS Flexboxでヘッダを実装する最近のテクニックのまとめ

CSS Flexboxで、Webサイトのヘッダを実装する最近のテクニックを紹介します。 ロゴやナビゲーションの配置、各要素間のスペースの与え方、使用可能なスペースに検索フォームを広げて配置など、Flexboxを効果的に使...記事の続きを読む

1d

MdNのWebデザインとWeb制作のKindle本が、50％オフ！今年発売されたばかりの良書も含む特大セールが開催

2020年に発売されたばかりのものをはじめ、WebデザインとWeb制作関連の書籍がKindleセールで50％オフの大幅値引きになっています。 初心者向けから、現役で仕事をしている人向けまで揃っており、見逃せません！ 特に...記事の続きを読む

2d

全部フリーフォント！ミニマルで美しい、女子向けのフェミニンなロゴをデザインするテンプレート素材

通常は有料ですが、今週末まで無料でダウンロードできる、ミニマルで美しい、女子向けのフェミニンなロゴをデザインするテンプレート素材を紹介します。 本来は有料なだけあってかなり高品質。 期間中にダウンロードしておけば、いつで...記事の続きを読む

2d

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

CSSを書いている時に、ふとFlexboxのプロパティがどんな挙動だったか確認したくなることはありませんか？ CSSをVisual Studio Codeで書きながら、CSS Flexboxのチートシートを利用できる機能...記事の続きを読む

1w

2020年、Web開発の一通りの需要に応えられる知識やスキルを習得するのに役立つ練習プロジェクトのまとめ

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

2w

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

デザインの4原則といえば、 「整列ビーム」「近接ホールド」「メリハリパンチ」「反復リピート」です！ Webでも紙のデザインでもこの原則を使うだけで、デザインがぐっとよくなります。 マンガを笑いながら読んでいる間に、デザイ...記事の続きを読む

2w

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

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

2w

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

新しいプロジェクトですぐに利用できるようシンプルなHTMLとCSSで実装された、17+種類のWebサイトのヘッダを実装するテンプレートを紹介します。 ヘッダはロゴ、ナビゲーション、検索フォームのシンプルな構成ながら、バリ...記事の続きを読む

2w

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

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

2w