WEBデザインの勉強

WEB制作初心者が1から勉強するブログ。

HTML

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

モバイルファーストでスマートフォン用とタブレット用と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>

SVGでアニメーション

SVGとは…Scalable Vector Graphics(スケラブル ベクター グラフィックス) ベクターデータ。引き延ばしても縮めても荒れない。 Illustratorで文字を打つ 打った文字を選択してアウトラインを作成し、グループを解除する。 別名で保存する 形式をSVGにして保…

背景に動画を使用

http://efu.sakura.ne.jp/web/0804/ <html lang="ja"> <head> <meta charset="utf-8"> <title>背景に動画を使用</title> <link rel="stylesheet" href="style.css"> </head> <body> <video id="bgvid" autoplay loop muted> <…</video></body></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…

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>…

photoshopでスライスした画像をグリッドレイアウトでコーディング

http://efu.sakura.ne.jp/web/0630/ スライスしたい画像を用意する。 スライスしたいところにガイドを引く。(スナップしないので拡大して丁寧に引く) スライスツールを選択する。(切り抜きツール長押し) スライスしたい部分をドラッグする。(ガイドに沿…

背景画像を固定/スムーススクロールでTOPに戻る

HTML <html lang="ja"> <head> <meta charset="utf-8"> <title>背景画像を固定</title> <link rel="stylesheet" href="css/style.css"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> </head> <script type="text/javascript"> $(function(){ var topBtn = $('#to-to…</html>

Favicon

Faviconとは ウェブサイトのシンボルマーク・イメージとして、ウェブサイト運営者がウェブサイトやウェブページに配置するアイコンの俗称である。 favorite icon(フェイバリット・アイコン:お気に入りアイコン)という英語の語句を縮約したものである。 ス…

HTML/CSS/jQueryプラグイン

デモはこちら http://efu.sakura.ne.jp/web/atella/ <html lang="ja"> <head> <meta charset="utf-8"> <title>パスタとワインの店 アテラ</title> <link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="css/jquery.bxslider.css"> <link rel="stylesheet" href="css/lightbox.css"> </link></link></link></meta></head></html>

フォーム

http://efu.sakura.ne.jp/web/0601/名前→テキスト(1行テキスト) <input type="text" maxlength="10" placeholder="お名前" required autofocus> maxlengthはユーザーが入力できる最大文字数を指定する placeholderはテキストボックス等にあらかじめ入力サンプル文字を表示させることができる requiredは必須項目 autofocuはページを開…

HTML/CSS練習

http://efu.sakura.ne.jp/web/interior/ <html lang="ja"> <head> <meta charset="utf-8"> <title>インテリアショップ The SHOP</title> <link rel="stylesheet" href="style.css"> </head> <body> <div id="container"> <h1>インテリアショップ The SHOP・・・北欧家具・北欧雑貨</h1> <div id="content"> <h2></h2></div></div></body></html>

HTML/CSS練習

http://efu.sakura.ne.jp/web/cafe67/ HTML <html lang="ja"> <head> <meta charset="utf-8"> <title>cafe67</title> <link rel="stylesheet" href="style.css"> </head> <body> <div id="header"> <h1><img src="img/logo.png" alt="cafe67"></h1> </div> <div id="container"> </div></body></html>

positionの練習

デフォルトはstatic常にブラウザの左上にいる。 position: absolute;(絶対値) left: 0; top: 0; 親要素にposition: relative;(相対値)を書く。これが基準となる。 書かない場合は基準はbodyになっている。常にブラウザの左下にいてかつスクロールしても…

HTML/CSSのテスト課題

訓練校1ヵ月目の課題 架空の会社サイトの制作(トップページのみ) メインの画像の作成、スプライトナビゲーションの制作と それに合わせパーツの色やサイトの全体の色彩設計をするhttp://efu.sakura.ne.jp/web/company/ <html lang="ja"> <head> <meta charset="utf-8"> <title>企業系サイト</title> <link rel="stylesheet" href="style.css"> </head> <body> <div id="container"> </div></body></html>

2カラムレイアウト

http://efu.sakura.ne.jp/web/egg/ HTML <html lang="ja"> <head> <meta charset="UTF-8"> <title>卵料理カフェ Cockeyolly</title> <link rel="stylesheet" href="style.css"> </head> <body> <div id="sidebar"> <h1><img src="img/logo.gif" alt="卵料理カフェ Cockeyolly"></h1> <ul> <li>Home</li> <li>ニュース</li> …</ul></div></body></html>

マークアップ実習

前回の続き mmmmofu.hatenablog.com CSSで実際のサイトの見た目を作っていく。http://efu.sakura.ne.jp/web/cats/ HTML <html lang="ja"> <head> <meta charset="utf-8"> <title>うちのにゃんこ</title> <link rel="stylesheet" href="style.css"> </head> <body> <div id="container"> <div id="header"> <h1><span class="star">★</span></h1></div></div></body></html>

CSS復習/縦ナビゲーション

復習 > http://efu.sakura.ne.jp/web/0331/index4.html <html lang="ja"> <head> <meta charset="utf8"> <title></title> <style> body { font-family: "Hiraino Kaku Go" } h1 { background: limegreen; color: #FFF; padding: 10px; margin-bottom: 40px; } p { font-size: 20px; color: #FFF; background:…</meta></head></html>

2カラムレイアウト/float

2カラムレイアウト 2カラムレイアウトではfloat(浮く)をして要素を横並びにする必要がある。floatをすると浮き上がるので下の要素にまで影響がでてしまう。 floatした要素をdivで囲ってoverflow:hidden;をかけると他の要素に影響が出ない。http://efu.sak…

1カラムレイアウト練習

1カラムレイアウト練習 素材を使ったHTML、CSSの練習。 http://efu.sakura.ne.jp/web/0328/ HTML <html lang="ja"> <head> <meta charset="utf8"> <title>ガラスの靴</title> <link rel="stylesheet" href="style.css"> </head> <body> <div id="container"> <div id="header"> <h1><img src="img/main.gif" alt="ガラスの靴の持ち主を捜しています!">…</h1></div></div></body></html>

1カラムレイアウト

http://efu.sakura.ne.jp/web/0327/ 1カラムレイアウト 横並びでない縦に配置する1カラム(縦方向の列)のみで構成されたレイアウト HTML <html lang="ja"> <head> <meta charset="UTF-8"> <title>石垣島観光ガイド</title> <link rel="stylesheet" href="style.css"> </head> <body> <div id="container"> <div id="header"> <h1>石垣島観光ガイド</h1> </div></div></body></html>

CSSの練習

スタイルシートの書きかた 外部のCSSファイルを読み込む方法とHTML内に直接書く方法があるが、 HTMLに直接書く場合は <style> ~ </style> の間に記述する。 リセットCSS ブラウザの仕様で余計な余白や装飾がでるのを無くす為に記述する。 HTMLで使用している全ての要素を記…

border/padding/margin

border p { border: 1px solid #000; } ボーダーのスタイル・太さ・色を指定する「border-width」、「border-style」、「border-color」を合わせて 「border」プロパティにショートハンドで書ける。順番は任意「border」のみだとボックスの四方を囲う線にな…

HTML練習

http://efu.sakura.ne.jp/web/0320/ <html lang="ja"> <head> <meta charset="utf-8"> <title></title> </head> <body> <h1>★うちのにゃんこ★</h1> <p>我が家のアイドル、にゃんこ達を紹介します!</p> <ul> <li>我が家のにゃんこ紹介</li> <li>飼い主紹介</li> <li>猫写真募集</li> <li>我が家のにゃんこ紹介</ul> <h3>●すばる(白キジトラ・オス)</h3> <p>目と耳が大きくてすばらしくイケメン。鳴き声も…</p></body></html>

HTMLでテーブル(表)を作る

http://efu.sakura.ne.jp/web/0319/ table(テーブル) HTMLで表を作る時に使う。 tr(Table Row) 1行でその中にthやtdを記述する。 th(table header cell) 項目名 td(Table Data) 内容。 <html lang="ja"> <head> <meta charset="UTF-8"> <title>HTMLでテーブル(表)を作る</title> </head> <body> <h1></h1></body></html>

HTML練習

http://efu.sakura.ne.jp/web/0318/index5.html <html lang="ja"> <head> <meta charset="UTF-8"> <title>石垣島観光ガイド</title> <head> <body> <h1>石垣島観光ガイド</h1> <p>石垣島は八重山諸島の中で一番大きな島で、沖縄で3番目に大きな島です。沖縄からは、空路で約1時間、沖縄より台湾に近く南に位置します。気候は亜熱帯気候で、1年を</p></body></head></meta></head></html>…

HTML基礎

リストタグ ul(unorderedlist/アンオーダーリスト) 順番が変わっても良い時に使う。 例: <ul> <li>リスト1</li> <li>リスト2</li> <li>リスト3</li> </ul> リスト1 リスト2 リスト3 ol(orderedlist/オーダーリスト) 順番が決まっている時に使う。1,2,3…と先頭に文字が入る。 例: <ol> <li>リスト1</li> <li></li></ol>…

HTML基本文書

HTML基本文書 基本的なHTML5のつくりはこのようになっています。 <html lang="ja"> <head> <meta charset="utf-8"> <title></title> </head> <body> </body> </html> →Document Type宣言。文書がHTML5で作成されたものであることを宣言。 大文字と小文字が混在しているのは、 HTML4.01 では大文字が原則で XHTML1.0 では小文字が原則で、 HTML5から…