margin が相殺される場合とされない場合

November 4, 2019, 10:52 pm

相殺される場合

<!DOCTYPE html><htmllang="ja"dir="ltr"><head><metacharset="utf-8"><title></title><linkrel="stylesheet"href="css/reset.css"><linkrel="stylesheet"href="css/style.css"></head><body><divclass="box"></div><divclass="box2"></div></body></html>

.box{width:200px;height:200px;margin:20px;border:1pxsolidred;}.box2{width:200px;height:200px;margin:20px;border:1pxsolidblue;}

この場合boxの下marginとbox2の上marginが重なってしまっているため間隔は40pxとはならず20pxになる。
これが mrginの相殺である。

相殺されない場合

親要素と子要素のmarginを分けられるようなborder、paddingなどをが存在する場合には相殺されない。

<divclass="parent"><divclass="child"></div></div>

.parent{background-color:red;width:200px;height:100px;border:1pxsolidblack;}.child{background-color:blue;width:50%;height:50%;margin-top:20px;}

親要素にborderがあるので、子要素のmargin-topが効く。

↧

HTML CSS タグを使ってみる

November 5, 2019, 12:16 am

≫ Next: ネイティブjavascript+cssでスムーススクロールもどきを実装する

≪ Previous: margin が相殺される場合とされない場合

テーブル（表）を使う機会があったので。
簡単に自分用のメモ。

シンプルなテーブル

table.html

<!DOCTYPE html><htmllang="ja"><head><metacharset="utf-8"><title>テーブル</title><linkrel="stylesheet"href="css/table.css"></head><body><divclass="table-container"><table><tr><th>銀行名</th><td>あいうえお銀行</td></tr><tr><th>支店名</th><td>かきくけこ支店</td></tr><tr><th>店番</th><td>０９８７６５</td></tr><tr><th>口座名義</th><td>株式会社サシスセソ</td></tr><tr><th>口座種別</th><td>普通預金</td></tr><tr><th>口座番号</th><td>９９９９９９</td></tr></table><divclass="table-attention"><p>※ここに注意点とか記述する０１
        <br>※ここに注意点とか記述する０２
      </p></div></div></body></html>

table.css

body{margin:10px;}.table-container{margin:auto;}table{border-collapse:collapse;}tableth{padding:10px;}td{padding:10px;}th,td{border:1pxsolid#000000;}.table-attention{display:inline-block;margin:10pxauto;}.table-attentionp{margin:0;}

こんな感じでできる。ぶっちゃけこれぐらいならリストとかでもいいかも…

↧

ネイティブjavascript+cssでスムーススクロールもどきを実装する

November 5, 2019, 12:33 am

≫ Next: 【これからScssを使う人へ】Scssの使い方と便利さをさらっと紹介するぞ

≪ Previous: HTML CSS タグを使ってみる

きっかけ：画面トップへ戻るボタンを作る際に調べてみたら長いコードが出てきた
→指定位置までスクロールする機能は必要ないから短いの書こう
（「もどき」の理由は厳密にはスクロールしていないからです）

コード

html

sample.html

<!DOCTYPE html><html><head><title>サンプル</title><linkrel="stylesheet"href="sample.css"><script src="sample.js"></script></head><body><divstyle="height: 25vh;background-color:#fcc;"></div><divstyle="height: 25vh;background-color:#cfc;"></div><divstyle="height: 25vh;background-color:#ccf;"></div><divstyle="height: 25vh;background-color:#fcc;"></div><divstyle="height: 25vh;background-color:#cfc;"></div><divstyle="height: 25vh;background-color:#ccf;"></div><buttonid="toTop"onclick="backToTop()">トップに戻る</button></body></html>

css

sample.css

body{overflow-y:scroll;width:100%;height:100%;margin:0;padding:0;transition:1s;}body.fixed{position:fixed;left:0;background-attachment:fixed;}

JavaScript

sample.js

functionbackToTop(){letscrollPosition=window.pageYOffset;document.body.classList.add('fixed');document.body.setAttribute('style','top:-'+scrollPosition+'px;');window.setTimeout(function(){document.body.setAttribute('style','top:0px');},0);window.setTimeout(function(){document.body.removeAttribute('class');document.body.removeAttribute('style');},1000);}

解説

まず挙動についてですが「スクロールして画面トップへ戻る」ではなく「トップへ戻った後でスクロールしているように見せる」が正確です。

sample.js

//スクロール量を取得letscrollPosition=window.pageYOffset;//bodyをfixedで固定document.body.classList.add('fixed');//topでスクロール量と同じだけbodyをずらすdocument.body.setAttribute('style','top:-'+scrollPosition+'px;');

この1行目にてスクロール量を取得しています。
次にbodyに対してdisplay:fixedが働くので強制的に画面トップに戻されます。
ただ、これだけだと一瞬で遷移してしまってスムースさの欠片もないので、画面が動かないように固定されたbodyをスクロール量の分だけ上に動かすことで、見かけ上は動いていないように見せることができます。
（モーダルウィンドウを開いた際の背景固定と同様の手段です）

sample.js

//ずらしたbodyを一番上に戻すwindow.setTimeout(function(){document.body.setAttribute('style','top:0px');},0);

次にtopの値を0に変更します。
この時setTimeout()を使って、遅延させることでtransitionが働かせています。
これによってbodyがあたかもスクロールしているように見えます。
実際には固定された領域が動いているだけでスクロールはしていません。
何度も言いますが、画面トップへ戻るという目的はbodyにdisplay:fixedを適用した時点で達成しています。

sample.js

//スクロール完了後、追加したクラス・インラインスタイルを削除するwindow.setTimeout(function(){document.body.removeAttribute('class');document.body.removeAttribute('style');},1000);}

最後に一連の動作でつけたクラスとインラインスタイルを消去します。
こちらもアニメーションが終わるまでの間は実行されないようにtransition:1sと同じだけ遅延させます。

メリット

・アニメーション部分をCSSに任せているのでややこしい計算が不要
・ease-inなどスクロール速度の調整もtransition-timing-functionで簡単に実装できる
・15行程度の簡単なことしかしていない分管理が楽

デメリット

・指定位置までスクロールさせることはできない
・一瞬画面を固定にすることでスクロールバーが消え、アニメーション中だけ横幅が変わるのでoverflow-y:scrollでスクロールバーを常時表示にしておく必要がある
（::-webkit-scrollbar{display:none}でも可
・単体だと「ボタンを右下固定にして、ある程度スクロールしたら現れる」みたいなことはできない。

おまけ(id位置までスクロールさせたい）

せっかくなのでid位置までスクロールさせられるようにしました。
最初からこっちだけ書けばよかった気もしますね。

html

omake.html

<!DOCTYPE html><html><head><title>サンプル</title><linkrel="stylesheet"href="sample.css"><script src="omake.js"></script></head><body><buttonid="toTop"onclick="backToTop(r1)">2つめの赤</button><buttonid="toTop"onclick="backToTop(r2)">3つめの赤</button><buttonid="toTop"onclick="backToTop(r3)">4つめの赤</button><divstyle="height: 25vh;background-color:#fcc;"></div><divstyle="height: 25vh;background-color:#cfc;"></div><divstyle="height: 25vh;background-color:#ccf;"></div><divid="r1"style="height: 25vh;background-color:#fcc;"></div><divstyle="height: 25vh;background-color:#cfc;"></div><divstyle="height: 25vh;background-color:#ccf;"></div><divid="r2"style="height: 25vh;background-color:#fcc;"></div><divstyle="height: 25vh;background-color:#cfc;"></div><divstyle="height: 25vh;background-color:#ccf;"></div><divid="r3"style="height: 25vh;background-color:#fcc;"></div><divstyle="height: 25vh;background-color:#cfc;"></div><divstyle="height: 25vh;background-color:#ccf;"></div><buttonid="toTop"onclick="backToTop()">トップに戻る</button></body></html>

JavaScript

omake.js

//id位置まで飛べるスムーススクロール風functionbackToTop(id){//現在位置を取得とbodyの高さ以上にスクロールしないよう制限letscrollPosition=window.pageYOffset;letscrollLimit=document.body.clientHeight-window.innerHeight;　//高さ制限 = bodyの高さ - 表示画面の高さ//bodyをfixedで固定document.body.classList.add('fixed');//topで現在表示位置までbodyをずらすdocument.body.setAttribute('style','top:-'+scrollPosition+'px;');//ずらしたbodyを一番上に戻すwindow.setTimeout(//引数＝idの有無で動作を分けるfunction(){if(typeofid=="undefined"){//引数がない場合は画面トップまでdocument.body.setAttribute('style','top:0px');}elseif(typeofid=="object"){//引数＝idがある場合はidの位置までif(id.getBoundingClientRect().top>scrollLimit){document.body.setAttribute('style','top:-'+scrollLimit+'px');}else{document.body.setAttribute('style','top:-'+id.getBoundingClientRect().top+'px');}}},0);window.setTimeout(function(){//スクロール完了後に追加したクラス・インラインスタイルを削除するdocument.body.removeAttribute('class');document.body.removeAttribute('style');//実際のidの位置までスクロールするif(typeofid=="object"){if(id.getBoundingClientRect().top>scrollLimit){window.scrollTo(0,scrollLimit);}else{window.scrollTo(0,id.getBoundingClientRect().top);}}},1000);}

簡単な解説

やっていることはほぼ同じです。
onclick='backToTop(id)'と引数を渡すことでidまでスクロールするようにしただけです。
こちらは最後にscrollTo()を使っているのでかろうじてスムースクロールといってもいいかもしれません。
なお、引数を入れなければ画面トップに移動します。

こうなるとファンクション名が不適当すぎるので、使う際はちゃんとgoTo()とかに変更してくださいね

↧

【これからScssを使う人へ】Scssの使い方と便利さをさらっと紹介するぞ

November 5, 2019, 1:32 am

≫ Next: 枠の上に文字を乗せるやり方

≪ Previous: ネイティブjavascript+cssでスムーススクロールもどきを実装する

この記事は

普段CSSでコーディングしているけど、
Scssも便利らしいし勉強しなきゃなあと思ってる人向けの記事だよ！！

わたしも初めからScssを使ってたわけではないので、使ってみるまでいまいち便利さがわからなかったんだが、
今はもう逆にCSSでどうやって書いてたかよく覚えてないぞ・・・(´-ω-｀)うぬぅ

Scssって何？

Sass は Syntactically Awesome Style Sheets (構文的に素晴らしいスタイルシート) の略で、CSSを便利に使えるように拡張した言語です。

-SASS (scss) の基本的な使い方/Web Design Leaves

CSSとだいたい一緒だけど、色々できてめちゃ便利になったのがSassって感じだな。

あれ？Sass？Scssじゃないの？

SassとScssはだいたい一緒だけど、ちょっと違う。
で、CSSから入ってるひとなら絶対Scssのが親しみやすい。

違いはあとで説明するけど、簡単に言うとCSSの書き方と似ている方がScssで、
もっと書き方が簡略化されているのがSassって感じだ。
（SassとScssの違いに飛ぶ）

WebでScssが試せるぞ

Scssは、コンパイルして一回CSSとして出力させてからHTMLに読み込ませるっていう仕組みなので、そもそもコンパイルできる環境ができてないと使えないのだけど、構築ができてなくても実際にどんな風に書けるのか試せるサイトが存在するので紹介。

環境ができてないけど勉強したいって人はひとまずこの辺で試してみるといいと思うぞ。

・SassMeister | The Sass Playground!
　書いたScssを即時でコンパイルして出来上がったCSSも右側に表示してくれるサイト。
・CodePen
　登録後、CSSの設定のところで「Scss」を選択すると、Scss記述でも書けるようになるサイト

Scssの書き方

じゃあ実際にどんな風に書くのかを見ていこう！

たとえばこんなデザインのページがあったとする。

で、HTMLをこう書いたとする。

<divclass="container"><divclass="inner"><pclass="title">コンテナのタイトル</p><pclass="text">コンテナのテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p></div><divclass="inner"><pclass="title">コンテナのタイトル</p><pclass="text">コンテナのテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p></div><divclass="inner"><pclass="title">コンテナのタイトル</p><pclass="text">コンテナのテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p></div></div>

CSSで書いてみるとこんな感じ？

body{background:#65B7B7;}.container{display:flex;margin:0auto;width:80%;}.inner{background:#F5CE3F;margin:10px;padding:020px;border-radius:10px;}.title{font-size:26px;font-weight:bold;}.text{font-size:14px;}

これをScssにすると、こうなる。

body{background:#65B7B7;.container{display:flex;margin:0auto;width:80%;.inner{background:#F5CE3F;margin:10px;padding:020px;border-radius:10px;}.title{font-size:26px;font-weight:bold;}.text{font-size:14px;}}}

そう、Scssはクラスの記述を入れ子にして書けるのだ！！！
こうすると、階層構造がとてもわかりやすいな！！！

`&(アンパサンド)`を使う

でも、これだけだとまだ便利さがわからないよな。
次は、HTMLに書くクラスの書き方を少し変えて書いてみる。

<divclass="container"><divclass="container__inner"><pclass="container__title">コンテナのタイトル</p><pclass="container__text">コンテナのテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p></div><divclass="container__inner"><pclass="container__title">コンテナのタイトル</p><pclass="container__text">コンテナのテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p></div><divclass="container__inner"><pclass="container__title">コンテナのタイトル</p><pclass="container__text">コンテナのテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p></div></div>

お？なんでアンスコ2個でつないでんの？？？ってなった人。
これはBEMというクラスの命名規則で、Scssと相性の良い規則なので覚えておいてほしいぞ。

（ハシビロコウが書いたBEM記事）
[HTML/SCSS]BEM設計をワイヤーフレームを使って解説してみる

で、こいつをScssで書くと、こうなる。

body{background:#65B7B7;}.container{display:flex;margin:0auto;width:80%;&__inner{background:#F5CE3F;margin:10px;padding:020px;border-radius:10px;}&__title{font-size:26px;font-weight:bold;}&__text{font-size:14px;}}

そう、Scssは&（アンパサンド）を使うことで、クラス名が一部省略できるのだ！
しかもBEMの規則に乗っ取って命名しておくと、
.containerの中にどんな子要素があるのか一目瞭然になる。

(ちなみにbodyも含めて入れ子にしてしまって良いんだけど、あんま入れ子やると階層が深くなってわかりづらいので離してます)

また、

a{color:#fff;}a:hover{color:#000;}

とかの場合も、

a{color:#fff;&:hover{color:#000;}}

こうやって入れ子にして書ける。
どこを:hoverした時なのか、わかりやすくなってよいよい。

もちろん、:before・:afterも入れ子にして書けるから、
&:beforeとか、&:afterっていう書き方もできる。

変数

Scssは変数を使うことができる。
たぶんいろいろやればすごい複雑なこともできるんだろうけど、今回はよく使ってる変数を紹介。

色の変数

ページ上で何度も使う色は、CSSだとそのたびにカラーコードをコピペしなきゃいけなくてめんどくさいよなぁ。
でも、Scssなら変数を一回書いてしまえばその必要がなくなるのだ。

色の変数の書き方は非常に簡単で、たとえば

$point:#6A71C4;

と書く($の後の文字列はなんでもOK)。

ほんで、この色を使いたいタイミングがきた時に

color:$point;

とか

background:$point;

とかやるだけで、#6A71C4の色が呼び出されるのだ。

`font-family`も変数に

ページ内でたまに出てくるfont-familyがある場合は、
そいつも変数にしておくとお手軽に呼び出せるぞ。

$font_yu:游ゴシック体,"Yu Gothic",YuGothic;

こうやって設定しておくと、

font-family:$font_yu;

こう書いた時に游ゴシックが呼び出される。

便利〜〜〜〜〜〜〜

引数

Scssは、引数を使うこともできる。
→引数（アーギュメント）とは - IT用語辞典 e-Words

Scssの引数は、@mixinで書いて@includeで呼び出せるぞ。
ここでは、わたしがよく使う@mixinを紹介するぞ〜。

`display:flex`

display:flexは、justify-contentとかalign-itemsとか、ブラウザごとの記述とかが
いちいちめんどくさいので、@mixinにして１行で呼び出せるようにしている。

こんな感じで。

@mixinflex($justify:space-between,$align:center){display:flex;display:-webkit-flex;//Safari,Android,iOS対応display:-ms-flexbox;//IE対応justify-content:$justify;-webkit-box-pack:$justify;//Safari,Android,iOS対応-ms-flex-pack:$justify;//IE対応align-items:$align;-webkit-box-align:$align;//Safari,Android,iOS対応-ms-flex-align:$align;//IE対応}

@mixinのあとに@mixinの名前を、()の中に初期値を設定。
{}の中には呼び出したい記述を書いているよ。

で、今回の場合は$justifyと$alignってのがjustify-contentとかalign-itemsの値として入っているよな。
ここは、()内で指定した値が呼び出されるので、指定を変えたいときは()の中の値を指定すればよい。
ちなみにここで設定している()内の値は初期値なので、

呼び出すときに

.hoge{@includeflex;}

と書くと、コンパイルされるCSSは以下のようになるのだ。

.hoge{display:flex;display:-webkit-flex;display:-ms-flexbox;justify-content:space-between;-webkit-box-pack:space-between;-ms-flex-pack:space-between;align-items:center;-webkit-box-align:center;-ms-flex-align:center;}

これを例えば

.hoge{@includeflex($justify:flex-start,$align:baseline);}

とかすると、コンパイルされるCSSは以下のようになるよ。

.hoge{display:flex;display:-webkit-flex;display:-ms-flexbox;justify-content:flex-start;-webkit-box-pack:flex-start;-ms-flex-pack:flex-start;align-items:baseline;-webkit-box-align:baseline;-ms-flex-align:baseline;}

なんとなくわかるかね？

`position:absolute`

これは自分の記事で度々紹介している@mixinなのだけど、せっかくなのでまた載せておく。
position:absoluteも毎回行数が多くてめんどくさいので@mixinにして呼び出しちゃいます。

@mixinabsolute($top:null,$right:null,$bottom:null,$left:null){position:absolute;@if$top!=null{top:$top;}@if$right!=null{right:$right;}@if$bottom!=null{bottom:$bottom;}@if$left!=null{left:$left;}}

これは
$top,$right,$bottom,$leftの値がnullじゃないときは、
topには$topの値を、rightには$rightの値を、bottomには$bottomの値を、leftには$leftの値を入れてねっていう@mixinですな。

使うときはこんな感じ。

.hoge{@includeabsolute($top:0,$left:0);}

こうすると、コンパイルされるCSSは

.hoge{position:absolute;top:0;left:0;}

こうなる。1行で済むので記述量が減ってだいぶすっきりだな。

メディアクエリ

Scss使ってて一番「便利だな〜〜〜〜〜」と思うのは、これ使ってるときかもしれぬ。

レスポンシブ対応するページを作る際、メディアクエリを使うと思うのだけど、Scssでやるとこんな風な@mixinが作れる。

$min_pc:769px;//デスクトップ(769px)以上@mixinmin_pc{@mediascreenand(min-width:$min_pc){@content;}}

$min_pcは変数だな。ここにはメディアクエリでよく使う769pxを入れたぞ。
@mixinの中身にこれを当てはめると

@mediascreenand(min-width:769px){@content;}

となるな。

で、この@contentというのは、実行処理の@includeから@mixinにスタイルセットを渡すことができる機能だぞ。
-@content : @mixinにスタイルセットを渡す | 集の一期一会

ちょっとなに言ってるかわからない人、わたしもよくわからないけど、つまり、

.hoge{font-size:16px;@includemin_pc{font-size:28px;}}

としたとき、コンパイルされるCSSはこうなるのだ。

.hoge{font-size:16px;}@mediascreenand(min-width:769px){.hoge{font-size:28px;}}

メディアクエリもクラスに入れ子で書くことができるので、
どのクラスにどんなスタイルが当たっているのか確認するのが格段に楽になるぞ。

ブラウザハック

ブラウザハックもIEバグに苦しんでる時とかに使うよな。
これもメディアクエリと同じ感じで、@mixinにしておくと便利だぞ。

/* IE10 以降にのみ適用される */@mixinIE{@mediaalland(-ms-high-contrast:none){@content;}}/* Safariのみ適用される */@mixinSafari{@mediascreenand(-webkit-min-device-pixel-ratio:0){@content;}}

使い方はメディアクエリのときと同様、ハックしたい部分で@includeで呼び出せばおk。

SassとScssの違い

最後にSassとScssの違いを。
さっきの、

.container{display:flex;margin:0auto;width:80%;&__inner{background:#F5CE3F;margin:10px;padding:020px;border-radius:10px;}&__title{font-size:26px;font-weight:bold;}&__text{font-size:14px;}}

これは、Sassで書くと

.containerdisplay:flexmargin:0autowidth:80%&__innerbackground:#F5CE3Fmargin:10pxpadding:020pxborder-radius:10px&__titlefont-size:26pxfont-weight:bold&__textfont-size:14px

こうなる。
インデントで入れ子を全部管理しているような感じなので、インデントをずらすとバクッと表示崩れが起きる感じ。

シンプルな記述を好む人はこっちの方が使いやすいのかな？とか思うんだが、
私は{}に慣れ親しんでしまってるので、断然Scssが好きだなぁ。

最後に

ちょっとでもScssの便利さが伝わって、「使えそう」とか「使ってみたい」とか思ってもらえたら嬉しいぞ！

じゃあの〜〜〜〜〜〜

↧

枠の上に文字を乗せるやり方

November 5, 2019, 6:22 am

≫ Next: 年末まで毎日webサイトを作り続ける大学生〜18日目 Ap●le 公式サイトのFooterを真似して作ってみる〜

≪ Previous: 【これからScssを使う人へ】Scssの使い方と便利さをさらっと紹介するぞ

始めに

枠のあるデザインで以下のような枠線を一部消して文字を置くような実装をしたいときのやり方を記事にしました。

See the Pen 枠の上に文字を乗せる by wintyo (@wintyo) on CodePen.

実装方法

やり方は単純で、以下のようなことをしているだけです。

1px分の白線を上に被せて消しているように見せる
ラベルを所定の位置に移動する

この2つのことをそれぞれの要素で行ってもいいですが、ラベル要素から絶対パスで線を引いておくと消す長さを考えなくてもよくなります。

html

<divclass="area"><divclass="area__label">ラベル</div><divclass="area__content">コンテンツ</div></div>

scss

.area{position:relative;width:300px;height:100px;border:solid1px#f00;border-radius:5px;background-color:#fee;&__label{position:absolute;top:0;left:20px;font-weight:600;padding:010px;// paddingを左右にいれて消す線の長さを延ばすtransform:translateY(-50%);&::before{position:absolute;z-index:-1;// 何もしないと線が上に来ていたので-1して後ろに回り込ませるleft:0;bottom:50%;// top: 50%だと1pxずれていたのでbottomから計算するwidth:100%;// 親要素の幅を参照するため必ず文字分は消せるheight:1px;background-color:#fff;content:'';}}&__content{padding:20px;}}

終わりに

初めてこういったデザインを見るとどうやって実装するのか悩みそうですが、意外と背景色を上に被せて消すというやり方はあります（フキダシとか）。このような実装は知っていると便利なので誰かの役に立てたなら幸いです。

↧

年末まで毎日webサイトを作り続ける大学生〜18日目 Ap●le 公式サイトのFooterを真似して作ってみる〜

November 5, 2019, 6:59 am

≫ Next: アコーディオンの速度を統一する

≪ Previous: 枠の上に文字を乗せるやり方

はじめに

こんにちは！
年末まで毎日webサイトを作っている者です。
以前、Ap●leの公式サイトのファーストビューを真似して作ったんですが、今回はFooterを真似して作ってみました。
前は見た目だけでしたが今回は機能の方に焦点を当てました。
扱う技術レベルは低いですが、同じように悩んでる初心者の方を勇気付けられれば幸いです。
今日は18日目。(2019/11/5)
よろしくお願いします。

サイトURL

https://sin2cos21.github.io/day18.html

やったこと

Ap●leのFooterを真似して作ってみました。
公式サイトの方はこれです（ぼかしています）↓

画面サイズが小さければ縦に並んで、クリックすれば展開するような仕様です。
では、真似したやつを見てみましょう！↓

まずhtmlですが、表示したいものをリストで並べていきます。

<divclass="footer_wrapper"><divclass="footer_direction_column"><h3class="panel">製品と情報と購入</h3><ulclass="closed"><li>Mec</li><li>Mec</li><li>Mec</li><li>Mec</li><li>Mec</li><li>Mec</li><li>Mec</li><li>Mec</li><li>Mec</li><li>Mec</li><li>Mec</li></ul></div><divclass="footer_direction_column"><h3class="panel">サービス</h3><ulclass="closed"><li>Epple</li><li>Epple</li><li>Epple</li><li>Epple</li></ul><h3class="panel">アカウント</h3><ulclass="closed"><li>Upple</li><li>Upple</li><li>Upple</li></ul></div>
...
<!--以下続く-->

サイズが小さくなるとリスト部分の表示が消えてh3部分のみ残ります。その実装は、mediaクエリを使って一定以下のサイズになったらdisplayをnoneにしているだけです。(closedクラスで実装）

@mediascreenand(max-width:767px){.closed{display:none;}...

最後に、画面サイズが小さい時にパネルをクリックするとリストの文字列が出たり消えたりする実装ですが、そこはJavaScriptで実装しています。

window.onload=function(){lettest=document.getElementsByClassName('panel');console.log(test);functionh3Click(event){console.log(event.target);}for(vari=0;i<test.length;i++){console.log(test[i]);test[i].addEventListener('click',function(e){console.log(1);varnowNode=e.target;varnextNode=nowNode.nextElementSibling;if(nextNode.className=='closed'){nextNode.classList.remove('closed');console.log(2);}else{nextNode.classList.add('closed');console.log(3);}})}}

イベントリスナーでクリックされたら関数を実行します。
関数にはeventが引数に渡されていて、nextElementSiblingでクリックされた次の要素、つまり出たり消えたりするリストを特定しています。
クラスにclosedがあったら外し、なかったらつけることで、クリックするとあたかも出たり消えたりするように見えます。ようはdisplay: none;を付けたり外したりしてるだけですね。

感想

途中、getElementsByClassNameでとった要素がうまく反映されなくてかなり時間を食いました。結局、window.onloadをソースコードの頭につけることで解決したんですが、実行順序とか、DOMの状態を意識しないとこれからも同じことが起こるなぁと反省しました。

最後までお読みいただきありがとうございます。明日も投稿しますのでよろしくお願い致します。

↧

アコーディオンの速度を統一する

November 5, 2019, 7:20 pm

≫ Next: stylelint "at-rule-no-unknown" ルールでエラー

≪ Previous: 年末まで毎日webサイトを作り続ける大学生〜18日目 Ap●le 公式サイトのFooterを真似して作ってみる〜

index.html

<!DOCTYPE html><html><head><linkrel="stylesheet"href="./index.css"></head><body><divclass="a"><buttontype="button"class="toggle button">aaa</button><divclass="area">
                aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
                aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
            </div></div><divclass="a"><buttontype="button"class="toggle button">aaa</button><divclass="area">
                aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
                aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
                aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
                aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
            </div></div><divclass="a"><buttontype="button"class="toggle button">aaa</button><divclass="area">
                aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
            </div></div><script src="https://code.jquery.com/jquery-3.3.1.js"></script><script>$(function(){varselect=document.getElementsByClassName("area");varbutton=document.getElementsByClassName("button");varheight=[];vardur=[];for(vari=0;i<select.length;i++){console.log(select[i]);height[i]=$(select[i]).height();dur[i]=height[i]/0.1;/*0.1は任意の速度*/$(select[i]).css({display:"none"})$(button[i]).addClass("button"+i);};vartoggleFunction=function(button,index){$(button).click(function(){$(this).next().slideToggle(dur[index]);});};toggleFunction(".button0",0);toggleFunction(".button1",1);toggleFunction(".button2",2);});</script></body></html>

index.css

.a{width:100px;display:block;}.a>button{width:100%;}.a>.area{width:100%;word-break:break-all;}

↧

stylelint "at-rule-no-unknown" ルールでエラー

November 5, 2019, 7:46 pm

≫ Next: width の合計を 100%; にしたときに改行が入って横幅に納まり切らなくなる問題の解決

≪ Previous: アコーディオンの速度を統一する

Sassファイルの整形（Lint）をしてくれるツールはいろいろありますが、中でもstylelintがいい感じなので好んで使っています。

"at-rule-no-unknown" でエラー発生

ところが、"at-rule-no-unknown"すなわち「標準的でない@-規則」というルールにおいて、これを適用させたくなかったのでfalseを設定したところ、Invalid Option: Unexpected option value "false" for rule "at-rule-no-unknown"と怒られてしまいました。

stylelintrc.json

"rules":{"at-rule-no-unknown":false,}

上記の書き方だとエラーになります。falseをnullにしてもダメです。
次のようにoptionをtrueにした上で、例外ルールを記述するように書き直すとエラーが出なくなりました。

stylelintrc.json

"rules":{"at-rule-no-unknown":[true,{"ignoreAtRules":["include","mixin","each"]}],}

これはstylelintの"at-rule-no-unknown"ルールのoptionにtrueしかないのが原因でした。trueがあるならfalseもあるじゃん！という思い込みが罠でした。これはなかなかの初見殺し…

↧

width の合計を 100%; にしたときに改行が入って横幅に納まり切らなくなる問題の解決

November 6, 2019, 12:03 am

≫ Next: 親要素の幅を超えたときのいろいろ

≪ Previous: stylelint "at-rule-no-unknown" ルールでエラー

問題点

以下は子要素がすべて display: inline-block;により横並びになっている。
この場合要素間(<time>,<span>の間)に改行が半角スペースとして要素の間に挿入されてしまう。

<liclass="scroll-item"><ahref="#"><timeclass="date"datetime="2019-10-19">2019.10.19 SUN</time><spanclass="category news">NEWS</span><spanclass="title">aaaを更新しました。</span></a></li><liclass="scroll-item"><ahref="#"><timeclass="date"datetime="2019-10-19">2019.10.19 SUN</time><spanclass="category">TOPIC</span><spanclass="title">あいうえお</span></a></li>

.scroll-list.date{/* border: 1px solid red; */display:inline-block;width:19%;font-size:1.0rem;}.scroll-list.category{display:inline-block;width:8%;font-size:1.0rem;}.scroll-list.title{display:inline-block;width:73%;padding-left:15px;font-size:1.0rem;}

その半角スペースのせいでwidthが100%を超えてしまい、横幅に納まり切らなくなる。

解決

親要素にfont-size: 0;を記述することで挿入された半角スペースのサイズを0にする。

.scroll-list.scroll-itema{/* border: 1px solid red; */display:block;padding:10px15px;color:#333;transition:background-color0.1s;font-size:0;}

そうすると子要素も0になり文字が表示されなくなってしまうので、font-size: 1.0rem;のように指定し直す必要がある。

.scroll-list.date{/* border: 1px solid red; */display:inline-block;width:19%;font-size:1.0rem;}.scroll-list.category{display:inline-block;width:8%;font-size:1.0rem;}.scroll-list.title{display:inline-block;width:73%;padding-left:15px;font-size:1.0rem;}

↧

親要素の幅を超えたときのいろいろ

November 6, 2019, 1:44 am

≫ Next: 【CSS】すべての要素に対してスタイルを反映する

≪ Previous: width の合計を 100%; にしたときに改行が入って横幅に納まり切らなくなる問題の解決

通常時

通常時は以下のように子要素の幅が親要素を超えた場合は文字が折り返される。

<body><divclass="box"><p>あああああああああああああ</p></div></body>

.box{border:1pxsolidred;height:100px;width:100px;}

折り返しを禁止する

.box{border:1pxsolidred;height:100px;width:100px;white-space:nowrap;}

white-space: nowrap;とすることで、折り返しを禁止する。

はみ出した文字を非表示にする

.box{border:1pxsolidred;height:100px;width:100px;white-space:nowrap;overflow:hidden;}

white-space: nowrap;とoverflow: hidden;を組み合わせることで実現

↧

【CSS】すべての要素に対してスタイルを反映する

November 6, 2019, 2:49 am

≫ Next: cssで四隅にだけ囲み枠をつける方法

≪ Previous: 親要素の幅を超えたときのいろいろ

はじめに

それぞれの要素に対してtext-align:centerのようにスタイルを設定しなくても、があるので紹介する。

やり方

*（アスタリスク）を用いる。
例以下に示す。

*{　text-align:center;}

おわりに

こちらを参考。

↧

cssで四隅にだけ囲み枠をつける方法

November 6, 2019, 3:02 am

≫ Next: three.jsでフェードイン・アウトを実装する方法

≪ Previous: 【CSS】すべての要素に対してスタイルを反映する

「四つ角」というワードで検索するとなかなか情報が出てこない。
毎度忘れて検索しがちなので備忘録のためにまとめておく。
DEMO（codepen.io）

borderを擬似要素で隠すイメージ

index.html

<divclass="wrapper"><span>wrapper</span></div>

style.css

.wrapper{text-align:center;width:100px;position:relative;border:solid1pxblack;background-color:#fff;}.wrapper::before,.wrapper::after{position:absolute;content:"";display:block;background-color:#fff;}.wrapper::before{top:-1px;bottom:-1px;left:5px;right:5px;}.wrapper::after{top:5px;bottom:5px;left:-1px;right:-1px;}.wrapperspan{position:relative;z-index:1;}

参考：3 CSS techniques for border only in corners

↧

three.jsでフェードイン・アウトを実装する方法

November 6, 2019, 3:06 am

≫ Next: SCSSに色の変数を置くとSyntaxErrorと怒られる

≪ Previous: cssで四隅にだけ囲み枠をつける方法

古今東西のゲームで用いられている、フェードインやフェードアウトといったエフェクトは、three.jsではどのように実現するのでしょうか。ググったところ、2種類の方法があることが分かりました。すなわち、

(HTML/CSS)div要素をcanvasの上に重ねて、opacityを変化させる
(three.js)カメラの前に透明な板を置いて、opacityを変化させる

今回は両方実装してみることにしました。

結論

どっちでも実現はできるので、好きな方を使っていい。

div要素を重ねて実現する方法

こちらはCSSを使ってフェードを行います。
まずHTMLとしての要素構成は以下のようになります。

html

<divclass="container"><divid="curtain"class="child"></div><canvasid="canvas"class="child"></canvas></div>

このdiv#curtainをcanvasの上において、透明度を増減させます。
続いてCSSは以下のようになります。

css

.container{position:relative;width:400px;height:300px;}.child{position:absolute;margin:auto;width:100%;height:100%;left:0px;top:0px;}#curtain{z-index:2;background:black;opacity:50%;}#canvas{z-index:1;}

重要なのは、canvasとdiv#curtainをposition: absoluteを使って重ねるところと、z-indexを指定してdiv要素をcanvasより前に表示させるところですね。

最後にjavascriptでdiv#curtainのopacityスタイルをいじって透明度を変化させます。

javascript

functionanimate(){curtain_opacity+=0.01;if(curtain_opacity>=1.0)curtain_opacity=1.0;curtain.style.opacity=curtain_opacity;renderer.render(scene,camera);requestAnimationFrame(animate);}

サンプル(jsFiddle)

実際に動くサンプルをjsFiddleに用意しました。

この方法のメリット

実装がかんたん！

この方法のデメリット

ブラウザの実装の違い等の理由で、div要素とcanvasがずれたときに困る(かもしれない)

カメラの前に板を置いて実現する方法

こちらの方法ではthree.jsだけで完結することができます。一方で、行列やクォータニオンを取り扱うので、それらについての何の知識も持っていないと理解が難しいかもしれません。

さて、こちらの方法は以下のようなステップで行います。

板のメッシュを生成する
板の位置を決める
板の向きを決める
板の透明度を変化させる

板のメッシュを生成する

別にどんな板を作ってもよいのですが、ここはスタンダードに、THREE.PlaneGeometryとTHREE.MeshBasicMaterialを使った板を作ることにします。
コードは以下の通りです。

javascript

letcurtain_opacity=0.0;constcurtain_color=newTHREE.Color("rgb(255, 255, 255)");constgeo_curtain=newTHREE.PlaneGeometry(2.0,2.0);constmat_curtain=newTHREE.MeshBasicMaterial({color:curtain_color,transparent:true,opacity:curtain_opacity});constcurtain=newTHREE.Mesh(geo_curtain,mat_curtain);

説明では板というワードを使いつつ、コードではカーテンという語を使っているのはご容赦ください(板→カーテンと読み替えてください)。
板のサイズはカメラの画角と視錐台の奥行(near,far)、画面のアスペクト比等に応じて適宜変更してください。curtain_opacityは透明度の初期値(0は100%透明)、curtain_colorは板の色を表しています。こちらも用途に応じて変更してください。

板の位置を決める

作った板をカメラの真正面に置きます。それにはまず、カメラを基準とした座標系で考えます。カメラの位置が(0,0,0)となります。向きについては、特に何もいじっていないデフォルト状態の場合は、カメラから見て右側がX軸の正方向、上側がY軸の正方向、そして真正面がZ軸の負方向となります(OpenGL/webGLの場合)。
ということで、カメラのちょっと手前の座標は(0,0,-Δz)と表せます。

次にこれをワールド座標系に変換します。これは簡単に得ることができます。カメラのObject3D.matrixWorldプロパティを通じてカメラの位置と姿勢を表す行列(モデル行列)が得られます。これと、先ほどの座標(0,0,-Δz)を掛けるだけです。
ただし、1点だけ注意点があります。matrixWorldはレンダリング時に生成されますが、それ以前はundefinedなので、updateMatrixWorldを使って手動で算出してやる必要があります。

constdistance=0.5;//カメラと板の距離constpos=newTHREE.Vector3(0.0,0.0,-distance);camera.updateMatrixWorld(true);//matrixWorldを更新pos.applyMatrix4(camera.matrixWorld);

この位置に物体を置いてやれば、カメラの直前に表示されます。カメラと板の距離はカメラのnear-clipping-planeより大きくなるようにしてください。

板の向きを決める

しかし今回それだけでは十分ではありません。球体ならば問題ありませんが、置きたいのは板なので、板の向きもしっかり揃えてやる必要があります。

板はカメラの向きに対して真正面に構えて欲しいです。専門用語でいうところのビルボードというやつですね。これを実現するには、カメラの向きを板にそのままコピーしてやればOKです。具体的にはObject3D.quaternionとObject3D.setRotationFromQuaternionを使います。

curtain.setRotationFromQuaternion(camera.quaternion);

これだけで板はカメラに正対した状態になります。

板の透明度を変える

最後に、時間経過に応じて、板の透明度を変化させます。メッシュの.material.opacityを操作します。

curtain.material.opacity=curtain_opacity;

サンプル(jsFiddle)

ここまでのコードをまとめたのものをjsFiddleに用意しました。

この方法のメリット

three.jsだけで完結できる

この方法のデメリット

板よりオブジェクトが手前に来ると写り込んでしまう
カメラが動くたびに板の位置・姿勢を更新する必要がある(あまり大した問題ではない)

余談

今回初めてjsFiddleでthree.jsを使ったのですが、予め用意されているthree.jsのバージョン105ではなぜかdocument.getElementByIdが機能しなくて、結局CDNからバージョン109をインポートして使用することにしました。jsFiddleでthree.jsをやる人はご注意ください。

↧

SCSSに色の変数を置くとSyntaxErrorと怒られる

November 6, 2019, 4:19 am

≫ Next: 年末まで毎日webサイトを作り続ける大学生〜19日目 Ap●le 公式サイトのコンテンツ部分を真似して作ってみる〜

≪ Previous: three.jsでフェードイン・アウトを実装する方法

＄redがなんや書き方エラーすわ...

なんでやろ...
やったことは...

SCSSに使い回す色を用意する

stylesheets/config/colors

よくimportし忘れちゃうから一応確認しておくか...(一応ね...)

stylesheets/application.scss

ま、あるよね...

じゃあ何が原因？

どうやらエラーの原因は
はじめにrails newで作成される
application.css内に記述してある
1行目から15行目のコメントアウトっぽいやつ。

scssに書き換える際にファイル名だけ変えている為、中身が
そのままになっていたから？っぽい。

改めて
stylesheets/appllication.scssのコメントアウトっぽいのを消して
実行すると...

ちゃんとIndexファイルが読み込まれましたね。

cssで書いてあげる時は、さっきのコメントアウトは使うっぽい？
まだまだわからない事だらけだが、精進あるのみだ。。。

↧

年末まで毎日webサイトを作り続ける大学生〜19日目 Ap●le 公式サイトのコンテンツ部分を真似して作ってみる〜

November 6, 2019, 4:31 am

≫ Next: cssでgridを表現できるなんて

≪ Previous: SCSSに色の変数を置くとSyntaxErrorと怒られる

はじめに

こんにちは！
年末まで毎日webサイトを作っている者です。
以前、Ap●leの公式サイトのコンテンツ部分を真似しようと試みました。
微妙な仕上がりです。
同じように再現するのって難しいなぁ・・・。
扱う技術レベルは低いですが、同じように悩んでる初心者の方を勇気付けられれば幸いです。
今日は19日目。(2019/11/6)
よろしくお願いします。

やったこと

今日は、要素の配置を思い通りの場所に置こう！ということで他サイトの完コピを目指しました。全然完コピではない点はご了承ください。まずはgifでどうぞ（本家サイトと自分が作ったのを切り替えながら比較しています。最初に映るのは完璧にコピーできたわけではなくただの本家サイトです）↓

構成は非常にシンプルです。

<divclass="content_page"><h2id="content_page_title">Ephene 50000 Pro</h2><h3id="content_page_description">カメラも、ディスプレイも、性能も、Pro。</h3><div><aclass="icon_bector"href="/">さらに詳しく</a><aclass="icon_bector"href="/">購入</a></div></div>

class="content_pag"のところでが背景の画像を指定しています。
background-size: coverで全体的に画像がフィットするようにしています。↓

.content_page{...background-image:url("iphone.jpg");background-size:cover;}

あとは画面サイズが小さくなったらメディアクエリで大きさを調整します。↓

@mediascreenand(max-width:735px)and(min-width:0px){.content_page{height:350px;}#content_page_title{font-size:30px;}.icon_bector{font-size:11px;}#content_page_description{font-size:14px;}}

ただこれだけでは画像がややフィットぐらいのフィット感だったので、もしかして画像サイズからこだわらないといけないのかな？という疑念が湧いています。
画像はwebサイトで重要な役割を果たすので思いのママに操れるようになっておきたい・・・。というわけで調査して判明したらまた画像についてはご報告します。

あとついでに、擬似クラスも今日勉強したので載せておきます。

.icon_bector::after{padding-left:.3em;content:">";font-size:.4em;}.icon_bector:hover{text-decoration:underline;}

::afterは.icon_bectorクラスを指定している要素のすぐ後に何か表示したいときに使います。
cnotentプロパティで表示したいものを指定しています。

:hoverの方はクラスの上にカーソルが乗ったらスタイルを当ててくれる便利機能です。
これらを利用してJavaScriptをスタイル変更のためだけに多用することは防いで行きたいですね。

感想

やってみて分かることって多いですね。自分はもっとできると根拠もなしに思ってましたが、今日の内容だけでも2時間半ぐらいかかってしまいました。自信がなくなる〜。年末になる頃にはweb制作の仕事を取れるようにするぞ！

最後までお読みいただきありがとうございます。明日も投稿しますのでよろしくお願いします。

参考

PAKUTASHO (https://www.pakutaso.com/20190606175post-21617.html)

ぱくたそさん画像をお借りしました。ありがとうございます！

↧

cssでgridを表現できるなんて

November 6, 2019, 8:58 pm

≫ Next: 開発者向けのウェブ技術（CSS初級編）その1

≪ Previous: 年末まで毎日webサイトを作り続ける大学生〜19日目 Ap●le 公式サイトのコンテンツ部分を真似して作ってみる〜

今回、とあるサイトを構築しようと一念発起しました。
まぁ、遊びの範疇なので、以前作った個人ブログをもとにさくっと行おうと。
gatsbyを使ってnetlifyへデプロイすることにしました。Theme自体は転がっていたものを使います。
gatsbyのなのでReactで作られており、これをいろいろカスタマイズしていく段階で、
gridを使う必要が出てきました。

bootstrapなどのCSSフレームワークに必ず含まれているgridなので、
まぁこのThemeが使っているCSSフレームワークのgridを使おうと思いましたが、
「あれ？なにもはいっていない。。。」
「このご時世そんなことあるか？」と思いつつ調査してみると、「grid-template-column」の記述が。。
調べていくうちにCSSだけでgridを表現できるということがわかりました。
「あー、CSS書いてくのかー。めんどくせーな」と思いつつ調査してみると、意外と便利そうなので今回まとめておきます。

メリット

もともと何もCSSフレームワークが入っていないThemeにたいして、bootstrapを適応するのは至難の業。絶対フォームやら見た目がある程度変わること前提できると入れますが、CSSで書けばその必要はなく他への影響が最小限に押さられます。
CSSフレームワークは正直言ってクラス地獄になりますがCSSのみで対応すればクラスはすっきりする。

デメリット

ブラウザ依存がいまだあるらしいので、何とかしないといけない。
CSSの記述が多くなるのがめんどくさい。

メリデメはあるものの、今回は使ってみるの一択なので、やってみます。

概念

まずはイメージが大事ということで、イメージをお伝えすると。ばっこっととったコンテナ（枠）を縦横何分割し何pxとるかを定義し、その枠にたいしてアイテムの位置を指定していくイメージです。
CSSフレームワークでは、rowを定義してそこにアイテムを何分割しておいていくかという言ってしまえば１次元のイメージですが、CSSでは縦横の２次元になるイメージです。

今回の目的としては、サイドバーを追加したかったので、
こんなイメージです。

まずはコンテナを定義する

<divid="container"><div>sidebar</div><div>contents</div></div>

簡単なHTMLです

#container{display:grid;grid-template-columns:150px1fr;}

コンテナにたいして、display: grid;とし、列を定義します。
上記の場合だと２列で１列目が150px、2列目は残りの幅ということになります。
行と列が定義し、今回は列だけでよいのでgrid-template-rowsは使いませんが、それぞれの意味としては下記とのこと。

grid-template-rows: 行のトラックの高さを半角スペースで区切って指定
grid-template-columns: 列のトラックの幅を半角スペースで区切って指定
rfは見慣れない単位ですが残りの幅という意味らしいです。基本1rfで使うと思いますが2rfにすれば残りの幅の倍の幅ということになります。

今回私がやりたかったことはこれで実現できてしまいますが、もっといろんなことができそう。

例えば

分割したコンテナの任意の位置にアイテムを作る。
分割したコンテナの一部を結合する。
エリアに名前を付けて管理する。
repeatで完結に定義する。

あとは素晴らしい記事があったので、こちらを参照すれば、よくわかる。

↧

開発者向けのウェブ技術（CSS初級編）その1

November 6, 2019, 7:49 am

≫ Next: Tailwind CSS + Laravel Mix で CSS を書かないコーディングを開始してみた

≪ Previous: cssでgridを表現できるなんて

初めに

おはこんばんちわ。
普段はコツコツサーバサイドの開発をしている者です。

今回、モック（本番に近い見た目のHTML＋CSS＋ JavaScriptで構成した画面）の作成依頼がきました。

良い機会なので
CSSをチュートリアル（教科書的なもの）で学習してみることにしました。

そしてそれを簡単に見返せるように、記述したいと思います。（深堀したい方は「参照したサイトのチュートリアルをやると良いと思います。）

項目

CSSの仕組み
HTMLへのCSS適用方法
CSSルール(それぞれの名前)
セレクタ
カスケードと継承
プロパティ値の計算
＠rules
参照にしたサイト

CSSの仕組み

ブラウザがHTMLをロード
HTMLをDOMに変換
HTMLにリンクされている画像、CSSなどを取得
CSSを解析し、DOMに適用
画面表示

DOM（Document Object Model）とは

マークアップ言語の各要素、属性、およびテキストは、ツリー構造にしたもの

HTML→DOMのイメージ

↓HTML
<p>
  Let's use:
  <span>Cascading</span><span>Style</span><span>Sheets</span></p>↓DOM
P
├─ "Let's use:"
├─ SPAN
|  └─ "Cascading"
├─ SPAN
|  └─ "Style"
└─ SPAN
   └─ "Sheets"

HTMLへのCSS適用方法

※ソースはかなり割愛

外部スタイルシート

hoge.html

<!DOCTYPE html><html><head><linkrel="stylesheet"href="styles.css"></head><body><p>・・・・</p></body></html>

styles.css

p{color:red;}

htmlのhrefでCSSのファイルを指定

内部スタイルシート

hoge.html

<!DOCTYPE html><html><head><style>p{color:red;}</style></head><body><p>・・・・</p></body></html>

htmlの<style></style>の中に記述

インラインスタイル

hoge.html

<!DOCTYPE html><!DOCTYPE html><html><head></head><body><pstyle="color:red;">This is my first CSS example</p></body></html>

htmlのタグにstyle="プロパティ:プロパティ値;"を記述
基本使わない！！！メンテナンスが大変

CSSルール(それぞれの名前)

css

p{color:red;}

pの部分 → セレクタ (selector)
color: red; → 宣言 (declaration)
color → プロパティ (property)
red → プロパティ値 (property value)

セレクタ

さまざまな種類のセレクタ

セレクタ名	例（HTML）	例（CSS）
要素セレクタ（HTMLの要素	<p>	p
IDセレクタ	<p id="my-id">	#my-id
クラスセレクタ	<p class="my-class">	.my-class
属性セレクタ	<img src="myimage.png">	img[src]
擬似クラスセレクタ	<a>	a:hover

複数の要素を選択

css

p,li,h1{color:red;}

セレクタの間にカンマを挿入
<p>、<li>、<h1>を選択

子の要素を選択

css

liem{color:reb;}

２つのセレクタの間に半角スペースを挿入
<li>にネストされている<em>の内容を選択

直後の要素を選択

css

h1+p{font-size:200%;}

２つのセレクタの間に半角プラス（+）を挿入
<h1>直後の<p>の内容を選択

リンクのスタイリング（選択）

css

a:link{color:pink;}

未訪問のリンクを選択

css

a:visited{color:green;}

訪問後のリンクを選択

css

a:hover{text-decoration:none;}

オンカーソルのリンクを選択

カスケードと継承

カスケード

html

<h1class="main-heading">・・・</h1>

css

.main-heading{color:red;}h1{color:blue;}

同じ選択値に複数のCSSを適用した場合の適応ルール
<h1>の文字色「青」ではなく、main-headingクラスの文字色「赤」を適用
より具体的なセレクタのプロパティを適用

継承

html

<p>・・・<span>hoge</span></p>

css

body{color:blue;}

親にプロパティを設定した場合、子にも適応（継承されないものもある（widthなど））
<body>の文字色「青」を子の<span>にも適応
<span>に文字色「赤」を設定した場合は、その要素だけプロパティを設定

継承の制御

html

<ul><li>Default <ahref="#">link</a></li><liclass="my-class-1">Inherit<ahref="#">link</a></li><liclass="my-class-2">Reset<ahref="#">link</a></li><liclass="my-class-3">Unset<ahref="#">link</a></li></ul>

css

body{color:green;}.my-class-1a{color:inherit;}.my-class-2a{color:initial;}.my-class-3a{color:unset;}a{color:red;}

inherit→親要素のプロパティを設定（継承の有効化）
initial→ブラウザのデフォルト値（デフォルト値がなく、継承可能な場合は、継承値を設定）
unset→プロパティ値をリセット（継承可能な場合は、inheritでそうでない場合はinitialを設定
1行目のリンクが「赤」、2行目のリンクが「緑」、3行目のリンクが「黒」、4行目のリンクが「緑」で表示

全てのプロパティ値をリセット

html

<blockquote><p>This blockquote is styled</p></blockquote><blockquoteclass="fix-this"><p>This blockquote is not styled</p></blockquote>

css

blockquote{background-color:red;border:2pxsolidgreen;}.fix-this{all:unset;}

プロパティにallを設定し、プロパティ値にunsetを設定
<blockquote class="fix-this">の内容をデフォルトのプロパティ値で表示

!important

html

<pclass="better">....</p><pclass="better"id="winning">important</p>

css

#winning{background-color:red;}.better{background-color:green!important;}p{background-color:blue;}

プロパティ値の後に !importantを設定
!importantを設定したプロパティ値がカスケードと継承に関係なく適応
2行とも緑の背景色

プロパティ値の計算

算出結果をプロパティ値に設定

width:calc(90%-30px);

選択した幅を90%-30pxの幅に変更

データ型<angle>

transform:rotate(0.2turn);

時計周りに2/10*360回転（確認）

@rules

外部CSSファイルの取込

@import'styles2.css';

条件付き適用

body{background-color:pink;}@media(min-width:30em){body{background-color:blue;}}

ビューポートが30emを超えるブラウザにのみ適用

参照にしたサイト

開発者向けのウェブ技術>チュートリアル

https://developer.mozilla.org/ja/docs/Web/Tutorials

TODO

カスケードと継承をちゃんと理解する

↧

Tailwind CSS + Laravel Mix で CSS を書かないコーディングを開始してみた

November 6, 2019, 7:24 pm

≫ Next: CSSアニメーションはじめの第一歩

≪ Previous: 開発者向けのウェブ技術（CSS初級編）その1

Tailwind CSS とは？

Tailwind CSSとは、ユーティリティ・ファーストなCSSフレームワーク。CSSフレームワークというと、Twitter Bootstrapがとみに有名であるが、完成品ができあがっているイメージの Bootstrap と比較して、ローレベルなCSSフレームワークとして設計されており、どんなデザインにも使えるカスタマイズのしやすさが特徴。詳しくは公式サイトを見てください。

Laravel Mix とは？

Laravel Mixとは、webpackを使いやすくしてくれるラッパーツール。その名の通り Laravelで開発するアプリで真価を発揮しますが、Laravel を使用しない場合でも便利です。

セットアップ

npm イニシャライズ

まずプロジェクトディレクトリを作成し、npmプロジェクトを初期化しましょう。

$mkdir tailwind-laravel-mix
$cd tailwind-laravel-mix
$ npm init -y

package.jsonが自動的に生成されます。

Laravel Mix をインストール

$ npm install laravel-mix@4.x --save-dev$cp node_modules/laravel-mix/setup/webpack.mix.js ./
$mkdir src &&touch src/app.{js,scss}

node_modules/ディレクトリ内に Laravel Mix がインストールされます。
プロジェクトディレクトリルートに webpack.mix.jsが作成されます。
src/ディレクトリ内に空の app.jsと app.scssの２ファイルが作成されます。

Laravel Mix を使って Sass ファイルをコンパイルしてみる

$ node_modules/.bin/webpack --config=node_modules/laravel-mix/setup/webpack.config.js

まだ app.jsと app.scssに何も書いていないので、単に空の app.jsと app.cssが dist/ディレクトリに作成されるはずです。

長いので npm scripts に登録しておくと便利ですね。

package.json

"scripts":{"build":"node_modules/.bin/webpack --config=node_modules/laravel-mix/setup/webpack.config.js"},

次の短いコマンドで実行できるようになります。

$ npm run build

エラーなく実行できればOKです。

Tailwind CSS をインストール

$ npm install tailwindcss

node_modules/内に Tailwind CSS がインストールされます。

Tailwind CSS 用のconfigファイルを作成

$ npx tailwind init

tailwind.config.jsファイルが自動で生成されます。

webpack.mix.js内で生成した tailwind.config.jsファイルを読み込むように設定しましょう。

webpack.mix.js

constmix=require('laravel-mix');consttailwindcss=require('tailwindcss');mix.js('src/app.js','dist/').sass('src/app.scss','dist/').options({processCssUrls:false,postCss:[tailwindcss('./tailwind.config.js')],});

Tailwind CSS を使用する

src/app.scssで Tailwind CSS をインポートしてみましょう。

src/app.scss

@tailwindbase;@tailwindcomponents;@tailwindutilities;

ビルドしてみましょう。

$ npm run build

dist/app.css内に Tailwind CSS のスタイルが書き込まれたら成功です。

HTML を作成してみて、実際の表示も確認してみましょう。

dist/index.html

<!DOCTYPE html><htmllang="ja"><head><metacharset="UTF-8"><title>Tailwind CSS Example</title><linkhref="https://fonts.googleapis.com/css?family=Sawarabi+Gothic&display=swap"rel="stylesheet"><linkrel="stylesheet"href="app.css"></head><bodyclass="bg-gray-100"><divclass="max-w-sm mx-auto p-6 bg-white rounded-lg shadow-xl"><h1class="block text-xl font-bold leading-normal font-sans">ユーティリティ・ファースト</h1><pclass="block text-base font-normal leading-relaxed font-sans">プリミティブなユーティリティの固定されたセットから複雑なコンポーネントを構築します。</p></div><script src="app.js"></script></body></html>

こんな感じで、まだ何もCSSを書いていないですが、スタイルが適用されたWebページが見えるはずです。

Tailwind CSS の設定を変更してみる

Tailwind CSS は、設定ファイルでフォントファミリーやカラーリングなどの変更ができます。

tailwind.config.js

module.exports={theme:{fontFamily:{sans:['"Sawarabi Gothic"','sans-serif'],},extend:{colors:{white:'red',},}},variants:{},plugins:[]}

ビルドしてみると、HTMLもSCSSも変更していないのに、表示が変わったことが分かります。

`@apply`を使ってみる

用意されたクラスを組み合わせることでも Tailwind CSS を使いこなせますが、@applyを使うことで、既存のCSSクラスや要素に対して Tailwind CSS で用意されているスタイルを使用することができます。

dist/index.html

<!DOCTYPE html><htmllang="ja"><head><metacharset="UTF-8"><title>Tailwind CSS Example</title><linkhref="https://fonts.googleapis.com/css?family=Sawarabi+Gothic&display=swap"rel="stylesheet"><linkrel="stylesheet"href="app.css"></head><body><divclass="section"><h1>ユーティリティ・ファースト</h1><p>プリミティブなユーティリティの固定されたセットから複雑なコンポーネントを構築します。</p></div><script src="app.js"></script></body></html>

src/app.scss

@tailwindbase;@tailwindcomponents;body{@applyfont-sansbg-gray-100;}.section{@applymax-w-smmx-autop-6bg-whiterounded-lgshadow-xl;h1{@applyblocktext-xlfont-boldleading-normal;}p{@applyblocktext-basefont-normalleading-relaxed;}}@tailwindutilities;

先ほどと同じ見た目になればOKです。

Purify CSS を有効にする

公式ドキュメントにも記載のあるように、Tailwind CSS はファイルサイズが大きいのが欠点です。ドキュメントでは Purgecss を使ったファイルサイズ節約法が載っていますが、今回は Laravel Mix で使える Purify CSS を使って、使われていないセレクタを削除し、ついでに Minify もかけてみます。

webpack.mix.js

constpath=require('path');constglob=require('glob');constmix=require('laravel-mix');consttailwindcss=require('tailwindcss');mix.js('src/app.js','dist/').sass('src/app.scss','dist/').options({processCssUrls:false,postCss:[tailwindcss('./tailwind.config.js')],purifyCss:{purifyOptions:{minify:true,},paths:glob.sync(path.join(__dirname,'dist/*.html'))}});

コンパイルしてみると、使っていないCSSの記述が削除され、app.cssのファイルサイズが大幅に減りました。

とりあえず、これでコーディングはスタートできそうですね。

Tailwind CSS は弊社CTOが採用を推進しているので、知見がたまればまたぼちぼちメモを残していければと思います。

↧

CSSアニメーションはじめの第一歩

November 6, 2019, 9:15 pm

≫ Next: [HTML][初心者]これだけ覚えれば大丈夫！重要な5つのタグ

≪ Previous: Tailwind CSS + Laravel Mix で CSS を書かないコーディングを開始してみた

この記事のターゲット

CSSはある程度わかる
アニメーションは全然わかんない
どんなもんか経験してみたい

最終成果物

これです。
実用とかは置いておいて無限にローディングしてるイメージ。

実装

大きく分けて以下の手順で進めます。
1. 土台になるhtmlの用意
2. 背景の設定
3. 丸のやつ配置
4. アニメーション実装

1. 土台になるhtmlの用意

cssは別ファイルに切り出します。
背景になるのがstageクラス、丸のやつになるのがeffect ball_xクラスですね。

index.html

<!DOCTYPE html><htmllang ="ja"><head><linkrel="stylesheet"href="../css/main.css"></head><body><mainclass="stage"><!-- ball_1 --><sectionclass="effect ball_1"><div></div></section><!-- ball_2 --><sectionclass="effect ball_2"><div></div></section><!-- ball_3 --><sectionclass="effect ball_3"><div></div></section></main></body></html>

2. 背景の設定

ちょっとおしゃれにするだけなので別になくてもいいです。

main.css

*{margin:0;padding:0;}/**
* stage
*/.stage{position:absolute;width:100%;height:100%;background-color:rgb(228,217,210);}.stage:before,.stage:after{position:absolute;content:"";display:block;}.stage:before{top:20px;left:20px;width:calc(100%-40px);height:calc(100%-40px);border:solid5px#6e5c60;border-radius:30px;box-sizing:border-box;opacity:0.3;}

ここまででこんな感じ。

3. 丸のやつ配置

main.cssに追記していきます。
特にカスケーディングを気にする必要もないですが一応下に追記していきましょう。

丸にする要素をhtmlに三つ用意していあるのでクラスも3つ用意します。
全てに共通する様なものはeffectクラスに。
3つ横並びにするためにleftだけ均等にずらします。

main.css

.../**
* stage
*/.../**
* effect
*/.effect{position:absolute;width:400px;height:400px;}.effectdiv:after{content:"";display:block;position:absolute;}/*** ball_1 ***/.ball_1{left:calc(50%-50px);}/*** ball_2 ***/.ball_2{left:calc(50%-200px);}/*** ball_3 ***/.ball_3{left:calc(50%-350px);}.ball_1div:after,.ball_2div:after,.ball_3div:after{left:calc(50%-20px);width:40px;height:40px;background-color:#8db3b1;border-radius:50%;opacity:1;}

これでこんな感じ。

4. アニメーションの実装

さて、やっと本題です。
説明は後にしてまずは動かしてみましょう。

main.css

.../**
* stage
*/.../**
* effect
*/.../*********************************************************************************
*  animation
*********************************************************************************//*** stage ***/.ball_1div:after{animation:pop1sease0sinfinite;}.ball_2div:after{animation:pop1sease0.1sinfinite;}.ball_3div:after{animation:pop1sease0.2sinfinite;}/*********************************************************************************
 *  keyframes
 *********************************************************************************/@keyframespop{0%{top:450px;}50%{top:350px;}100%{top:450px;}}

うまくいけばこうなるかと。（再掲）

ではざっくりはじめの第一歩レベルで解説していきます。
重要なのは
- animationプロパティ
- @keyframes
ですね。

animationプロパティ

animationプロパティではその要素に付与するアニメーションの詳細を設定します。
引数は以下の8つで、右辺は何も指定しなかった時の初期値です。

animation-name: none
animation-duration: 0s
animation-timing-function: ease
animation-delay: 0s
animation-iteration-count: 1
animation-direction: normal
animation-fill-mode: none
animation-play-state: running

今回で言えばball_1クラスだと以下の様に指定したことになります。

animation-name: pop
animation-duration: 1s
animation-timing-function: ease
animation-delay: 0s
animation-iteration-count: infinite
animation-direction: normal（初期値）
animation-fill-mode: none（初期値）
animation-play-state: running（初期値）

指定したものについて簡単に説明します。
今回指定しなかったものについてはググれば出てくるので気になったら調べてみてください。

animation-name: pop

ここには適用するアニメーションの名前を指定します。
今回は「pop」というアニメーションで、このpopは@keyframesで宣言してあるやつですね。

animation-duration: 1s

これは指定したアニメーションを何秒かけて実行するかという指定です。
今回は「1s」なのでちょっと跳ねて元の場所に戻ってくるまでが1秒となります。

animation-timing-function: ease

ここはあまり馴染みのない項目かもしれません。
この項目で指定するのはアニメーションの動き方です。

こちらがアニメーション付きで詳しいのです。
【CSS3】@keyframes と animation 関連のまとめ

今回は「ease」を指定してあるので最初と最後だけ若干緩やかになる動き方ですね。

animation-delay: 0s

名前の通りアニメーションが始まるまでの遅れ時間を指定します。
今回見ているball_1クラスは「0s」なので遅れなしとなってます。
残りのball_2, ball_3クラスはそれぞれ0.1sずつずらすことでタイミングをずらしています。

animation-iteration-count: infinite

イテレーションカウント、ということでアニメーションの実行回数を指定します。
今回は「infinite」なので無限ループになってます。
数字で2とすれば2回実行したらアニメーションが止まります。

@keyframes

再掲です。

@keyframes pop {
  0%   { top: 450px; }
  50%  { top: 350px; }
  100% { top: 450px; } 
}

このkeyframesではアニメーションの具体的な動作の中身を指定します。
今回でいうとちょっと跳ねて元の場所に戻る動きのことです。
%で書かれているのはアニメーションのタイミングで、今回だと1sかけてアニメーションするので以下のようになります。

0%   → 0s
50%  → 0.5s
100% → 1s

この%はそれなりに自由に指定できるので25%や75%なども追加してもっと細かくすることもできます。

右側にあるのがそのタイミングで適用するcssのプロパティになります。
今回はちょっと跳ねさせるのにtopプロパティを変更させて実現しています。
なので例えば350pxと450pxを入れ替えればちょっと跳ねるのではなくちょっと沈むアニメーションにもできます。
opacityを変化させればfadeinやfadeoutが、boder-radiusを変化させれば丸から四角にするようなことができます。

どのタイミングでどのように変化させるかがcssアニメーションのクリエイティブなところですね！

まとめ

自分も第一歩を踏み出してからまだまだ経験が浅いので自分の理解確認もかねて書きました。
今回実装したものは画面全体を使ってアニメーションしているのでそのまま実サイトに利用するのは難しいかもしれませんが、中身がわかっていれば取り込むのも簡単だと思います。

どう実装するかよりもどんなアニメーションにするかを考える方が難しい（小並感）

↧

[HTML][初心者]これだけ覚えれば大丈夫！重要な5つのタグ

November 7, 2019, 12:13 am

≫ Next: CSSセレクタ詳細度の理解を深める

≪ Previous: CSSアニメーションはじめの第一歩

そもそもHTMLってなに？

HTMLは「HyperText Markup Language」の略で、インターネットで公開できるWebページを作成するために作られた言語です。
HTMLにはたくさんのタグが定義されています。そのタグを使って「ここが見出しで」「これは箇条書きで」「ここに画像を載せる」などと、ページの中身をコンピュータに指示するのがHTMLの役割です。
HTMLによって書かれたファイルのことをHTMLファイルと呼びます。HTMLファイルの拡張子は、「.html」「.htm」です。

コピペでOK！始めるうえで必要なテンプレート

template.html

<!doctype html><html><head><metacharset="utf-8"><title>タイトル</title>/*webページのタイトル記述*/
</head><body><!-- ここにhtmlを記述 -->　<!-- 例 -->　<h1>青空カフェ</h1>　<p>本日のおすすめ</P></body></html>

これだけで大丈夫！最重要タグ

１．見出しを意味する＜h1＞＜h2＞タグ

＜h1＞＜h2＞は見出しを意味するタグです。見出しは６レベルあり、＜h1＞、＜h2＞、＜h3＞＜h4＞、＜h5＞、＜h6＞があります。＜h1＞タグが最も重要な見出しで、「h」に続く数字が大きくなるにつれて重要度が下がります。またそれに伴って文字の大きさも小さくなっていきます。

<h1>青空カフェ</h1>
<h2>本日のおすすめ</h2>

２．テキストの段落を意味する＜ｐ＞タグ

＜ｐ＞タグはHTMLで最もよく使われるタグのひとつで、＜ｐ＞～＜/ｐ＞に囲まれたテキストを1つの段落にします。

<ｐ>はじめまして</p>
<ｐ>よろしくお願いします</p>

３．サイトのページを行き来できる＜nav＞タグ

よくホームページの上部などに設置されており他ページに行き来するためのものです。
番号なしリスト（箇条書きのこと）である＜ul＞タグ、＜li＞タグと一緒に記述するのが一般的です。

<nav>
  <ul>
    <li>ホーム</li>
    <li>店舗情報</li>
    <li>アクセス</li>
    <li>メニュー</li>
    <li>お問い合わせ</li>
  </ul>
</nav>

４．サイト内のリンクを設定する＜a＞タグ

＜a＞タグは、＜a＞～＜/a＞で囲まれたテキストなどのコンテンツにリンクを設定します。

<a href="パスまたはURL">詳細はこちら</a>

３で説明したナビゲーションの項目にリンクを追加することで他のページへ移動できるようになります。

<nav>
  <ul>
    <li><a href="ホームまでのパスまたはURL">ホーム</a></li>
    <li><a href="店舗情報までのパスまたはURL">店舗情報</a></li>
    <li><a href="アクセスまでのパスまたはURL">アクセス</a></li>
    <li><a href="メニューまでのパスまたはURL">メニュー</a></li>
    <li><a href="お問い合わせまでのパスまたはURL">お問い合わせ</a></li>
  </ul>
</nav>

５．ページに画像を挿入する＜img＞タグ

ページに＜img＞タグを設定することで画像を挿入することができます。

<img src="画像までのパス">

使用した参考書

・スラスラわかるHTML＆CSSのきほん（狩野祐東著）

さいごに

どうでしたか？「これだけなら余裕じゃん！」と感じませんでしたか？
しかも、HTMLは、無理に覚える必要はありません。やっていくうちに勝手に覚えていくものです。
大事なのは、手を動かして動作を実感することです。
もちろん今回説明したタグの他にもたくさんの種類や組み合わせが存在しますが、それらは徐々に覚えていけばいいと思います。今回説明した5つのタグを用いれば大体のサイトは作成可能です。

↧

相殺される場合

相殺されない場合

シンプルなテーブル

コード

html

css

JavaScript

解説

メリット

デメリット

おまけ(id位置までスクロールさせたい）

html

JavaScript

簡単な解説

この記事は

Scssって何？

あれ？Sass？Scssじゃないの？

WebでScssが試せるぞ

Scssの書き方

&(アンパサンド)を使う

変数

色の変数

font-familyも変数に

引数

display:flex

position:absolute

メディアクエリ

ブラウザハック

SassとScssの違い

最後に

始めに

実装方法

終わりに

はじめに

サイトURL

やったこと

感想

"at-rule-no-unknown" でエラー発生

問題点

解決

通常時

折り返しを禁止する

はみ出した文字を非表示にする

はじめに

やり方

おわりに

結論

div要素を重ねて実現する方法

サンプル(jsFiddle)

この方法のメリット

この方法のデメリット

カメラの前に板を置いて実現する方法

板のメッシュを生成する

板の位置を決める

板の向きを決める

板の透明度を変える

サンプル(jsFiddle)

この方法のメリット

この方法のデメリット

余談

＄redがなんや書き方エラーすわ...

SCSSに使い回す色を用意する

よくimportし忘れちゃうから一応確認しておくか...(一応ね...)

じゃあ何が原因？

はじめに

やったこと

感想

参考

メリット

デメリット

概念

まずはコンテナを定義する

初めに

項目

CSSの仕組み

DOM（Document Object Model）とは

HTMLへのCSS適用方法

外部スタイルシート

内部スタイルシート

インラインスタイル

`&(アンパサンド)`を使う

`font-family`も変数に

`display:flex`

`position:absolute`

`@apply`を使ってみる