WEBデザインの勉強

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

CSS

Photoshopで文字の様々な数値をCSSの値に変換

参考: プロなら知っておきたい!Photoshop文字設定とCSSプロパティの相互関係 | それからデザイン スタッフブログ font-sizeの値をemに変換する Photoshopのフォントサイズ(px)÷ HTMLでの親要素のフォントサイズ(px) 行送りの値をline-heightの値に変換…

文字の2行目以降を字下げする

CSS

「※」や「・」、「☆」等が文字の先頭にきた時に 2行目以降を字下げすると読みやすい。 <p>・テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入りま</p>…

footerを常に最下部に置く方法

参考サイト coliss.com デモはこちら http://efu.sakura.ne.jp/web/footer/ HTML <html lang="ja"> <head> <meta charset="utf-8"> <title>footerを最下部に置く</title> </head> <body> <main> </main> <footer> </footer> </body> </html> CSS html { min-height: 100%; position: relative; } body { margin-bottom: 100px…

YouTubeをレスポンシブデザインに対応させて埋め込む

HTML <div class="movie"> <iframe src="YouTubeの動画ソース"></iframe> </div> CSS .movie { position: relative; width: 100%; //動画の縦横比 padding-top: 縦幅 / 横幅 * 100; iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } } 親要素にposition: relativeでiframeにposition: absolute動画の…

HTMLやCSSを省略して書くことができるEmmet

Emmetとは HTML、CSSを省略して書くことができる。 導入方法 SublimeText2などのエディタにプラグインとして配布しているので インストールをする。 使い方 【SublimeTextの場合】 Emmetのコードを打ち、カーソルをコードの最後に置いた状態で 「Ctrl + e」…

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

display:table-cellを使ったタブパネル

デモはこちら http://efu.sakura.ne.jp/web/tab_2/ 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.11.1/jquery.min.js"></script> <script src="js/script.js"></link></meta></head></html>

display:table-cellを使って横並びにする

display:tablecellは要素をtableのtd(セル)として表示させるためのスタイル 特徴は ・カラム落ちしない ・全ての高さは一番高い高さと同じになる ・vertical-align:middleで上下中央に配置できる ・要素を均等に配置できる(スマートフォン対応に向いている) <html lang="ja"></html>…

Bootstrap

Bootstrapとは CSSのフレームワーク。 あらかじめある程度CSSが定義されていて、用意されているクラス名を付けるとスタイルが適用される。 h1やh2、blockquote、preなどの要素にもスタイルが指定されているので クラス名を指定しなくてもスタイルが変わる事…

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

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

ベンダープレフィックス

CSS

ベンダープレフィックス(接頭辞)とは、CSS3で採用される予定の機能(草案段階) の仕様を先行実装する場合、拡張機能であることを明示するためにつける。 主要なベンダープレフィックス moz- Firefox webkit- Google Chrome、Safari o- Opera ms- Internet…

positionの練習

CSS

http://efu.sakura.ne.jp/web/position/ width100pxheight100pxのdivを6個作り #containerの 1左上 2右上 3左下 4右下 5真ん中 6真ん中より50pxずつ下 に配置する。 <html> <head> <meta charset="utf-8"> <title>positionの復習</title> <style> #container { width: 800px; height: 600px; margin: 50px aut</meta></head></html>…

Illustratorでロゴを作成しpositionで配置

http://efu.sakura.ne.jp/web/penguincafe/ <html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="css/style.css"> <title>ホーム | Penguin Café</title> </head> <body id="home"> <div id="container"> <div id="header"> <h1></h1> <p class="logo"><a href="#"></a></p></div></div></body></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>

CSSでグラデーションの練習

CSS

<html> <head> <meta charset="utf-8"> <title>CSSでグラデーションの練習</title> <style> .box { width: 300px; height: 100px; margin: 10px; } .one { background: -webkit-linear-gradient(left, red, blue 50%, green 100%); background: linear-gradient(to right, red, blue 50%, green 100%); } .two { back</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>

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でナビゲーションボタンの画像を作る。ポイント新規オブジェクトをピクセルに整合 ピクセルプレビュー 線を内側…