2016-05-25から1日間の記事一覧
全く同じ手順で、スマホ用。767pxが、ブレイクポイント。 overflow: inherit;がなにもしないデフォルトの状態。 @media screen and (max-width: 767px){ #container{ width: 98%; padding: 1%;}#header{ margin-bottom: 1%;}#nav{ margin-bottom: 1%;}#wrapp…
その1 のCSS に以下のコードを書き足します。 containerの幅はbodyに対しての割合。 containerの中にある要素の幅は、containerの幅=940pxに対する割合で指定する。 要素の上下につくpadding marginの大きさも、親要素の横幅に対する割合で指定する。つまりp…
色と、幅、高さを指定して、#wrapperで囲んで、中の#mainと#side をfloat で並べた状態。 #main はfloat: left; #sideはfloat: right; にしておく。rwdの時は両方ともfloat: left; にするよりも、この方が都合がいいのかもしれない。 （本日の気付き）#conta…
メディアクエリー @media screen and (max-width: px){}（どこにスペースを入れるのか細心の注意を払う）間違えると機能しない。 波括弧の中に、指定した条件の場合のスタイルシートを書く。 ブレイクポイントとは、スタイルを変えるポイントのこと。 今回の…
レスポンシブデザイン SmartPhoneにどう対応させるか。SPできちんと見えているか？ モバイル版googleで検索すると、”スマホ対応”と表示されるサイトがある。 どうすれば、”スマホ対応”になるのか？ googleのmobile friendly test に合格すればよい。 https:/…
<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>…
タブパネルを作る 手順１ ulを２組、id をそれぞれ'tab'と'panel'にする。そして２つの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>
$('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>
