独学でWebデザインの勉強をする人のためのまとめサイトです。

最新の記事

  • レスポンシブWebデザイン講座 まとめんばーず限定

thumbnail

初級編 02 スマートフォン向けCSSの・・・

初級編サンプルサイトの作成の続きです。 ここからは、スマートフォン向けCSSの記述を記述していきます。 この章でやること bodyとfont関連...続きを読む

  • レスポンシブWebデザイン講座 まとめんばーず限定

thumbnail

初級編 01 HTMLの準備

今回から初級編のサンプルサイトを制作していきます。 できるだけレスポンシブの技術に集中していただくために、シンプルなHTML・CSSで構成したWebページ...続きを読む

  • レスポンシブWebデザイン講座

thumbnail

レスポンシブWebデザインの必須のCSS・・・

レスポンシブWebデザインを学習していて、私が最初に疑問に思ったのが、画像の扱い方です。 Webページが、画面サイズに合わせて自動で拡大縮小し、画像の拡大...続きを読む

  • レスポンシブWebデザイン講座

thumbnail

スマートフォンで画像がぼやける問題の簡単・・・

Retinaディスプレイ対応のスマートフォンやタブレットで画像がぼやけた感じになってしまうのは、解像度に対する処理が異なるためです。 詳しくはこちらにまと...続きを読む

  • レスポンシブWebデザイン講座

thumbnail

スマートフォンで画像がぼやけるのはなぜ?・・・

同じ画像なのにパソコンで見るときれいに表示されていても、スマートフォンでは、画像がぼやけている。 スマホサイトやレスポンシブサイトを制作していると、とって...続きを読む

  • レスポンシブWebデザイン講座

thumbnail

Viewportについて

viewportとは スマートフォン、タブレットで表示されるときのWebサイトの見え方の指定です。 このviewportの設定により、各デバイスで見...続きを読む

  • レスポンシブWebデザイン講座

thumbnail

メディアクエリの練習

メディアクエリの説明を中心にCSSの記述の順序やブレイクポイントについて解説します。 練習問題もありますのでぜひお楽しみに! CSSを記述していく順...続きを読む

  • レスポンシブWebデザイン講座

thumbnail

グリッドデザインについて

このサンプルサイトでは、「グリッドデザイン」という手法を取り入れています。 「グリッドデザイン」とは ページを構成する要素を規則正しく分割されたグリッド...続きを読む

  • レスポンシブWebデザイン講座

thumbnail

ブラウザの表示確認について

レスポンシブWebデザインの制作を進める上で、表示確認をするための便利なツールがインターネット上にありますが、そのほとんどが、サーバーにデータをアップロード...続きを読む

  • レスポンシブWebデザイン講座

thumbnail

レスポンシブWebデザインのメリット・デ・・・

レスポンシブWebデザインとは レスポンシブWebデザインとはパソコン、タブレット、スマートフォンなどの画面サイズの異なるデバイスに応じて、それぞれに最適...続きを読む

  • ノンデザ プロ 写真関連

ノンデザイナー 講座 写真 配置 順序

主役と準主役と脇役たち

そのデザインの目的、伝えたいメッセージがはっきりとした。 それに合わせて、複数の写真をピックアップした。 (または、クライアントから提供された。) さて、...続きを読む

  • ノンデザ プロ 写真関連

ノンデザイナー 講座 写真のジャンプ率と面積の関係

知っとくと使える、写真のジャンプ率と面積・・・

レイアウトの中に写真を配置する際、目的の効果や世界観を表現するためには、 どんなサイズの写真をどう配置するのが効果的なのか? 迷ってしまうことはありませんか...続きを読む

  • ノンデザ プロ 写真関連

ノンデザイナー 講座 写真レイアウトの基本

写真レイアウトの基本

ここでは、写真の基本的なレイアウトと効果的な使い方をご紹介します。 同じ写真を使っても、配置の仕方で見る人に与える印象も変わります。 これを知ると、写真の選...続きを読む

  • ノンデザ プロ 文字・書体関連

ノンデザイナー 講座 文字 約物 調整

文字を美しく見せる応用テクニック

文字には、漢字、ひらがな、カタカナ、英語の大文字、小文字以外にも、句読点や括弧などがあり、日本語、英語、数字を組み合わせて使う言葉もあります。 それぞれに特徴...続きを読む

  • ノンデザ プロ 文字・書体関連

ノンデザイナー 講座 文字を美しく見せる

文字を美しく見せる必須テクニック

文字を美しく見せるためには「文字詰め」というテクニックを使います。 「文字を美しく組める」ということは、デザインの基本であり必須の作業。 特に印象付けたいタ...続きを読む

  • ノンデザ プロ 文字・書体関連

ノンデザイナー 講座 英語と数字を美しく見せる

英語と数字を美しく見せる基礎テクニック

欧文(英語と数字)には欧文書体を使おう! 和文書体でも英語や数字は登録されているので、私たちはつい、英語や数字も和文書体を使ってしまいます。 しかし、和文書...続きを読む

  • ノンデザ プロ 文字・書体関連

ノンデザイナー 講座 書体選びと文字の扱い

やってはいけない書体選びと文字の扱い

前回では、書体の個性を知り、デザインの用途や目的に合わせた書体を選ぶ。 ということを学習しました。 書体を選ぶときのもう一つのポイントは、 スタンダード...続きを読む

  • ノンデザ プロ レイアウト関連

ノンデザイナー デザイン講座 三分割法

要素をどこに配置するか、迷った時はここに・・・

「レイアウトには重心がある!」の回で レイアウト=重心のバランスをとること。 と解説しましたが、最初のうちはバランス感覚が上手くつかめず、迷うことも...続きを読む

  • ノンデザ プロ レイアウト関連

デザインレイアウト講座 重心、バランス

レイアウトには「重心」がある!

よく、あるレイアウトを見て、「バランスがよい」とか「バランスが悪い」という表現が使われる。 では、この「バランス」って何だろう? それは視覚の心理の世界から...続きを読む

  • ノンデザ プロ レイアウト関連

デザイン レイアウト講座 四隅の法則

四隅の法則で空間的な広がりを作ろう!

今回は「空間的な広がり」を作るためのコツをお伝えします。 それは、「空間に逃げ場」を作ることです。 「逃げ場」を作ることは、目線の流れをスムーズにすることに...続きを読む


Facebookページに「いいね!」をクリックしていただくと、当サイトの更新情報を受け取ることができるようになります。
ぜひ、「いいね!」していただけると嬉しいです!



Pagetop