Fork me on GitHub

Webデザイン

WebデザインはCSSとJavaScriptを使ってWebアプリケーションの見た目やユーザインタラクションを作ることです。

なぜWebデザインは重要?

今時、このようなWebアプリケーションを使いたいと思うユーザがいると思いますか?

HTML with no CSS or JavaScript.

独自のスタイルとユーザが目的を達成することができるインタラクティブ性を考慮することは、モダンなWebアプリケーションを構築する上で最も重要な要素の一つです。

レスポンシブデザイン

Webアプリケーションを表示しているスクリーンサイズやデバイスに最適なコンテンツの提供の仕方を、コンテンツそのものとは切り離して定義することができます。スクリーンの特徴に応じて異なるコンテンツを表示させることをレスポンシブデザインと呼ぶことがあります。CSSCSS media queriesを使うことでレスポンシブなWebアプリケーションを構築することができます。

例えば、モバイルデバイスにはページ上にナビゲーションバーを表示するための十分なスペースがありません。そこで、メインのコンテンツの下に置くことがあります。Bootstrap Blog example を開き、ブラウザの横幅を狭くしてみると、右に位置していたエリアが、ページ下部に移動するのが確認できます。

デザインを学ぶためのリソース

  • Bootstrapping Designは、著者がこれまで読んだデザインを学ぶための書籍として、最も完結でわかりやすいものです。
  • KulerはAdobe製のカラーピッカーで、色の選択をする際に役立ちます。
  • ブラウザについてもっと知りたければ、ブラウザエンジンを構築するブログ記事を読めば、単純なレンダリングエンジンの実装方法を学ぶことができます。

CSSでデザインするには?

CSSのような静的なファイルをホストするには?

JavaScriptを使ってインタラクティブなコンテンツを作るには?


Interested in a complete Full Stack Python book with detailed tutorials and example code? Sign up here and you'll get an alert email if a book is created. No other emails will be sent other than sign up confirmation.