css
display: flex; の続きです。そのままでは、とにかく横一列にしか並ばないので、なんとかします。 ２列以上にしたいときは、下に、「flex-wrap: wrap;」と追加すればよい。そうすれば、親要素の幅に合わせて改行してくれる。とても便利！ 以下、画像の横幅を…
float の代わりに display: flex を使う。 横並びさせたいアイテムを入れる箱を作る。<div id="flexBox">を作る。 <li>を並べたいのであれば,<ul>をそのまま使ってもよい。 flexboxにあたる要素に。display: flex;とcssに記述すればおしまい。 そうすると、中の子要素がすべて横に並ぶ</ul></li></div>…
http://ohtafelica.webcrow.jp/megaDropdown/ script accordion menuに近いスクリプトですが、動いてくれます。 まずは一つだけですが、今日はこれまで。 <script>$(function(){ $('#mddWrap').hide(); $('#mddNav>ul>li').on('mouseover',function(){ var wrap=$(th…
cssにとりかかる。 まずはシンプルなナビゲーションだと思ってはじめます。 見映えはボディー幅で、ボタンが５つ、幅800pxに収めてレイアウトします。 header{ width: 100%; height: 100px; background: #777; text-align: center; box-sizing: border-box; …
まず準備、図面を頭に入れる 絶対に入れ子構造を最初から作ろうとしない。 まずナビゲーションを作る、と考える。 ボタンはボタンだけでなく、ボタンの外側に見えない部分が隠れている。 その見えていない部分が、#mddWrap(構造部分、ブロック) #mddInner(内…
問09 cssがポイント。 全体を包む、#wrap containerのようなもの。 #wrapには、position: relative; 。ボタンをposition:absolute;で表示するため。 #wrapの中には、ボタンが２つと、#carouselが入っている。 表示領域、いちばんメインの、#carouselには、ov…
石垣島観光ガイド position relative、配置、位置はposition staticと同じだけれども変化が起きる。 その変化は、レイヤーの重ね順が変わるといったことです。 z-indexを使わなくても、その後の要素との重なりの順番が変わる。 background-sizeについては、…
background-size contain、は縦横の比率を維持したまま（スクイーズはかけないで）画像が絶対に切れないように配置される。比率が合わない時は背景色が見えてしまう。下の例だと画像の横サイズ合わせ。 cover、は縦横の比率を維持したまま（スクイーズはかけ…
最終的には、レスポンシブ対応にする。 メディアクエリーを記述しやすいように気をつける。 box-shadowの記述がトリッキーなのが気になる。 ４隅均等に影をつける。下の影はフッターで隠れるから、y軸を下げて、ヘッダーに掛からないようになっている。大丈…
問08 ul,liのリセットを忘れて時間をかける。 途中から構造を変えるときは要注意。 サムネイルは、メイン画像へのリンクだと考える。 リンク→href属性、と連想する。 サムネイルにはhref属性を付けなければならない。 サムネイルは、なににリンクするのか？…
<ul class="nav">の<li>、そのなかにもう一つの<ul class="menu">を作る。 それだけだと、最初に表示されている「カテゴリー」の見栄えだけを変えられないから<div>を作る。 そうすれば、「カテゴリー」のbackground,height,borderを「プルダウン」の部分と変えられるし、なにかと便利。 クリックしてsl</div></ul></li></ul>…
Create link elements whose href attributes will contain the path of the element you wish to open within the fancyBox. <a class="fancybox" rel="group" href="big_image_1.jpg"><img src="small_image_1.jpg" alt="" /></a> <a class="fancybox" rel="group" href="big_image_2.jpg"></a>
What's new Version 2 is completely rewritten with new features and updated graphics. Notable changes Extendable using helpers Responsive (try resizing window while fancyBox is open) Integrated slideshow New gallery transitions Uses CSS3 (s…
Various types HTML JavaScript Ajax Iframe Inline SWF Youtube (iframe) Google maps (iframe) Non-existing url Alternatively, you can set content type as an option: $(".open_ajax").fancybox({type: 'ajax'});. Note, ajax requests are subject to…
soybean PC tablet タブレットは小型のPCという意識で使われているから、PCのレイアウトに準じた。 全体を#container で囲って、padding 8px 周囲につけた。 smart phone ナビゲーションの横幅を50%にして、border をnth-child(); を使って変更した。 border…
html <html lang=ja""><head><meta charset="utf-8"><title>無題ドキュメント</title><link rel="stylesheet" href="style.css"></head> <body><div id="logo">logo</div><div id="header">header</div> <div id="nav"><ul><li><a href="#">menu1</a></li><li><a href="#">menu2</a></li><li><a href="#">menu3</a><…</li></ul></div></body></html>
この手法は<img>でしか使えない。画像をbackgroundにした場合は使えません。 <img> には幅高さを指定しない。dreamweaverでドラッグすると幅高さが記述されてしまうので、要注意。 windowの横幅に合わせたいけれども、画像のオリジナルサイズ以上にはしたくない時に使…
box-shadow:0 10px 0 0 #777; offset-y 10px box-shadow:0 10px 10px 0 #777; blur radius 10px box-shadow:0 10px 0 10px #777; spread radius 10px 上下左右に10px大きいグレーの長方形を下にできた。それを上辺からはみ出さないように、左右均等に配置し…
ヘッダーにナビゲーションを作る 帯状のナビゲーションを作る。ナビゲーションの見栄えはボディー全体。 ボタンの部分はセンター揃え ボディー全体の横幅を使うのは、ナビゲーションだけで、他のコンテンツは横幅960pxとする。 このパターンで作る手順を、パ…
全く同じ手順で、スマホ用。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:/…
http://ohtafelica.webcrow.jp/20160519/index01.html 箱を３つ作ります（初期状態） 冒頭からつまずく。原因は、#div1{margin-left: none;} という記述。 noneは使えません。 <body><div id="container"><div id="div1" class="box">div1</div><div id="div2" class="box">div2</div><div id="div3" class="box">div3</div></div> jQueryを使って、箱を操作する。（最終形） まず、$(fun…</body>
HTML5でdisplay:block;を指定しないと、ブロックにならない要素。 そのうち悩むかもしれないので、メモ。 article aside dialog figure footer header main nav section リセットを掛けるときに、display: block; しておく。
Q10 いろいろ調べて、記述してみました…が 画像ファイル名を任意に設定する方法はないものかと。 この場合は、ファイル名が0から始まるという縛りがあります。 CSSに cursor:pointer; を記述するとそれっぽいね。 CSSのリセットを忘れるとバチが当たるね。 <html lang="ja"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Q</title></meta></meta></head></html>…
Q8 「else if」を「if else」と書いてロスタイム。 if文は記述の方法を変えたほうがいいのかもしれない。 <html lang="ja"><head><meta charset="utf-8"><title>Q8</title><script>function kuji(){ var rdm=Math.random();if(rdm<0.25){ document.getElementById('ans').innerHTML='本日の運勢は、大吉です。';}else if(rdm>=0.2</meta></head></html>…
