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

最新の記事


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

thumbnail

レスポンシブWebデザイン 練習問題

レスポンシブWebデザインの練習問題です。 練習問題説明 各フォルダ内には、「web_完成版」「web_練習用」「解説ページ」というフォルダが入って...続きを読む

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

thumbnail

応用編 03 メディアクエリ タブレット・・・

今回からタブレット・パソコン向けCSSの記述を進めていきます。 グローバルナビゲーションやおすすめメニューの段組みをデバイスごとに変更したり、可変レイアウ...続きを読む

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

thumbnail

応用編 02 メディアクエリ CSSの記・・・

今回からコンテンツ・フッターエリアのスタイルを記述していきます。 可変レイアウトへの対応として影響する要素は相対値(%)での指定を行っていきます。 ...続きを読む

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

thumbnail

応用編 01 HTMLの準備とスマートフ・・・

今回から始まる応用編では、次のようなレスポンシブサイトを制作していきます。 この章でやること ブレイクポイントと可変・固定レイアウトの説明 ...続きを読む

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

thumbnail

初級編 03 メディアクエリ CSSの記・・・

初級編サンプルサイトの作成の続きです。 ここからは、メディアクエリの設定をしていきます。 この章でやること PC向けの記述である960px以上用...続きを読む

  • レスポンシブ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