css3
そのままの状態 <html lang="jp"><head><meta charset="utf-8"><title>dl, dt, dd</title><style></style></head> <body><dl><dt>８月１５日</dt><dd>今日は終戦の日です</dd><dt>８月６日</dt><dd>広島に原爆が落ちた日</dd><dt>７月２１日</dt><dd>今日は海の日です</dd><dt>５月５日</dt><dd>端午の節句になりました</dd><dt>３月２２日</dt><dd>春分の日</dd></dl></body></html> …
普通に幅、高さを指定する。そして、margin 50px autoでセンターに配置。 .backgroundImg{ background:url(img/bannar_background.PNG) no-repeat; margin-bottom: 50px; width:978px; height: 550px; margin: 100px auto;} 問題はない。 幅をpxで指定する。…
backgroundにレイアウトした画像と、imgでレイアウトした画像の違いをきちんと認識したい。 なにが違うのか、自分で考えつくだけ列挙してみると… imgはhtmlに記述、一方background-imageはcssに記述。つまり、imgは本文構造上の意味を持っている。 imgにはal…
仕上がりの目標。 hoverすると、べた色が下から出てきて、文字の位置がセンターにくる。 後ろのレイヤ―、<div id="photo">の「background」に画像をレイアウトする。 手前のレイヤー、<div id="caption">の「background」に色ベタをレイアウトする。 #photo、の中に（入れ子で）#captionを配置</div></div>…
文字のアニメーション カウンターのように文字を入れ替える。 <li>で表示させたい文章を縦に並べる。 窓を作って、overflow-hidden 説明はめんどくさい。カルーセルウィンドウの縦バージョン。 ポイントは、<li>の高さ、line-height、窓（#news）の高さを揃えること</li></li>…
cotorier cafe pc用に書いたスタイルシートを、メディアクエリーを使ってtablet用に書き換えます。 もし、pc用と、tablet用のカンプを事前に準備してあるならば、両方を見比べて、というよりもtabletの方をよく見ながらhtmlを記述するべきあろう。 display f…
pc用に高さを指定してあった、<header>をスマートフォン用に、高さの指定を解除するときにどうすればよいか？ dreamweaverでは、autoとinheritの２種類が選択肢として候補にあがる。 値として、取れるものを調べてみる。もっと前にやるべきことだよね… いろいろあり</header>…
まずは、PC用にコーディングしてから、レスポンシブに対応させる。 headerではレイアウト上、<h1>より上に<p>があるけれども、これはレイアウトの問題で、文書構造を変えてレイアウトしないように気をつける。 縦方向のレイアウトはpositionを使う。 本来「縦」に並</p></h1>…
大きめの画像 width: 3600pxと<h1> と <p>をセンター揃えで、body を狭くしても常にセンター揃えになるよう、レイアウトする。. max-width: 100% 親要素の幅100%に合わせて画像を縮小する。 画像の大きさより表示するブロックが大きい時には、拡大しないで画像の大</p></h1>…
20160620修正 CDNサーバー上のfont-awesomeのファイルを利用する. この場合、ローカルにダウンロードするファイルはない。 headに以下のように記述すればよい。 <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" > 表示したいアイコンのコードを、表示したい場所に記述します。 コードはこんな感じです。<i class="fa fa-home" aria-hidden="true"></i> とこ</link>…
rem rem="root" + "em" rootとはhtml要素のこと。 rem rem 値は、複合の問題を避けるために考案されました。rem 値は親要素ではなく、ルート html 要素に対して相対的です。言い換えると、親要素のサイズの影響を受けることなく相対的な方法でフォントサイズ…
箱を2つ縦に並べる。position は指定しない。つまり、position: static; のまま。 box1に、position; relative:を追加すると… なにも変わりません。 こんどは、box2のborderを外して、boxshadowをつけてみる。 あとに記述した内容で上書きされるから、上のよ…
float →親要素に overflow: hidden position → 基準とする block に position: absolute; padding → padding をつける block には box-sizing: border-box を追加する。 border → border をつける block には box-sizing: border-box を追加する。 display: …
問10 button を作る。<p><button class="redbtn"><a href="#"> red </a></button></p> button の見映えを変更する。border-radius imgをfloatでレイアウトする。margin の値をうまくとって余白が均等になるようにする。 jQueryでは、どのようにセレクターを使うかで悩んだ。取っ掛かりでは、属性セレクタを使うことに…
button要素の見映えを変える 初期設定のまま buttonのheightは32pxに設定してあります。ここでborder-radius: 16px 。 右下にフレーのシャドウがついています。 box-shadow: none; と記述しても消えません。 border-style: none; と記述してみました。消えま…
カラム落ちを前提にするならば、float 見出しのとおり、カラム落ちさせるならば、floatを使う。 そうでないときは、display: flexが便利。 ナビゲーションなど。 まず並べる display div id="flexBox" に、display: flex; 「横」に並べるには、flex-directio…
やりたいことは、 flexBoxの幅を指定しないで、 flex-wrap: wrap;にして、 ボディーのセンターに配置する。 ボディー幅を変えても、画像がボディーの中央にいる。 justify-contentの値の初期値は「flex-start」 これを、「flex-end」にしてみると… body の右…
目的を叶えるには、justify-content を使うらしい。 順番も入れ替えられるみたいです。
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(内…
石垣島観光ガイド position relative、配置、位置はposition staticと同じだけれども変化が起きる。 その変化は、レイヤーの重ね順が変わるといったことです。 z-indexを使わなくても、その後の要素との重なりの順番が変わる。 background-sizeについては、…
background-size contain、は縦横の比率を維持したまま（スクイーズはかけないで）画像が絶対に切れないように配置される。比率が合わない時は背景色が見えてしまう。下の例だと画像の横サイズ合わせ。 cover、は縦横の比率を維持したまま（スクイーズはかけ…
最終的には、レスポンシブ対応にする。 メディアクエリーを記述しやすいように気をつける。 box-shadowの記述がトリッキーなのが気になる。 ４隅均等に影をつける。下の影はフッターで隠れるから、y軸を下げて、ヘッダーに掛からないようになっている。大丈…
問08 ul,liのリセットを忘れて時間をかける。 途中から構造を変えるときは要注意。 サムネイルは、メイン画像へのリンクだと考える。 リンク→href属性、と連想する。 サムネイルにはhref属性を付けなければならない。 サムネイルは、なににリンクするのか？…
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…
