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 を使うらしい。 順番も入れ替えられるみたいです。

flex-wrap: wrap;

display: flex; の続きです。そのままでは、とにかく横一列にしか並ばないので、なんとかします。 2列以上にしたいときは、下に、「flex-wrap: wrap;」と追加すればよい。そうすれば、親要素の幅に合わせて改行してくれる。とても便利! 以下、画像の横幅を…

display: flex;

float の代わりに display: flex を使う。 横並びさせたいアイテムを入れる箱を作る。<div id="flexBox">を作る。 <li>を並べたいのであれば,<ul>をそのまま使ってもよい。 flexboxにあたる要素に。display: flex;とcssに記述すればおしまい。 そうすると、中の子要素がすべて横に並ぶ</ul></li></div>…

mega drop-down menu その3

http://ohtafelica.webcrow.jp/megaDropdown/ script accordion menuに近いスクリプトですが、動いてくれます。 まずは一つだけですが、今日はこれまで。 <script>$(function(){ $('#mddWrap').hide(); $('#mddNav>ul>li').on('mouseover',function(){ var wrap=$(th…

mega drop-down menu その2

cssにとりかかる。 まずはシンプルなナビゲーションだと思ってはじめます。 見映えはボディー幅で、ボタンが5つ、幅800pxに収めてレイアウトします。 header{ width: 100%; height: 100px; background: #777; text-align: center; box-sizing: border-box; …

mega drop-down menu その1

まず準備、図面を頭に入れる 絶対に入れ子構造を最初から作ろうとしない。 まずナビゲーションを作る、と考える。 ボタンはボタンだけでなく、ボタンの外側に見えない部分が隠れている。 その見えていない部分が、#mddWrap(構造部分、ブロック) #mddInner(内…

課題:06-09

問09 cssがポイント。 全体を包む、#wrap containerのようなもの。 #wrapには、position: relative; 。ボタンをposition:absolute;で表示するため。 #wrapの中には、ボタンが2つと、#carouselが入っている。 表示領域、いちばんメインの、#carouselには、ov…

演習 : 石垣島観光ガイド やりなおしとレスポンシブ対応

石垣島観光ガイド position relative、配置、位置はposition staticと同じだけれども変化が起きる。 その変化は、レイヤーの重ね順が変わるといったことです。 z-indexを使わなくても、その後の要素との重なりの順番が変わる。 background-sizeについては、…

css について整理したい

background-size contain、は縦横の比率を維持したまま(スクイーズはかけないで)画像が絶対に切れないように配置される。比率が合わない時は背景色が見えてしまう。下の例だと画像の横サイズ合わせ。 cover、は縦横の比率を維持したまま(スクイーズはかけ…

演習 : 石垣島観光ガイド

最終的には、レスポンシブ対応にする。 メディアクエリーを記述しやすいように気をつける。 box-shadowの記述がトリッキーなのが気になる。 4隅均等に影をつける。下の影はフッターで隠れるから、y軸を下げて、ヘッダーに掛からないようになっている。大丈…

課題:06-08

問08 ul,liのリセットを忘れて時間をかける。 途中から構造を変えるときは要注意。 サムネイルは、メイン画像へのリンクだと考える。 リンク→href属性、と連想する。 サムネイルにはhref属性を付けなければならない。 サムネイルは、なににリンクするのか?…

jQuery ドロップダウンメニュー

<ul class="nav">の<li>、そのなかにもう一つの<ul class="menu">を作る。 それだけだと、最初に表示されている「カテゴリー」の見栄えだけを変えられないから<div>を作る。 そうすれば、「カテゴリー」のbackground,height,borderを「プルダウン」の部分と変えられるし、なにかと便利。 クリックしてsl</div></ul></li></ul>…

jQuery "modal window" その2

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>

jQuery plugin "fancy Box" 1

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…

jQuery plugin "fancy Box" 2

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…

box-sizing

rwd えだまめ隊長

soybean PC tablet タブレットは小型のPCという意識で使われているから、PCのレイアウトに準じた。 全体を#container で囲って、padding 8px 周囲につけた。 smart phone ナビゲーションの横幅を50%にして、border をnth-child(); を使って変更した。 border…

rwd calcは便利そうだけれど…

css 復習

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>

max-width フルードイメージ

この手法は<img>でしか使えない。画像をbackgroundにした場合は使えません。 <img> には幅高さを指定しない。dreamweaverでドラッグすると幅高さが記述されてしまうので、要注意。 windowの横幅に合わせたいけれども、画像のオリジナルサイズ以上にはしたくない時に使…

box-shadow

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大きいグレーの長方形を下にできた。それを上辺からはみ出さないように、左右均等に配置し…