- よく使うWordpressプラグイン
最新の記事
- レスポンシブWebデザイン講座 まとめんばーず限定
レスポンシブWebデザイン 練習問題
レスポンシブWebデザインの練習問題です。 練習問題説明 各フォルダ内には、「web_完成版」「web_練習用」「解説ページ」というフォルダが入って...続きを読む- レスポンシブWebデザイン講座 まとめんばーず限定
応用編 03 メディアクエリ タブレット･･･
今回からタブレット・パソコン向けCSSの記述を進めていきます。 グローバルナビゲーションやおすすめメニューの段組みをデバイスごとに変更したり、可変レイアウ...続きを読む- レスポンシブWebデザイン講座 まとめんばーず限定
応用編 02 メディアクエリ CSSの記･･･
今回からコンテンツ・フッターエリアのスタイルを記述していきます。 可変レイアウトへの対応として影響する要素は相対値（%）での指定を行っていきます。 ...続きを読む- レスポンシブWebデザイン講座 まとめんばーず限定
応用編 01 HTMLの準備とスマートフ･･･
今回から始まる応用編では、次のようなレスポンシブサイトを制作していきます。 この章でやること ブレイクポイントと可変・固定レイアウトの説明 ...続きを読む- レスポンシブWebデザイン講座 まとめんばーず限定
初級編 03 メディアクエリ CSSの記･･･
初級編サンプルサイトの作成の続きです。 ここからは、メディアクエリの設定をしていきます。 この章でやること PC向けの記述である960px以上用...続きを読む- レスポンシブWebデザイン講座 まとめんばーず限定
初級編 02 スマートフォン向けCSSの･･･
初級編サンプルサイトの作成の続きです。 ここからは、スマートフォン向けCSSの記述を記述していきます。 この章でやること bodyとfont関連...続きを読む- レスポンシブWebデザイン講座 まとめんばーず限定
初級編 01 HTMLの準備
今回から初級編のサンプルサイトを制作していきます。 できるだけレスポンシブの技術に集中していただくために、シンプルなHTML・CSSで構成したWebページ...続きを読む- レスポンシブWebデザイン講座
レスポンシブWebデザインの必須のCSS･･･
レスポンシブWebデザインを学習していて、私が最初に疑問に思ったのが、画像の扱い方です。 Webページが、画面サイズに合わせて自動で拡大縮小し、画像の拡大...続きを読む- レスポンシブWebデザイン講座
スマートフォンで画像がぼやける問題の簡単･･･
Retinaディスプレイ対応のスマートフォンやタブレットで画像がぼやけた感じになってしまうのは、解像度に対する処理が異なるためです。 詳しくはこちらにまと...続きを読む- レスポンシブWebデザイン講座
スマートフォンで画像がぼやけるのはなぜ？･･･
同じ画像なのにパソコンで見るときれいに表示されていても、スマートフォンでは、画像がぼやけている。 スマホサイトやレスポンシブサイトを制作していると、とって...続きを読む- レスポンシブWebデザイン講座
Viewportについて
viewportとは スマートフォン、タブレットで表示されるときのWebサイトの見え方の指定です。 このviewportの設定により、各デバイスで見...続きを読む- レスポンシブWebデザイン講座
メディアクエリの練習
メディアクエリの説明を中心にCSSの記述の順序やブレイクポイントについて解説します。 練習問題もありますのでぜひお楽しみに！ CSSを記述していく順...続きを読む- レスポンシブWebデザイン講座
グリッドデザインについて
このサンプルサイトでは、「グリッドデザイン」という手法を取り入れています。 「グリッドデザイン」とは ページを構成する要素を規則正しく分割されたグリッド...続きを読む- レスポンシブWebデザイン講座
ブラウザの表示確認について
レスポンシブWebデザインの制作を進める上で、表示確認をするための便利なツールがインターネット上にありますが、そのほとんどが、サーバーにデータをアップロード...続きを読む- レスポンシブWebデザイン講座
レスポンシブWebデザインのメリット・デ･･･
レスポンシブWebデザインとは レスポンシブWebデザインとはパソコン、タブレット、スマートフォンなどの画面サイズの異なるデバイスに応じて、それぞれに最適...続きを読む- ノンデザ プロ 写真関連
主役と準主役と脇役たち
そのデザインの目的、伝えたいメッセージがはっきりとした。 それに合わせて、複数の写真をピックアップした。 （または、クライアントから提供された。） さて、...続きを読む- ノンデザ プロ 写真関連
知っとくと使える、写真のジャンプ率と面積･･･
レイアウトの中に写真を配置する際、目的の効果や世界観を表現するためには、 どんなサイズの写真をどう配置するのが効果的なのか？ 迷ってしまうことはありませんか...続きを読む- ノンデザ プロ 写真関連
写真レイアウトの基本
ここでは、写真の基本的なレイアウトと効果的な使い方をご紹介します。 同じ写真を使っても、配置の仕方で見る人に与える印象も変わります。 これを知ると、写真の選...続きを読む- ノンデザ プロ 文字・書体関連
文字を美しく見せる応用テクニック
文字には、漢字、ひらがな、カタカナ、英語の大文字、小文字以外にも、句読点や括弧などがあり、日本語、英語、数字を組み合わせて使う言葉もあります。 それぞれに特徴...続きを読むFacebookページに「いいね！」をクリックしていただくと、当サイトの更新情報を受け取ることができるようになります。
ぜひ、「いいね！」していただけると嬉しいです！