1.CASCADING STYLE SHEET
2.文書の見栄えを表す
3.CSS言語
CSS 150種類くらいある
htmlのheadの中にCSSの参照を書く
タイトルタグの後
<link href=”style.css” rel=”stylesheet”>
これがスタイルシートには必須 これは覚える
ブレース
{}
セレクター プロパティー 値
h1{color:red;}
cssでコメントを打つと便利
メモ書き無視してくれる
/*********** ここから色編集 ***********/
/* タイトルカラー */
h1{color:#ffff00;}
/* ×××× */
×ところにコメントを打つ。
背景色
background-color
bodyをセレクタにして、background-color背景色を設定すると頁全体の色が指定できる。
CSSでは、同じセレクタでは下に書いてあるものが優先される
バランスを崩さず明るくしたい白が一番明るい
緑 ＃００ff００
＃７７ff７７
コーディングは分かりやすくする。
このようにするとわかりやすい
p{
background-color:#efe;
color:#0f0;
}
<div id=”first”>
</div>
div#first{××:××;}
字下げの時にemを良く使う。
emちょうど一文字分なので
letter-spacing:20px;
文字と文字の間の間隔
アラインは見栄えなので必ずCSSに入れる。
見栄えに関してはCSSに入れる
html5ではデザインはhtmlであらわさないので、デザインはすべてcssであらわすように推奨されている。
css
ht,td[]カンマで区切ると同じ指定を両方に出来る
cssは
background-image等
カンマで区切るといくつでも指定できる。
これすごい
p#pan{text-align:right;}
<p style=”text-align:right;”>これは試しなら良いと思う。
上記のように記載するとcssより優先されてしまい、後での編集が難しくなるので、基本的にcssに記載するようにする。
imgはインライン要素なので単独では使わないとHTMLでは使用に書いてある。
単独でインライン要素は使わない
strongは重要な語句の時に使う
ただ見栄えで太くしたいとかであればspanを使う。
リンクの色を変えたい、
リンクの下線を無くしたい場合
cssで
セレクタはaで指定する{}
background-color:”f00;
background-image:url(img/tsukushi.jpg);
background-repeat:no-repeat;
background-repeat:repeat-x;
background-repeat:repeat-y;
ht,td[]カンマで区切ると同じ指定を両方に出来る
background-image等
カンマで区切るといくつでも指定できる。
これすごい
bodyにidやクラスなどを設定して子孫セレクタを使うと良い。
overflowhiddenの親要素とULとLiどちらにCSSを設定する。
親要素というのは単純に上にあるものではなくて、包んでいるもの。
div.footerの親要素はwrapper。
luとli等親子関係であるものは、利くが、liとaなど親子関係でないものの場合は利かない。
親要素にかけても子要素にかけても利くが、親子関係でないliとaなどは
利かない。
imgにfloatかけると段々になる。
overLayerに対して
top:50%;縦方向で常に中心に配置する
legt:50%;横方向で常に中心に配置する
floatの場合は横のマージンが相殺されない
スタイルシートの優先順位 直接、ヘッダーの中、外部
インラインブロックインライン要素とブロック要素の良いとこ取り
cssで
display:inline-block;
インラインは幅と高さがなくなっちゃう
cssを記入する場合の注意
下が優先の他に
cssでは階層が深いほうが優先になる
こっちが優先div#container>#container
2014年11月23日 12:24 AM|
カテゴリー：未分類|
コメント(0)
1.HYPER TEXT MARKUP LANGUAGE
2.文書の構造を表す
3.HTML言語（タグで印をつける）
HTML 100種類くらいあるが、
10から20覚えればＯＫ
1.2.3.4.5
4.5の間にXHTMLがある
XHTMLは勉強しないで良い。
どうしたらいいか？
内容が伝わればいいので、内容が伝わるものを作れれば
ＨＴＭＬ４でもＯＫ。
ヘッディング
<h1>～<h6>まで
開始タグ終タグで囲む
山括弧
<p> 内容とか要素内容という </p>
開始タグ終了タグ要素内容、これらの全体のことを要素という
<p></p>
パラグラフ
段落
htmlファイルに変える。
名前をつけて保存で変える。.html
HTMLは重要度順に上から書く。
自分のコメント入れられる
<!–×× –>こうするとブラウザでは表示しない。
自分のメモで使える。
コピーライトCopyrightは著作権のこと 小さく書く
Xhtml<address></address>連絡先が開く
html5では<small></small>タグを使う
©
&××;こうする事で丸cとする。
divに属性 属性値をつける
id属性をつけることで分けることができる
first,second,thirdじゃなくて、文字プラス数字なら１，２，３でもOK
htmlのimgタグの中のwidthとheightにはpxピクセルであれば単位を入れない
HTML5のマークアップ 日付があるのでarticleが良い
background-position:30px;
background-position:にはピクセルも指定できる。
2014年11月23日 12:23 AM|
カテゴリー：未分類|
コメント(0)
web dedeloperツールの
色を調べるcolorzia
web dedeloperツールのその他のルーラーで
幅や高さを調べることが出来るルーラー
キャプチャのアドオンを入れる
ファイヤーフォックスのカメラマーク
pearl crescentのいい所、画面に見えてないところも一枚の画像に出来る。
ページ全体を画像として保存を選ぶ
IE tester
google
拡張機能RSS Subscription Extension（by Google）
fire fox
RSS Icon in url bar 1.5
RSSは購読登録することでサイトの更新をお知らせしてくれる機能。
snipping tool使える
動画の場面を画像で切り取る
firebug要素の検証で最高
2014年11月23日 12:16 AM|
カテゴリー：未分類|
コメント(0)
１００％同じで見れるのは画像しかない。
画像はすべてのブラウザで同じように表示される
ファイル名は必ず半角英数で作成する。
日本語のファイル名だとサーバーで文字化けしてしまう。
wordpressでも日本語のimgファイルが読み込まれなかった。
サイトを作るときには、見た目のビジュアルイメージを考える。
ちゃんとすでにファイルが出来ていれば、＃ハッシュマークじゃなくてwhite.html（ファイル名を<a>タグの属性値としていれるが、ないので仮にリンクの状態を表す＃をいれる。
HTML5文書をより明確化する方針
パンくずリストは<p>タグでくくる。
一昔前まではウェブの横幅８００が多かったが、最近は１，０００前後が増えている
idは一個しか使えないので、複数色とかを変えたい場合は
複数使えるclass属性を使う。
HTML
<span class=”red”>色を変えたい文字</span>
<span class=”blue”>色を変えたい文字</span>
CSS
spanを分けるのは＃マークじゃないので気をつける
span.red{
color:red;
font-size:25px;
}
span.blue{
color:blue;
font-size:25px;
}
windows
ゴシック 可視性が高い 目立つ
apple
明朝 可読性が高い 読みやすい
と勝手に表示されてしまうので、字体を設定した方が良い
画像を貼るにはHTML imgを使うとCSS backgroundを使うと二通り貼り方がある
HTML構造的に必要な画像、画像の存在が必要
CSS飾り
画像は通常クリックすれば、幅と高さがわかるがもしわからなければプロパティの詳細で確認する。
bodyの高さを設定しないとbackground-positionのbottomは使えない
background のbottomは高さを指定しないと駄目
高さを下のように設定するとbottomが使えるようになる。
html{
height:100%;
}
SEO上はあまり意味はないが見栄え上は非常に効果的
bodyの中身をすべてdivで囲む
wrapper＝ラッパー 全体を囲む
よく使うidの名前。何でも良いが。
bodyにwidthで幅の設定がが利いてるとdivでwrapperかけても利かない
ＳＥＯ対策上
サイトのキーワード説明は変える必要があれば
変えたほうが良い。
リンゴのサイトなら、トップページと効能のページでページの伝えたい要素が少し違うので。
メーラー
ＣＧＩ(プログラム言語）サーバー上でしか動かない。サーバーによっては使えないサーバーもある
ＰＨＰ
掲示板はＣＧＩプログラム
カートもＣＧＩプログラム
ＨＴＭＬで画像を入れる場合
画像を要素として入れる
img
p#img1 img{}
p#img2 img{}
CSSで画像を入れる場合
背景として入れる
画像に枠を入れる方法として
画像にborderで 5pxでもbackground-color＋padding 5pxでも一緒の効果
ドリームウィーバーのバリデートでミスがわかる
w3c css でＨＴＭＬもＣＳＳもチェックできる
チェッカー塗りをパターンで塗る
文字数を数えてemを使うのは良い
google mapの地図の埋め込みで作れるソースは下記になるが、iframeタグはインライン要素なので、pタグで囲む
<p><iframe
背景画像を入れてそこに画像を入れるとディセンダーが問題となる。
これを解決するには、
imgに{vertical-align:bottom;}を設定し、背景色にを画像の高さに合わせることができる。他にmiddleとTopがある。
iosアイフォンでもみれるようにgoogleでswiffyを検索swiffyの画面。参照でフラッシュで作成したswfファイルを選択する。そして、下の方に出てくるhtmlファイルを右クリックで保存する。３D回転はうまく出ない。
java scriptで書き出されるが、headが重くなるので、外部ファイルにscriptを書き出す。
このswiffyでjava scriptで書き出せば、swfファイルは一緒にあげなくて良い
firefox アドオン web developerツールを入れる
cssでcssを無効化して、文書構造を確認する。
web dedeloperツールの色を調べるcolorzia
web dedeloperツールのその他のルーラーで
幅や高さを調べることが出来るルーラー
クローラーは画像は持っていかない。
cssスプライトで説明している。
h1とナビは画像にしない方が良い
h1とナビは文字で作る
下記のように見えなくしてしまうか、positionで飛ばしちゃう。
そして下記を入れる。
３つはセット
text-indent:100%;
white-space:nowrap;
overflow:hidden;
下は一個
text-indent:-9999px;
または、h1を目立たないように右上に小さく配置する。
リセットとノーマライズは一緒には使わない。
ノーマライズが主流となりそう。
スタイルシートの優先順位 直接、ヘッダーの中、外部
class名を区切る時はスペースで区切る。
ID名はjQueryに取っとくのが主流
グーグルはレスポンシブデザインを推奨している。
日本の半分以上はIEを使っている。
ブログ、人をひき付けるものを集中的に紹介する
css3 AE パララックスを使うと３Ｄっぽい空間を演出できる。
html5アウトライナー
https://gsnedders.html5.org/outliner/
文字化けするなら、ファイルの参照をする。
navは今のところuntitled sectionでしょうがない。
スマホとかは既にモダンブラウザが使われているHTML5 CSS3
HTML5リファレンス
http://www.htmq.com/html5/
縦長のパララックスのページにするなら、ナビゲーションは固定で常に表示する
モニターのサイズは16対9
大きいサイズの画像を1600×900にする。
サイズが1600より小さい場合はちゃんと計算して16対9にする
画像には必ずvertical-align:bottom;を設定する。
ディセンダーが入ってしまうので。
スマホのボタンサイズを44px×44pxにガイドラインで推奨
レスポンシブデザインにするなら、固定で作る。
svgデータはベクトルデータなので劣化しない。拡大しても
svgデータをテラパッドで
svgイラスト集で検索する。
日本語は、明朝とゴシックでOK。
有料フォントは必要ない
ハーゲンダッツ
クローム
要素の検証。
携帯サイト見える。
動画を色んなデバイスで見せたい場合はyoutubeが一番良い
タイムラプス動画
today.izmaker.com/blog/life/5584/
モックアップはスマホの見え方を出す方法
アスキーのwebプロフェッショナルの記事は勉強になる
ゼロからはじめるレスポンシブWebデザイン入門すごい参考になる
http://ascii.jp/elem/000/000/700/700611/
ミラーサイトは絶対駄目
閉じてしまっているタブパネルにはページ内リンクは行かない。
縦書きfirefoxは対応していない
ジャバスクリプトで右クリックさせないようにしているものは、古いブラウザ使ってジャバスクリプトOFFにしちゃえば右クリック出来ちゃうので、どんなサイトもパクることができる
画像の色を変えたい場合は、photoshopの色相彩度で、色彩の統一にチェック入れて色を変えちゃう。
どっかから、持ってきた画像をそのまま使うのはって言う場合にこれを使う。
メアドは必ず画像で載せる。絶対。
alt属性入れない方が良い場合。
意味のないものには画像を入れなくても良い。
2014年11月23日 12:16 AM|
カテゴリー：未分類|
コメント(0)
