WEBデザインの勉強

初心者が1からWEBデザインを勉強するブログ。

レスポンシブ

レスポンシブWEBデザイン

デモはこちら http://efu.sakura.ne.jp/web/rwd/スライダーはこちらを使用させていただきました。 black-flag.net HTML <html lang="ja"> <head> <meta charset="utf-8"> <title>RWDサイト|応用編</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> </meta></meta></head></html>

HTML/CSS/jQuery・jQueryプラグイン/レスポンシブ

訓練校最終テスト実際のサイトはこちら <html lang="ja"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <link rel="shortcut icon" href="favicon.ico"> <link rel="icon" href="favicon.png"> <link rel="apple-touch-icon" href="apple-touch-icon.png"> </link></link></link></meta></meta></head></html>

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

http://d.hatena.ne.jp/webmaster-web/20151003/p1d.hatena.ne.jp モバイルファーストでレスポンシブデザインを作成しました。http://efu.sakura.ne.jp/web/tomato/ HTML <html lang="ja"> <head> <meta charset="utf-8"> <title>サンプル</title> <meta name="viewport" content="width=device-width"> </meta></meta></head></html>

レスポンシブウェブデザインの練習

仕様書を元にレスポンシブデザインのWEBサイトを制作する。 仕様書と素材はこちら http://yachin29.hatenablog.com/entry/2015/09/01/042053yachin29.hatenablog.com 980px~ 全体横幅960pxの中央寄せ navのli幅120px641px~979px ヘッダー、フッターは100%…

bodyを5分割/hoverでキャプションを移動させる

全画面の上が2分割で下が3分割の計5分割で それぞれをhoverした時にキャプションを上に移動して隠れていたボタンを表示する。 レスポンシブでスマートフォン対応させる。 参考サイト www.vogue.co.jp 講師の解説ブログ yachin29.hatenablog.comhttp://efu…

レスポンシブデザイン モバイルファースト

モバイルファーストでスマートフォン用とタブレット用とPC用のレスポンシブデザインを作成しました。こちらを参考にさせて頂きました。 ascii.jphttp://efu.sakura.ne.jp/web/0818/ <html lang="ja"> <head> <meta charset="utf-8"> <title>レスポンシブデザイン(枝豆隊長)</title> <meta name="viewport" content="width=320,initial-scale=1.0"> </meta></meta></head></html>

グリッドリアウト レスポンシブデザイン

http://efu.sakura.ne.jp/web/okazu/ 講師の解説ブログ yachin29.hatenablog.comブレイクポイントごとにカラム落ちさせる。今回は PC用(3カラム) 960px以上 タブレット用(2カラム) @media screen and (min-width:641px) and (max-width:959px) 641px~95…

メディアクエリ(Media Queries)の練習

http://efu.sakura.ne.jp/web/mediaqueries/ <html lang="ja"> <head> <meta charset="utf-8"> <title>メディアクエリの練習</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> body { background: #000; } /* スクリーンサイズ1001以上で適用 */ @media screen and (min-width: 1001px) {…</meta></meta></head></html>

1カラムレイアウト スルポンシブ化

以前作った石垣島観光ガイドをレスポンシブに対応させる。mmmmofu.hatenablog.com実際のサイトはこちら http://efu.sakura.ne.jp/web/ishigaki/ <html lang="ja"> <head> <meta charset="UTF-8"> <title>石垣島観光ガイド</title> <meta name="viewport" content="width=device-width"> <link rel="stylesheet" href="style.css"> </head> <body> </body></html>

viewportの設定

viewport Windowの表示領域を設定する。 スマートフォンサイトを制作する際に設定する。 <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"> width=device-width 端末の幅に合わせる initial-scale ズーム倍率 minimum-scale 最上縮小率の設定 maximum-scale 最大倍率の設定 user-scalable ユーザーがズームで</meta>…