css
「--watch」オプションは、scssファイルが書き換えられると自動でコンパイルされて、cssファイルも書き換えられる。 scssフォルダ内のstyle.scssファイルを「--watch」して、書き換えたら「--style expanded」でcssフォルダ内のstyle.cssを更新する。 という…
sassのファイル（.scss）をcssに変換する→コンパイル Sassコマンドの使い方を覚えよう | Web制作者のためのSassの教科書 - 公式サポートサイト 「test.scss」をホームフォルダ→c: ￥users￥（アカウント名）のおく。 ホームフォルダに置いた「test.scss」を…
グレーのグラデーションを作るときは、グレーの単色を作るよりも黒と白のアルファを加減してミックスすると綺麗なのかもしれない。 rgba(0, 0, 0, 0.3)=#b3b3b3; #777777;=nutral gray(18%)=rgba(0, 0, 0, 0.53) １８％のグレーは、rgba(0, 0, 0, 0.53)の相…
グラデーションラインは、グラデーション画像を含むボックスの中心と、角度によって定義されます。グラデーションの色は、始点、終点と、省略可能な中間点の各点でそれぞれ定義されます。 「to bottom」は、下に向かって、ということだから視点は上になる。…
shevronをcssで作ってみる。 <html><head> <title>shevron</title> <style> .container{ width: 960px; margin: 100px auto; } .chevron{ width: 100px; height: 200px; background: red; } .chevron:before{ display: block; content:""; width:0; height:0; border: 100px solid; border-colo</head></html>…
正方形を作って、辺の長さと同じborderを四隅につける。 ただ、こうなるということ。 <html> <head> <title>triangle</title> <style> .box { width: 100px; height: 100px; border-top: 100px solid red; border-left: 100px solid blue; border-bottom: 100px solid yellow; border-right: 10</style></head></html>…
こんな表組みを作ります 約束事の確認！ <ul><ol>の中には<li>しか入れることができない。 <li>の中にはどんなタグでも入れることができる。 <li>の中にはどんなタグでも入れることができるのです。 <li>の入れ子はつかえます！ 複雑なカンプを見たら、<li>の入れ子に答えがあることが多</li></li></li></li></li></ol></ul>…
<dl>のなかに<dt>が１つ、<dd>が２つ。 目的は、CSSで表組みにする。レスポンシブにも対応する。 罫線の付き方、paddingの付け方を確認したい。 約束事！の確認。 <dl>の中には、<dt>と<dd>しか入れられない。 <dt>の中には、インライン要素しか入れられない。逆に言うと<dt>の中には、インラ</dt></dt></dd></dt></dl></dd></dt></dl>…
復習・確認事項 dl, dt, ddのdisplay: table; vertical-align; middle letter-spacing あまり使うものではない。のかもしれないがいざ、というときに誤魔化しがきく。 「-0.5em」のように狭くする分量を「em」で指定するのがいいのかな？ <li>の余白は上につける</li>…
そのままの状態 <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…
okazu-background いままではすべての画像をimgで処理していた。 実際には、背景として画像を配置しなくてはいけない場面もある。 画像を背景にした時、フルードイメージにするにはどうすればよいのか、というのが今回のテーマ。 imgと背景画像の違い 「img…
okazu-columnFall PCサイズはフルードイメージの記述から一切変更しない。 3columnの幅、960pxより幅が狭くなった時に、フルードイメージ（縮小）ではなく、カラム落ちするように記述してみる。 フルードイメージ→画像が縮小する。カラム落ち→画像は縮小しな…
全体の幅は960px １列（カラム）の幅は320px いちばん大きな画像のサイズは300px floatによってマージンの相殺が起きないので、すべての画像の周りにマージンを取ると余白が均等になる。 すべての画像にmargin: 10pxをつける。 カラムにfloat leftをかける。…
スライスした画像をコーディングする。 縦３列、一列ごとに、ユニットごとにまとめる。 縦の列は<div>のクラスで、ユニットは<ul>でまとめる。 まずは整理整頓。 <body><div id="container"><div class="leftColumn"><h1 class="a1 size22"><img src="img/a01_logo.png"></h1><nav><ul class="a2"><li class="size11"><img src="img/a02_nav01.png"></li><li class="size11"></li></ul></nav></div></div></body></ul></div>
一番大きいサイズの画像は300px*300px、1番小さいサイズの画像は140px*140px。 フォトショップでスライスをする。 「環境設定」でピクセル単位の作業ができる環境にする。 スライスして切りだした後のサイズがわかっている時は、「長方形選択ツール」→「固定…
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 を使うらしい。 順番も入れ替えられるみたいです。
