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

webかたつむり

ウェブデザインを勉強中

2016-05-25から1日間の記事一覧

rwd 2 column layout その3

全く同じ手順で、スマホ用。767pxが、ブレイクポイント。 overflow: inherit;がなにもしないデフォルトの状態。 @media screen and (max-width: 767px){ #container{ width: 98%; padding: 1%;}#header{ margin-bottom: 1%;}#nav{ margin-bottom: 1%;}#wrapp…

rwd 2 column layout その2

その1 のCSS に以下のコードを書き足します。 containerの幅はbodyに対しての割合。 containerの中にある要素の幅は、containerの幅=940pxに対する割合で指定する。 要素の上下につくpadding marginの大きさも、親要素の横幅に対する割合で指定する。つまりp…

rwd 2 column layout その1

色と、幅、高さを指定して、#wrapperで囲んで、中の#mainと#side をfloat で並べた状態。 #main はfloat: left; #sideはfloat: right; にしておく。rwdの時は両方ともfloat: left; にするよりも、この方が都合がいいのかもしれない。 (本日の気付き)#conta…

rwd - responsive web design その2

メディアクエリー @media screen and (max-width: px){}(どこにスペースを入れるのか細心の注意を払う)間違えると機能しない。 波括弧の中に、指定した条件の場合のスタイルシートを書く。 ブレイクポイントとは、スタイルを変えるポイントのこと。 今回の…

rwd - responsive web design その1

レスポンシブデザイン SmartPhoneにどう対応させるか。SPできちんと見えているか? モバイル版googleで検索すると、”スマホ対応”と表示されるサイトがある。 どうすれば、”スマホ対応”になるのか? googleのmobile friendly test に合格すればよい。 https:/…

tab panel 手順2

<script>$(function(){ $('#panel li').hide(); $($('#tab>li a.selected').attr('href')).show(); });</script> $('#panel li').hide(); パネルの li をすべて隠す $($('#tab>li a.selected').attr('href')).show(); ul(#tab) 子供の li の.selectedの<a>のhref属性=つまり「#t</a>…

tab panel 手順1

タブパネルを作る 手順1 ulを2組、id をそれぞれ'tab'と'panel'にする。そして2つのul をcontainerで囲う。 ul #tabの li に<a href="#tab1">を書き足す。 ul#panelの li に id=tab1 をくわえる。 ここが仕掛けの肝です。 <body><div id="container"><ul id="tab"><li><a href="#tab1">html</a></li><li><a href="#tab2">css</a></li><li><a href="#tab3">javascript</a></li><li></li></ul></div></body></a>

insertBefore before insertAfter after

$('A').insertAfter('B'); AをBの後ろに挿入。B,Aの順番。 $('A').After('B'); Aの後ろにBをおく。A,Bの順番。 beforeとinsertBeforeも同じ関係 <html lang="ja"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>jQuery</title><style>html, body, p, ul, li, button{ margin…</meta></meta></head></html>