WEBデザインの勉強

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

CSS

メディアクエリ(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>

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>

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>

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になっている。常にブラウザの左下にいてかつスクロールしても…

CSS Spriteでナビゲーションボタン

CSS Sprite(スプライト)とは…画像の一部を見せ、画像を移動しながら変化したように見せる手法。 http://efu.sakura.ne.jp/web/0414/ Illustratorでナビゲーションボタンの画像を作る。ポイント新規オブジェクトをピクセルに整合 ピクセルプレビュー 線を内側…

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

http://efu.sakura.ne.jp/web/0326/ 擬似クラス aタグにつけることができる擬似クラスで オンマウス等の時のスタイルを指定することができる。 link 未訪問のリンク visited 訪問済み hover 要素にカーソルが乗った状態(クリックはしてない) focus フォー…

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」のみだとボックスの四方を囲う線にな…