WEBの勉強～HTML5/CSS3～
こんにちは！！ メグルです！！
今日は、昨日の続きです。
専用サイトのデバイスによる振り分け方。
javasqript
ボタンでスマホサイトはこちら
メディアクエリ
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>無題ドキュメント</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="header">header</div>
<div id="main">main</div>
<div id="sidebar">sidebar</div>
<div id="footer">footer</div>
</body>
</html>
@charset "utf-8";
body {
width: 960px;
margin-top: 0px;
margin-left: auto;
margin-right: auto;
}
#header {
background-color: #AAAAAA;
margin-top: 20px;
clear: both;
text-align: center;
height: 50px;
}
#main {
background-color: #AAAAAA;
width: 640px;
margin-top: 20px;
margin-bottom: 20px;
float: left;
text-align: center;
height: 50px;
}
#sidebar {
background-color: #AAAAAA;
float: right;
width: 300px;
margin-top: 20px;
margin-bottom: 20px;
text-align: center;
height: 50px;
}
#footer {
background-color: #aaa;
margin-top: 20px;
margin-right: 0px;
margin-left: 0px;
text-align: center;
height: 50px;
clear: both;
}
・Fluid Grid 流体
・Flexible Image
・Media Queries
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>無題ドキュメント</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="header">header</div>
<div id="main">main</div>
<div id="sidebar">sidebar</div>
<div id="footer">footer</div>
</body>
</html>
@charset "utf-8";
body {
padding: 1em;
color: #fff;
}
#header, #main, #sidebar, #footer {
padding: 1em 0;
background-color: #AAAAAA;
text-align: center;
}
#header, #footer {
}
#header, #main, #sidebar {
margin-bottom: 1em;
}
#header {
margin-bottom: 1em;
padding: 1em 0;
text-align: center;
}
#main {
width: 66.67%;
float: left;
}
#sidebar {
float: right;
width: 31.25%;
}
#footer {
clear: both;
}
960pxを100%として、
640pxは、６４０を９６０で割る。
６６．６６６６６になる。
300pxは３１，２５と割り切れる。
このように絶対値で指定するのではなく、デバイスによって、ｐｘは違うけど、％で表せば同じになる。
・Fluid Gridは相対値で表すということ。
１emとは、親要素の文字の幅。
文字は大きさを指定していないと、１６ｐｘです。
img {
max-width: 100%;
}
eri
画像も％で指定する。
これが、フレキシブルイメージです。
それから、このサイトの幅は、見てるデバイスの幅にします！！ということをheadに書かなければいけない。
<meta name="viewport" content="width=device-width">
このサイトの幅は、見てるデバイスの幅に合わせます！！ということ！！
これだけだと不安なので、したのを付け足す。
<meta name="viewport" content="width=device-width, initiai-scale=1.0">
これはただ、小さくすのではなくて、○○ｐｘになったらレイアウトを○○のように変更できますよ！というやり方。
firefoxの設定→開発ツールから、レスポンシブデザインビュー。
次に、media queries
iphone6の750pxを境に変える。少し余裕を持たせて770px
<link href="style_s.css" rel="stylesheet" type="text/css" media="screen and (max-width: 770px)">
上が、スマホ用のスタイル
下が、パソコン用のスタイル
<link href="style_l.css" rel="stylesheet" type="text/css" media="screen and (min-width: 771px)">
そして、もう一つ振り分ける方法があります。
一つのスタイルシートで書く方法です。
@media screen and (min-width:771px){
#main {
width: 66.67%;
float: left;
}
#sidebar {
float: right;
width: 31.25%;
}
}
771px以上の時に表示させたい時は、
@media screen and (min-width:771px){
}
で囲う。
770と771の切り替える部分のをブレイクポイントというらしいです。
このブレイクポイントは流行で年々変化してて行くものである。
明日は、Sassをやるんですが、
・Ruby
・Koala
Koala - a gui application for LESS, Sass, Compass and CoffeeScript compilation.
をインストールしておく必要がある。
自分で何かを調べておきましょう。
Web制作者のためのSassの教科書 これからのWebデザインの現場で必須のCSSメタ言語
- 作者: 平澤隆,森田壮
- 出版社/メーカー: インプレスジャパン
- 発売日: 2013/09/13
- メディア: 単行本（ソフトカバー）
- この商品を含むブログ (1件) を見る
WEBの勉強～HTML5/CSS3～
こんにちは！！ メグルです！！
今日はやることは、スマホサイトをつくる！！ です。
pc→５３００万人が現在は→350万人
スマホ→1100万人が現在は→4000万人
最近は、リッチデザインからフラットデザインに流行が移行している。
スマホサイトの特徴
・縦長
・見やすい
・文字が大きく、少ない
・余白が多めでボタンが大きい
・文字などのコントラストが強め
・フラットデザイン
・彩度が低め
Bootstrap · The world's most popular mobile-first and responsive front-end framework.
Video Editing By Magisto | An Automatic Online Video Editor
スマホサイトの作り方
・レスポンシブデザインで作る
・スマホ専用サイトを作る
レスポンシブデザインは結局一つのサイトが小さくなるだけだから、内容が変えられない。
専用に作れば、スマホでみるユーザーを中心としたパソコンサイトでいらない内容を省いたりしてサイトを作ることができる。
sass
less
爆捗！ WordPressテーマ作成ショートカット（3）：CSSコーディングで泣かないためのSassの基礎知識と10の利点 (1/3) - ＠IT
UI→ユーザーインターフェイス
UX→ユーザーエクスペリエンス
文字の代わりに図を入れる。
スマホ専用サイト
全てのブラウザでも見栄えをそろえる。
・プログレッシブエンハンスメント
・グレイスフルデグラデーション
HTML5&CSS3入門 第6回 Graceful DegradationとPolyfill | デベロッパーセンター
午後は、サイト、ポートフォリオサイト制作。
WEBの勉強～HTML5/CSS3/Dremweaver～
こんにちは！ メグルです！！
金曜日の復習。
dreamweaverを使うと、打ち間違えや、打ち忘れを少なくすることができる。
また、cssデザイナーを使うと、コーディングをしなくてもスタイルが出来てしまう。
サイトの定義
htmlの入力
画像の挿入
リンクのつけ方
文字のcss
ブロックレベル要素とインライン要素の違いは、
ブロックレベル要素は端から端までが<h1>なので次の言葉は改行される。
それをstyleで変えられる。
インライン要素は変えられる。
参考サイトはこちら
あくまでブロックレベル要素は端から端まで。
ボックスモデルの参考サイトはこちら
ボックスモデル｜CSSの基本｜CSS HappyLife ZERO
表示→スタイルレンダリング→スタイルを表示のチェックを外すとcssが効かなくなる。
ｃｓｓデザイナーの挿入
wrapperは必ず
widght
margin-left:auto;
margin-right:auto;
を記入する。
と書く。
挿入→構造→ヘッダー
とすると、
このようにコーディングされる。
上の挿入→イメージ→イメージでロゴを入れる。
（文字は消した）
次はメニューを作成
イメージ→イメージで画像を挿入
これをすべてドラックして、プロパティのリストを押すと全て、箇条書きになる。
要するに
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
が自動生成されるということですね。
altタグを画像を選択して、代替に記入。
次にサブメニューの作成
挿入→divでsubmenuで生成
次にセクションを作成する。
そして、うえの挿入→構造→セクションでtodayspastaを入れる。
ここに<h2>を入れる。
次にdivでpastatextを生成。
ここまで。
次に、記事→enter、そして<h2>で、中に画像を挿入する。
その下に書き込み、2行の文字をリストにする。
次に、couponを生成
次に下に、divで挿入→
そして、クーポンからクッキングまでを、
<aside>で囲う。
最後にfooterの作成
挿入→文字→著作権
そして画像にaltを入れる。
次にスタイル
まずはリセット
セレクターに,
body,h1,h2,h3,h4,ul,liを追加して、paddingとmargin を０（ゼロ）に設定する。
次にセレクターにbodyを追加
背景を付けていく。
次にwrapperを追加
margin
background
を指定する。
WEBの勉強～HTML5/CSS3/Dremweaver～
こんにちは、メグルです。
今日は、dreamweaverです。
cssデザイナーというものを使うとコーディングが倍くらい速くなる。
デザインで打つと、コードに反映されている。
shift+enterで改行
デザインでenterを押すと段落になる。
デザインで、フォーマットから見出しを変更できる。
読者サポート | DreamweaverレッスンブックCC対応 | ソシム
画像の挿入は、イメージ→イメージでファイル選択。
上に記入するとaltに記入される。
画像にリンクを貼る方法はこちら
今のサイトから違うサイトで新しいタブで開くときに使う
が自動で挿入されるとても便利な機能です。
次は、文字のリンクは、
文字を選んで、
リンクに画像や、ファイルをドラッグするとリンクされる。
ターゲットもここからやると、コードのミスなく確実に新しいタブのソースができるので便利ですね！
次にメールのリンク！！
挿入→電子メール挿入
そうすると、
上のようになって、メーラーが立ち上がるようになります。
次にｃｓｓデザイナーの使い方について学びます。
ウィンドウ→ｃｓｓデザイナー
まずは、h1の文字の上にカーソルを
次に、style.cssえをクリック
セレクタのプラスマークを押す
そしたら、body～が出てくるのでそこでenterすると、プロパティが出てくる。
で勉強会に参加するととても勉強になる。
.redを、セレクターのプラスを押して、追加出来る
ここをredにすると、
赤くなる。
明日は、ここまでの知識は最低限必要なので、完璧にしておく。
午後は演習の時間！！
WEBの勉強～HTML5/CSS3/～
こんにちは、メグルです。
今日はCSS3をやるそうです。
参考サイト
<body>
<div class="hako"></div>
</body>
</html>
.hako {
width: 200px;
height: 200px;
background-color: #8B0079;
position: absolute;
top: 30%;
left: 40%;
box-shadow: 2px 2px 2px #aaa;
border-radius: 20px;
border: 2px solid #000;
}
#000000
赤緑青
0~9 abcdef →１６進数
border-radius: 20px;
border: 2px solid #000; を追加すると、
後は、一つの角だけを指定して角丸にもできる
border-radius: 20px 30px 50px 70px;
border: 2px solid teal;
.hako {
width: 200px;
height: 100px;
background-color: #8B0079;
position: absolute;
top: 30%;
left: 40%;
box-shadow: 2px 2px 2px #aaa;
border-radius: 30px 0 0 30px;
border: 2px solid teal;
}
透かす
<div class="pic"><img src="../img/nozomi.png"></div>
.pic {
position: absolute;
top: 30%;
left: 40%;
opacity: 0.5;
}
<div class="hako">あっち</div>
<div class="hako2">こっち</div>
.hako {
text-align: center;
line-height: 60px;
width: 200px;
height: 60px;
background-color: #fff;
position: absolute;
top: 30%;
left: 40%;
font-size: 30px;
box-shadow: 2px 2px 2px #aaa;
border-radius: 30px 0 0 30px;
border: 2px solid teal;
}
.hako2 {
text-align: center;
line-height: 60px;
width: 200px;
height: 60px;
background-color:rgba(0, 128,128,0.5);
position: absolute;
top: 30%;
left: 62%;
font-size: 30px;
box-shadow: 2px 2px 2px #aaa;
border-radius: 0 30px 30px 0;
border: 2px solid teal;
}
次にグラデーション
<div class="hako3">そっち</div>
.hako3 {
position: absolute;
top: 300px;
left:300px;
border: 2px solid #eee;
background: linear-gradient(white,gray);
width: 200px;
height: 200px;
color: #fff;
}
参考サイト
自分でグラデーションを作成するのは大変なので参考サイトなどを上手く使う
検索→CSS3 グラデーション ジェネレーター
Ultimate CSS Gradient Generator - ColorZilla.com
css3 ホバーした時に画像が回転
[CSS]コピペでOK！画像のホバー時用のかっこいい新しいエフェクトのまとめ | コリス
WEBの勉強～HTML5でのformの作成方法/CSS3/～
こんにちは、メグルです！
css3
a:hover {
opacity:0.7;
}
矢印が重なった時に、３割透けますよってことになります。
次に、数字に黒を囲むコードです。css3で書くと下のようになります。
text-shadow: #3D1117 2px 2px 0px, #3D1117 -2px 2px 0px, #3D1117 2px -2px 0px, #3D1117 -2px -2px 0px;
それから、
htmlが↓
| <div id="footer"> | |
| <img id="facebook" src="images/footer.jpg" alt="facebook"> | |
| <p id="tel2">045-322-9727</p> | |
| <p id="add">横浜市西区南幸町2-14-9<br>西口明和ビルB1</p> | |
| <address>c2015 TAVERN All Right Reserved.</address> | |
| </div> |
styleがした
#footer {
position:relative;
color:#fff;
clear:both;
height:88px;
/* Firefox v3.6+ */
background-image:-moz-linear-gradient(50% 0% -90deg,rgb(48,11,19) 0%,rgb(106,36,37) 29%,rgb(217,109,0) 100%);
/* safari v4.0+ and by Chrome v3.0+ */
background-image:-webkit-gradient(linear,50% 0%,50% 206%,color-stop(0, rgb(48,11,19)),color-stop(0.29, rgb(106,36,37)),color-stop(1, rgb(217,109,0)));
/* Chrome v10.0+ and by safari nightly build*/
background-image:-webkit-linear-gradient(-90deg,rgb(48,11,19) 0%,rgb(106,36,37) 29%,rgb(217,109,0) 100%);
/* Opera v11.10+ */
background-image:-o-linear-gradient(-90deg,rgb(48,11,19) 0%,rgb(106,36,37) 29%,rgb(217,109,0) 100%);
/* IE v10+ */
background-image:-ms-linear-gradient(-90deg,rgb(48,11,19) 0%,rgb(106,36,37) 29%,rgb(217,109,0) 100%);
background-image:linear-gradient(180deg,rgb(48,11,19) 0%,rgb(106,36,37) 29%,rgb(217,109,0) 100%);
-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff300b13,endColorstr=#ffd96d00,GradientType=0)";
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff300b13,endColorstr=#ffd96d00,GradientType=0);
}
#facebook { position:absolute; top:0; left:0; } #tel2 { font-size:64px; font-weight:bold; text-shadow: #000 2px 2px 0px, #000 -2px 2px 0px, #000 2px -2px 0px, #000 -2px -2px 0px; position:absolute; top:16px; left:100px; line-height:100%; } #add { text-align:right; font-size:12px; position:absolute; top:18px; right:38px; } address { font-size:14px; position:absolute; top:55px; right:38px; font-style:normal; }
フロートでのやり方と、ポジションでのやり方があるが、今回はポジションでのやり方。
position :relative 相対
:abosolute 絶対位置
:fixed 固定
:static 通常
使い方をどうするか！！
親要素であるfooterに,
position:relativeをかけて、動かしたい、
#facebookなどに、
position:absolute;をかけて、動かすことができます。
fixdは、例えばコンテンツを下にスクロールしてもサイドバーは動かさないなどをしたいときには、
fixdを使うと良いです。
formとは、
<html>
<body>
<form id="nanka">
名前:<input type="test" name="name"><br>
メールアドレス:<input type="emai" name="mail"><br>
電話番号:<input type="tel" name="denwa"><br>
性別:男<input type="radio" name="seibetu" value="otoko">
女:<input type="radio" name="seibetu" value="onna"> <br>
血液型 :
<select name="ketueki">
<option value="A型">A型</option>
<option value="B型">B型</option>
<option value="O型">O型</option>
<option value="AB型">AB型</option>
</select><br>
一言どうぞ:<input type="text" name="hitokoto">ここに一言書いてください</textarea>
<p>
<input type="submit" value="送信"><input type="reset" value="リセット">
</p>
</form>
</body>
</html>
最後の</textarea>だけが閉じタグがある！！
http://www.htmq.com/html5/005.shtml
<html>
<body>
<form id="nanka">
名前:<input type="test" name="name"><br>
メールアドレス:<input type="emai" name="mail"><br>
電話番号:<input type="tel" name="denwa" placeholder="例：090-0000-0000"><br>
性別:男<input type="radio" name="seibetu" value="otoko">
女:<input type="radio" name="seibetu" value="onna"> <br>
血液型 :
<select name="ketueki">
<option value="A型">A型</option>
<option value="B型">B型</option>
<option value="O型">O型</option>
<option value="AB型">AB型</option>
</select><br>
一言どうぞ:<input type="text" name="hitokoto" placeholder="">ここに一言書いてください</textarea>
<p>
<input type="submit" value="送信"><input type="reset" value="リセット">
</p>
</form>
<img src="gazoupe"">
<input type="text" form="nanka">
</body>
</html>
placeholder="例：090-0000-0000"はhtml5からできるようになったらしいです。便利ですね。しかも、javascriptを切っている人でもしっかり表示されますのでいいでよね！！
最低限、サイト制作する際は、javascriptがなくても意味のある制作が必要だと先生が言っていました。
午後は、ポートフォリオサイトをどのようなサイトを作るのかを考えてから、
デザインのカンプ制作をｆｗなどを使用してやる。
