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

webかたつむり

ウェブデザインを勉強中

css

バッチ処理/シェルスクリプト その1

「--watch」オプションは、scssファイルが書き換えられると自動でコンパイルされて、cssファイルも書き換えられる。 scssフォルダ内のstyle.scssファイルを「--watch」して、書き換えたら「--style expanded」でcssフォルダ内のstyle.cssを更新する。 という…

sass to css

sassのファイル(.scss)をcssに変換する→コンパイル Sassコマンドの使い方を覚えよう | Web制作者のためのSassの教科書 - 公式サポートサイト 「test.scss」をホームフォルダ→c: ¥users¥(アカウント名)のおく。 ホームフォルダに置いた「test.scss」を…

gradation のついての覚え書き

グレーのグラデーションを作るときは、グレーの単色を作るよりも黒と白のアルファを加減してミックスすると綺麗なのかもしれない。 rgba(0, 0, 0, 0.3)=#b3b3b3; #777777;=nutral gray(18%)=rgba(0, 0, 0, 0.53) 18%のグレーは、rgba(0, 0, 0, 0.53)の相…

css gradation / linear-gradient

グラデーションラインは、グラデーション画像を含むボックスの中心と、角度によって定義されます。グラデーションの色は、始点、終点と、省略可能な中間点の各点でそれぞれ定義されます。 「to bottom」は、下に向かって、ということだから視点は上になる。…

css chevron

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>…

css triangle

正方形を作って、辺の長さと同じ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>…

dlで表組み その2(応用編)

こんな表組みを作ります 約束事の確認! <ul><ol>の中には<li>しか入れることができない。 <li>の中にはどんなタグでも入れることができる。 <li>の中にはどんなタグでも入れることができるのです。 <li>の入れ子はつかえます! 複雑なカンプを見たら、<li>の入れ子に答えがあることが多</li></li></li></li></li></ol></ul>…

dlで表組み その1(基本編)

<dl>のなかに<dt>が1つ、<dd>が2つ。 目的は、CSSで表組みにする。レスポンシブにも対応する。 罫線の付き方、paddingの付け方を確認したい。 約束事!の確認。 <dl>の中には、<dt>と<dd>しか入れられない。 <dt>の中には、インライン要素しか入れられない。逆に言うと<dt>の中には、インラ</dt></dt></dd></dt></dl></dd></dt></dl>…

intern firstWeek review

復習・確認事項 dl, dt, ddのdisplay: table; vertical-align; middle letter-spacing あまり使うものではない。のかもしれないがいざ、というときに誤魔化しがきく。 「-0.5em」のように狭くする分量を「em」で指定するのがいいのかな? <li>の余白は上につける</li>…

dl の dt, dd を横に並べる

そのままの状態 <html lang="jp"><head><meta charset="utf-8"><title>dl, dt, dd</title><style></style></head> <body><dl><dt>8月15日</dt><dd>今日は終戦の日です</dd><dt>8月6日</dt><dd>広島に原爆が落ちた日</dd><dt>7月21日</dt><dd>今日は海の日です</dd><dt>5月5日</dt><dd>端午の節句になりました</dd><dt>3月22日</dt><dd>春分の日</dd></dl></body></html> …

background image or img その2

普通に幅、高さを指定する。そして、margin 50px autoでセンターに配置。 .backgroundImg{ background:url(img/bannar_background.PNG) no-repeat; margin-bottom: 50px; width:978px; height: 550px; margin: 100px auto;} 問題はない。 幅をpxで指定する。…

background image or img その1

backgroundにレイアウトした画像と、imgでレイアウトした画像の違いをきちんと認識したい。 なにが違うのか、自分で考えつくだけ列挙してみると… imgはhtmlに記述、一方background-imageはcssに記述。つまり、imgは本文構造上の意味を持っている。 imgにはal…

画像をスライスしてコーディングする その6

okazu-background いままではすべての画像をimgで処理していた。 実際には、背景として画像を配置しなくてはいけない場面もある。 画像を背景にした時、フルードイメージにするにはどうすればよいのか、というのが今回のテーマ。 imgと背景画像の違い 「img…

画像をスライスしてコーディングする その5 - カラム落ちでRWD

okazu-columnFall PCサイズはフルードイメージの記述から一切変更しない。 3columnの幅、960pxより幅が狭くなった時に、フルードイメージ(縮小)ではなく、カラム落ちするように記述してみる。 フルードイメージ→画像が縮小する。カラム落ち→画像は縮小しな…

画像をスライスしてコーディングする その3

全体の幅は960px 1列(カラム)の幅は320px いちばん大きな画像のサイズは300px floatによってマージンの相殺が起きないので、すべての画像の周りにマージンを取ると余白が均等になる。 すべての画像にmargin: 10pxをつける。 カラムにfloat leftをかける。…

画像をスライスしてコーディングする その2

スライスした画像をコーディングする。 縦3列、一列ごとに、ユニットごとにまとめる。 縦の列は<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>

画像をスライスしてコーディングする その1

一番大きいサイズの画像は300px*300px、1番小さいサイズの画像は140px*140px。 フォトショップでスライスをする。 「環境設定」でピクセル単位の作業ができる環境にする。 スライスして切りだした後のサイズがわかっている時は、「長方形選択ツール」→「固定…

課題: コトリエカフェ その2

cotorier cafe pc用に書いたスタイルシートを、メディアクエリーを使ってtablet用に書き換えます。 もし、pc用と、tablet用のカンプを事前に準備してあるならば、両方を見比べて、というよりもtabletの方をよく見ながらhtmlを記述するべきあろう。 display f…

高さの指定

pc用に高さを指定してあった、<header>をスマートフォン用に、高さの指定を解除するときにどうすればよいか? dreamweaverでは、autoとinheritの2種類が選択肢として候補にあがる。 値として、取れるものを調べてみる。もっと前にやるべきことだよね… いろいろあり</header>…

課題: コトリエカフェ その1

まずは、PC用にコーディングしてから、レスポンシブに対応させる。 headerではレイアウト上、<h1>より上に<p>があるけれども、これはレイアウトの問題で、文書構造を変えてレイアウトしないように気をつける。 縦方向のレイアウトはpositionを使う。 本来「縦」に並</p></h1>…

max-width:

大きめの画像 width: 3600pxと<h1> と <p>をセンター揃えで、body を狭くしても常にセンター揃えになるよう、レイアウトする。. max-width: 100% 親要素の幅100%に合わせて画像を縮小する。 画像の大きさより表示するブロックが大きい時には、拡大しないで画像の大</p></h1>…

font awesome

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 font-size について。

rem rem="root" + "em" rootとはhtml要素のこと。 rem rem 値は、複合の問題を避けるために考案されました。rem 値は親要素ではなく、ルート html 要素に対して相対的です。言い換えると、親要素のサイズの影響を受けることなく相対的な方法でフォントサイズ…

position: relative; について

箱を2つ縦に並べる。position は指定しない。つまり、position: static; のまま。 box1に、position; relative:を追加すると… なにも変わりません。 こんどは、box2のborderを外して、boxshadowをつけてみる。 あとに記述した内容で上書きされるから、上のよ…

css 連想ゲーム じゃないけれど…

float →親要素に overflow: hidden position → 基準とする block に position: absolute; padding → padding をつける block には box-sizing: border-box を追加する。 border → border をつける block には box-sizing: border-box を追加する。 display: …

課題:06-10

問10 button を作る。<p><button class="redbtn"><a href="#"> red </a></button></p> button の見映えを変更する。border-radius imgをfloatでレイアウトする。margin の値をうまくとって余白が均等になるようにする。 jQueryでは、どのようにセレクターを使うかで悩んだ。取っ掛かりでは、属性セレクタを使うことに…

button のデザインを変える

button要素の見映えを変える 初期設定のまま buttonのheightは32pxに設定してあります。ここでborder-radius: 16px 。 右下にフレーのシャドウがついています。 box-shadow: none; と記述しても消えません。 border-style: none; と記述してみました。消えま…

display: flex; 現時点でまとめる。

カラム落ちを前提にするならば、float 見出しのとおり、カラム落ちさせるならば、floatを使う。 そうでないときは、display: flexが便利。 ナビゲーションなど。 まず並べる display div id="flexBox" に、display: flex; 「横」に並べるには、flex-directio…

justify-content:

やりたいことは、 flexBoxの幅を指定しないで、 flex-wrap: wrap;にして、 ボディーのセンターに配置する。 ボディー幅を変えても、画像がボディーの中央にいる。 justify-contentの値の初期値は「flex-start」 これを、「flex-end」にしてみると… body の右…

flexBox 用語の定義

目的を叶えるには、justify-content を使うらしい。 順番も入れ替えられるみたいです。