webかたつむり ウェブデザインを勉強中 ウェブ初心者のおぼえがき

webかたつむり

ウェブデザインを勉強中

intern day2

  • フォルダ構造を直す
  • ルート上にファイルを展開しない。

f:id:ohta-felica:20160830222040p:plain

 

  • IE8以上対応させる案件はまだ多い。IE tester(win)



PSDでフォントを確認

  • MSGothic→font familyできちんと指定しなくてなならない。
  • 小塚などが使われているときは、画像として使用する前提であると考える。スライスして画像として処理する。
  • カンプのPSDファイルから計算でline-heightを求める。
  • 電卓持参!

reset CSS

  • YUI reset
  • Eric Meyers CSS Reset
  • 自分でカスタマイズする!

f:id:ohta-felica:20160830222751p:plain

 

HTML5 Reset Stylesheet | HTML5 Doctor

 

/* 
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com
Twitter: @rich_clark
*/


html
, body, div, span, object, iframe,
h1
, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr
, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small
, strong, sub, sup, var,
b
, i,
dl
, dt, dd, ol, ul, li,
fieldset
, form, label, legend,
table
, caption, tbody, tfoot, thead, tr, th, td,
article
, aside, canvas, details, figcaption, figure,
footer
, header, hgroup, menu, nav, section, summary,
time
, mark, audio, video {
    margin
:0;
    padding
:0;
    border
:0;
    outline
:0;
    font
-size:100%;
    vertical
-align:baseline;
    background
:transparent;
}

body
{
    line
-height:1;
}

article
,aside,details,figcaption,figure,
footer
,header,hgroup,menu,nav,section {
    display
:block;
}

nav ul
{
    list
-style:none;
}

blockquote
, q {
    quotes
:none;
}

blockquote
:before, blockquote:after,
q
:before, q:after {
    content
:'';
    content
:none;
}

a
{
    margin
:0;
    padding
:0;
    font
-size:100%;
    vertical
-align:baseline;
    background
:transparent;
}

/* change colours to suit your needs */
ins
{
    background
-color:#ff9;
    color
:#000;
    text
-decoration:none;
}

/* change colours to suit your needs */
mark
{
    background
-color:#ff9;
    color
:#000;
    font
-style:italic;
    font
-weight:bold;
}

del {
    text
-decoration: line-through;
}

abbr
[title], dfn[title] {
    border
-bottom:1px dotted;
    cursor
:help;
}

table
{
    border
-collapse:collapse;
    border
-spacing:0;
}

/* change border colour to suit your needs */
hr
{
    display
:block;
    height
:1px;
    border
:0;  
    border
-top:1px solid #cccccc;
    margin
:1em 0;
    padding
:0;
}

input
, select {
    vertical
-align:middle;
}
  •  ロールオーバーjs→ホバーしたら画像を入れ替える。
  • ****_on.jpg  ****_off.jpgをいれかえる。

インデントなど入力補助

そのほか

  • 囲み記事のフレーム高さを「固定値」にしない。融通が利くようにしておく。
  • 意味のない画像(アイコンなど)をimgにしない。
  • backgroundにして、paddingで文字との間隔を調節。
  • background-positionはx, yの順番。