20200518のCSSに関する記事は7件です。

投稿日：2020-05-18T17:35:34+09:00

スクロールで動く仕組み検証　【Javascript】【脱jQuery】

はじめに

画面をスクロールで、何かの要素が浮かび上がったり、反応する仕組みを、JQuery無しで作るのに、
具体的に要素がどのように判定されているのかを検証するものです。

また、動きの要素にコーディング終了後にクラスを付け加えることで、動きを一括して実装できるので
製作スピードが向上します。

動作デモ

See the Pen スクロール判定のデモ by masato yamada (@marchin133) on CodePen.

スクロールの計測

スクロールは window.pageYOffset で取得。

判定したい要素の計測

getBoundingClientRect().topで、判定したい要素の上部の、HTMLの一番上からの高さがわかる。

判定ロジック

javascript
document.addEventListener("DOMContentLoaded", function () {

    let windowHeight = document.getElementById('windowHeight');
    let scrollVolume = document.getElementById('scrollVolume');
    let markerLine = document.getElementById('markerLine');
    let markerLinetext = document.getElementById('markerLinetext');

    //動かす要素を探す
    let fadeConts = document.querySelectorAll('.anime');
    //動かす要素の配列を作る
    let moveConts = [];


    //windowの高さ & リサイズされたら再取得
    let windowH = window.innerHeight;
    window.addEventListener('resize', function () {
        windowH = window.innerHeight;
        windowHeight.textContent = windowH;
    }, false);

    windowHeight.textContent = windowH;

    //動かす要素の位置情報を取得しておく
    for (let i = 0; i < fadeConts.length; i++) {
        let rect = fadeConts[i].getBoundingClientRect().top;
        moveConts.push(rect);
        fadeConts[i].textContent = rect;
    }

    // marker
    // 画面の下からXpxのライン

    let markerLineVolume = windowH - (windowH / 4);
    markerLinetext.textContent = markerLineVolume;

    markerLine.style.top = markerLineVolume + 'px';

    //画面スクロールしたときに呼び出される
    window.addEventListener('scroll', function () {

        //スクロール位置
        let scrollDepth = window.pageYOffset;
        scrollVolume.textContent = scrollDepth;

        //判定位置は、スクロール量に伴ってそのままずれる
        markerLine.style.top = markerLineVolume + scrollDepth + 'px';

        //判定位置
        let markerLineNum = markerLineVolume + scrollDepth;

        for (let i = 0; i < moveConts.length; i++) {
            if (markerLineNum > moveConts[i]) {
                fadeConts[i].classList.add("show");
                console.log(i + "が超えた");
                //console.log(moveConts[0]);
                //console.log(windowHeight);
                //console.log(moveConts[i]);
            } else {
                //fadeConts[i].classList.remove("show");
            }
        }


    }, { passive: true });



}, false);
スクロール量の考え方

当たり前のようで、意外に私はハマってしまいました。
スクロール量と判定要素の関係から、画面に対して下にスクロール量が発生するような感覚だったのですが、
画面のウィンドウの上部にスクロール量が発生するイメージで考えるとわかりやすいです。

判定する要素が、ブラウザ画面の下端（実際には画面の比率などで判定位置は変わることが多いと思いますがそれも例には含めてあります）
に達しているということは、スクロール量だけでは足りず、スクロール量に、画面の高さを加えたものが、判定位置になります。

例：
判定位置の要素が、2000pxの位置に絶対位置で配置されているとする
画面の高さは、1200px（ブラウザの表示領域の高さ）　の場合、800pxスクロールすると、判定位置の2000pxに達する。

　 Tweet
Qiitaで続きを読む

投稿日：2020-05-18T17:24:58+09:00

ZONeチャレンジ第一弾をJavaScriptでハックした話

要約

キャンペーンサイトへPCからスマホサイズでアクセスし、WebブラウザのコンソールからJavaScriptでフリック入力を再現した。

ソースコード: https://github.com/r-yanyo/flick-challenge/blob/master/newfuga.js

キャンペーンサイト: https://cp.zone-energy.jp/challenge/kuma/

キャンペーンサイトのconsoleにソースコードを貼り付けると（途中まで）フリック入力が自動的に入力されます（途中までの理由は最後の方に書いてます）。

PCでスマートフォン専用サイトにアクセスする

PCでキャンペーンページを普通に開くと、スマートフォン専用サイトである旨が表示されます。
このままではPCでフリック入力ゲームで遊ぶことが出来ません。

同じWebサイトでも、PCでアクセスした時とスマートフォンでアクセスした時にWebページのデザインが違う経験があるのではないでしょうか？これは、デバイスに依存してWebサイトの表示を変更する場合に、一般的にメディアクエリ が基準として使用されるからです。

メディアクエリはユーザが使用しているデバイスのViewport（ウィンドウのサイズ）を基準として、Webサイトの表示を変更する方法です。つまり、実際にPCやスマートフォンのどちらを使用しているかは検証しておらず、ウィンドウのサイズだけで判断しています。よって、何らかの方法でウィンドウサイズを変更すれば、PCでもスマートフォン専用ページにアクセスすることが出来ます。

Google Chromeでは、デベロッパーツールを開き、Device Toolbarを使用することでウィンドウのサイズをスマートフォンサイズに変更できます。

フリック入力をプログラミングで再現する

大きく分けて工程は3つあります。
1. ひらがなボタンのElementを取得
2. 取得したElementに対してフリック入力を再現
3. 答えを機械が認識できる形で入力＆変換

1. ひらがなボタンのElementを取得

デベロッパーツールで見てみると、どうやら.css-xx1yz5-buttonStyleというクラスが各「あかさたなはまやらわ」ボタンに付与されているようです。
さらに、そのボタンをタップすると出現するフリック入力部分（"あ"をタップした場合は「あいうえお」）には.css-2rzvda-wingStyleというクラスが付与されています。

このことから、例えばキーボードの「さ」を取得したいときは、
[0]: "あ", [1]: "か", [2]: "さ"
なので
document.getElementsByClassName("css-xx1yz5-buttonStyle")[2]
フリック入力の「す」を取得したいときは、「す」は上から13番目なので
document.getElementsByClassName("css-2rzvda-wingStyle")[12]
とします。

ひらがな以外の文字に関しては、デベロッパーツールでその要素が上から何個目にあるかを見れば分かります。

2. 取得したElementに対してフリック入力を再現

初めはClickイベントでフリック入力が再現されると思ったのですが、
document.getElementsByClassName("css-xx1yz5-buttonStyle")[2].click()
のようにしても何も起こりませんでした。

そこで次に、TouchEvent を試したところ、キーボードのボタンがタッチされるイベントが発生しました。よって、このTouchEventを使うことにしました。
touchEvent.ts
//elmはフリックの起点となるelement。「す」を入力するときは「さ」
//moveElmはフリック先のelement。「す」を入力するときは「す」

touchMove = function (elm, moveElm) {
  if (!moveElm) return;
  rect = moveElm.getBoundingClientRect();
  X = rect.x + rect.width / 2;
  Y = rect.y + rect.height / 2;
  let touch = new Touch({
    identifier: Date.now(),
    target: elm,
    clientX: X,
    clientY: Y,
    force: 1,
    pageX: X,
    pageY: Y,
    radiusX: 41.66666793823242,
    radiusY: 41.66666793823242,
    rotationAngle: 0,
  });
  touchMoveEvent = new TouchEvent("touchmove", {
    bubbles: true,
    touches: [touch],
  });
  elm.dispatchEvent(touchMoveEvent);
};
TouchEventに関してはあまり詳しくなかったため、実際にイベントを発生させて必要な部分だけを変更する戦略を取りました。
結果的には clientX,clietnY,pageX,pageY の数値をフリック先のelementの座標に変えることで、フリック入力を再現することが出来ました。

フリック入力をするときにTouchEventで発生するイベントは、touchstart -> touchmove -> touchend の順で発生します。また、それぞれのイベントの発生元は全てフリックの起点となるelementで発火します。¹
//elmはフリックの起点となるelement。「す」を入力するときは「さ」
//moveElmはフリック先のelement。「す」を入力するときは「す」
function touchEmulate(startElement, moveElm) {
  touchStart(elm);
  touchMove(elm, moveElm); //イベント発火元はelm
  touchEnd(elm);
}
3. 答えを機械が認識できる形で入力＆変換

「ひらがな」から数字への変換は愚直に一つ一つ入力しました。
"あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもや（ゆ）よらりるれろわをんー　、。？！".split("")
例えば「す」をフリック入力したい場合は、
flick.ts
//「さ」ボタン
const button = document.getElementsByClassName("css-xx1yz5-buttonStyle")[2];
//「す」フリック
const flick = document.getElementsByClassName("css-xx1yz5-buttonStyle")[12];
このように「あ」〜「ん」や「！？」の記号などは入力できるようになりました。
ここで問題となるのが、濁音や半濁音、促音（「が」、「ぱ」、「っ」など）の入力です。これらはフリック入力を2回行う必要があります。例えば、「が」であれば、「か」をフリックした後に「゛」をフリックする必要があります。
これを解決する方法は色々あるのですが、今回は全部条件分岐で書きました（具体的にはソースコード参照）。²

「これで晴れてフリック入力がエミュレート出来た・・・」と思ったのですが、もう1つ問題があります。
フリック入力では同じボタンを2回押すと次の文字が表れるという特性上、連続で同じ文字を入力しようとすると正しい文字が入力されません。
例えば、「けたたましく」を入力しようとすると「けちましく」になってしまいます。
この問題はキーボードにある「→」ボタンを入力すれば解決できますが、当時の私は気付かなかったため手動で入力を分けて解決しました（ダサい・・・）。

おわりに

以上でフリック入力をエミュレートすることが出来ました。便宜上「ハックした」と書いていますが、JavaScriptでフリック入力をエミュレートしただけです。
キャンペーンは終了してしまいましたが、まだゲームで遊ぶことはできるようなので、是非実際に試してみてください。

フリック入力周りの動作は実際のイベントを複製して改変したため、あまり理解していない部分が多々あります。 ↩

「が」を「か」と「゛」に分割する方法は、もっと良い方法があると思います。ひらがなの部分も含め、文字コードを上手く使えばもっと綺麗に書けるかも？ ↩

　 Tweet
Qiitaで続きを読む

投稿日：2020-05-18T14:55:36+09:00

Magical Margin Tips

今回はMarginの特徴を上手く理解し、
活用するためのテクニックをお伝えしたいと思います

【Ice Break 】 Margin と Paddingの違いついて

これ、CSS触る人は大抵ぶつかる問題ですね
おそらく数年前の私もぶつかってたと思います
MarginとPaddingを間違って使用してしまうと
レイアウトが恐ろしいことになってしまったり

そんなハードルの高さを払拭するために
最近某知事が【Social Distance】を良く連発されていますので、
それに例えようと思います

私達の間にはパーソナルスペースという
他人に近付かれると不快に感じる空間が存在しています。

※参考サイト

パーソナルスペースで例えるならば、
Marginが社会距離でPaddingが個体距離にあたります。
つまり【Social Distance】というのは
CSSでいうならば【Margin】を空けろということになります

......っていう話をさっき思いついたので適当に書いてみました

真面目に説明すると、
Paddingは私の領域、Marginは私とあなたの距離感なんですね。
もしくはPaddingは内側、Marginは外側
お隣さんでMarginが干渉し合うのは、個々に付けられると思っていても、
お互いの空間を共有し合う事があるからでしょうか......

という独特のCSS ruleが存在しますので、Margin不慣れな方は
【one way(単一方向) Margin】を心がけるようにしましょう
(上につけるなら他のお隣さんも上だけ、下につけるなら他のお隣さんも下だけ)

Margin Tips

さて本題ですが、今回はMarginの特徴を上手く理解し、
活用するためのテクニックをお伝えしたいと思います

Marginの特性を理解し、上手く活用できるようになれば
あなたも一人前のCSS使いと言えるでしょう

1. Negative Margin

知ってるか......Marginって負の値も使えるんだぜ......

っていうのがNegative Marginです。
Marginに負の値を入れることによって、
正の値を入れたときと逆に要素を動かすことができます。

こういうスマホサイトのデザインに遭遇したとします。

写真以外はみんなコンテンツ幅の中に収まっているのがわかるでしょうか？

わかりやすいように線を引いてみました。

ビジュアルをダイナミックに見せるため、写真をコンテンツ幅からはみ出させる手法は
ウェブデザインでよく遭遇することがあります。
こういうデザインをコーディングする場合、写真以外の要素にそれぞれコンテンツ幅用の余白を入れていては少し面倒ですよね
CSSの行数もかさんでしまいます。
できるなら親に一回入れるだけで済ましたい......

そんなあなたにおすすめなのがNegative Marginです
こんなふうに書けば......
style.css
/* 親 */
.parent {
  padding-left: 10px;
  padding-right: 10px;
}
/* コンテンツ幅を無視したい要素 */
.visual {
  margin-left: -10px;
  margin-right: -10px;
}
写真だけはコンテンツ幅を無視し、
他の子要素はきっちりコンテンツ幅の中に収めることができます。
イレギュラーな要素がある際におすすめな手法です

※コンテンツ幅の余白などの数値は、他のページで使用する可能性が高いので
変数に入れて使うようにしたほうが分かりやすいですヨ

他にも

隣人が前の要素に食い込むような
オシャレなデザインにも活用することができますよ
(この場合はお知らせ部分のmargin-topにNegative Margin)

2. Marginの相殺

お隣さん同士の社会距離がぶつかりあった瞬間......そこで戦いが生まれます......
勝ち残れるのは、より多くの距離(Margin)を積んだ者だけ......

っていうのがMarginの相殺です

突然ですが、問題です
お隣さん同士のブロック要素(Aさん、Bさん)がお互いmarginを積んだとします。
Aさんはmargin-bottomに20px, Bさんはmargin-topに30px積みました。
さて二人の距離はどれくらい空くでしょうか？

正解は30pxです。50pxにはならないので注意です
(ちなみにborderを引いておくと戦闘回避することもできます )

詳しくはこちらの説明が分かりやすいです
https://coliss.com/articles/build-websites/operation/css/about-collapsing-margins.html

さて、このMarginの相殺ですが、一体何の役に立つのかと思う方もいるでしょう。

実はこの相殺、どの要素が入るかわからない場合に使うととても便利なんです
CMS(ContentManageSystem)を使用する際に役立つことがあります。

WordPressやWiki投稿サイトなどでは、投稿者が自由に要素を組むことができます。
その際にすべての要素にそれぞれmargin-top, margin-bottomを入れておけば、
多い方の余白が相互の距離感を踏襲するので、
いちいち要素感の距離を計算して指定する必要がなくなります
style.css
h2 {
  /* pの後にh2が来たときは相互間の余白は20pxに統合 */
  margin-top: 20px;
  margin-bottom: 10px;
}

p {
  margin-top: 10px;
  margin-bottom: 10px;
}
そういったサイトをコーディングする際は、
是非Marginの相殺テクニックを使用してみてください！

3. おまけの応用編(疑似要素 × Negative Margin)

デザインデータを貰って、

さぁCSS書くぞー！

......あれ？
測ったとおりに数値を入れたのになんか要素間の余白めっちゃ空いてない......？
といった経験はないでしょうか？

ピンとこない方は、
下記例を御覧くださいまし

Marginの無い状態での要素間の挙動

理想

現実

おわかりいただけただろうか......

marginを指定していないにもかかわらず要素間に微妙な空きが開いてしまっています。

原因はline-height(行間)があるからかもしれません......

これではデザインデータの余白を正しく測ることもできず、
デザインの精度が落ちてしまう事態に.....

そこで下記の記事で使用するテクニックがとてもわかりやすく、
役に立つので紹介します

https://yuyakinoshita.com/blog/2020/01/20/line-height-crop/

記事に記載のある通り、見出しに擬似要素を使用する場合は
上手くline-heightを削ることができないどころか、
装飾に悪影響を及ぼす可能性もあるので注意が必要です
段落パーツで使用すると、測った通りの余白でデザインの再現ができるので
一石二鳥なテクニックですよ
疑似要素を使い出したCSSユーザーにはぜひ実践してほしいテクニックです！

以上がMarginを使いこなすための技でした

少しでもMarginの特性を理解していただけたら幸いです

　 Tweet
Qiitaで続きを読む

投稿日：2020-05-18T12:59:01+09:00

Webクリエイター能力認定試験のすすめ

はじめに

先日、Webサイトのことを体系的に勉強できる資格はないかと思い、社内の方にリサーチしたところ、Webクリエイター能力認定試験というものを教えていただき、勉強・受験を行いました。
無事合格できたので、受験してよかった点や、勉強方法、実際のテストについてなどをまとめようと思います。

こんな方におすすめ

初心者で、Webについて体系的に勉強したい

フロントやりたいけど、何から始めればいいのかよくわからない

Webサイトが作れるようになりたい

初心者が勉強を始めるとっかかりとしてはとても入りやすい資格かと思いますが、JavaScriptに関する出題はほぼなかったりするので、少し知識がある方にとっては逆に物足りないかもしれません…！

勉強を開始した時の状態

HTMLとCSSでサイトの表面をとりあえず作れるらしいことを知っている

HTMLとCSSでこんなことできるらしいことを知っている

私は入社1年目の冬に、HTML5プロフェッショナル認定試験レベル1を受験したこともあり、HTMLとCSSでできることに関しては少し知識があったのですが、実際にWebサイトを作ろうとなったときの「ひな型」がよくわからない状態でした。
受験の順番がWebクリエイター能力認定試験⇒HTML5プロフェッショナル認定試験だと、よりシンプルに理解できたかもしれません…笑
HTML5プロフェッショナル認定試験について、詳しくはこちらの記事で書いています。

Webクリエイター能力認定試験とは？

Webサイト制作のデザイン知識、Webページのコーディング能力を測定・評価する認定試験。
Webクリエイター能力認定試験公式サイト

項目スタンダードエキスパート

受験資格なしなし

合格基準実技問題の得点率65%以上知識問題と実技問題の合格得点率65%以上

試験時間実技問題：60～70分知識問題：20分/実技問題：90～110分

出題内容(実技) HTML5の変換、HTMLの作成、CSSの読込と作成、画像の表示 HTMLの作成、CSSの読込と作成、画像の表示、JavaScriptの読込

出題内容(知識) - Webサイトに関する知識

出題形式配布された問題データおよび素材データに基づき、問題文の指示に従って編集を行い、回答データを提出する配布された問題データおよび素材データに基づき、問題文の指示に従って編集を行い、回答データを提出する

出題数(実技) 1テーマ(4ページ程度のHTMLとCSSの作成) 1テーマ(基本ページ1ページと5ページ程度のHTMLとCSSの作成、JavaScriptの対応、レスポンシブデザインの対応)

　出題数(知識) - 20問(デザインカンプによる設問15問、文書による設問5問)

※メモ帳(Windows)/テキストエディット(Mac OS)または、Webページ作成ソフトを使っての受験のいずれかを選択できます。Webページ作成ソフトの場合、試験時間が少し短くなります。

レベルは二つありますが、個人ブログなどを見ていて、難易度はそんなに変わらないようだったので、私はHTML5対応版のエキスパートを受験しました。

受験をおすすめする理由

初心者でもWebサイトについて、体系的に把握できる

ソースをマネしながらテキストを一冊終えるころにはウェブサイトが作れている

テキストで拒絶反応が出にくいので、初心者も受験しやすい

特に私がこの試験を入社してすぐに受験すればよかったと思う点は、上記につきます。
受験をしなくても、テキストを一冊やり終えるだけで、だいぶWebサイトについての理解が深まると思います。まねっこだとしても初めてWebサイトっぽいものを自分で作れた時はうれしいし、自信が付きます！
公式テキストはわかりやすい英語の参考書くらいの記載感で、拒絶反応が出にくいと思うので、Webサイトについて何も知らない状態からの受験であっても、取っかかりやすいかと思います。

勉強方法について

Webクリエイター能力認定試験公式テキストを3周する

公式サイトのサンプル問題を4回解く

問題集は購入しないでよい

公式サンプルで実際のテストと同じ操作に慣れる

テキスト

1周目：さらっと1冊流し読んでからサンプル問題を解いて、出来高を確認する（ちなみに全然間に合わない＆わからないで絶望する）
2周目：写真やレイアウトを変えて、テキストをベースに自分なりのサイトを作ってみる
3周目：テストも近いので、再度応用ポイントなどに目を通しながら、サンプルコードをなるべく見ないで作ってみる

3周目に入るころにはだいぶ理解できるようになります。
私は2周目の時にはGoogle App Scriptというのを使ってWebサイトを作成してみました。こんなかんじ。(かっこいい気がするからというダサい理由で英語です。素材は自分で作ってみました。)

枠組みなどはテキストを参考に作ったり、テキストでやりたいことを調べたりしながら活用しました。
実際に自分で応用して作ってみると、より理解が深まると思います。実現したいことが自分の中から出てくるというのが一番身につくような気がするので…！
(Google App Scriptについて詳しくは割愛しますが、無料で簡単にWebサイトを公開できるという、Googleが提供しているサービスの一つです)

サンプル問題

テキストとは別に問題集も発売されているようですが、テストではサンプル問題とほとんど同じ内容のものが出題されるので、サイトに載っているサンプル問題をすらすら解けるようになれば購入しなくても問題ないと思います。
私は2回目で89%、3回目で95%ほどの得点率になりました。

公式サイトからサンプル問題をダウンロードすると、テストと同じ形式で操作できるのでやっておくと安心だと思います。

受験のポイント

メモ帳で受験するとタグの自動変換などがされないので、誤字に気を付けたり、日ごろから変換に頼らずに打つ練習をしておく。

CSSやHTMLのリファレンスが受験中に見られるので、タグなどの丸暗記は必要ない。どちらかといえば構造を理解するほうが重要。

実際のテスト

公式ページのサンプル問題と構成が同じ

ひねりった問題はほぼない

実技

サンプル問題を4.5回解いて慣れておくと、焦らずに受験できると思います。
使う素材が違うくらいの差分しかないので、公式サンプルでリファレンスを見ないでも作れる状態になっていれば、本番でも時間をかなり余らせて解けると思います。

知識問題

9章のWebデザインの基礎知識から9割ほど、1章のWebサイト・制作の基礎知識から1割ほど出題があったような感じでした。重箱の隅をつつくような問題はほぼないので、用語が何を示すか、その特徴をわかっていれば、ある程度は回答できました。

結果、得点は、知識が90%、実技が94%で合格できました。
知識問題で悩んで悩んで最後に選択しなおしたものが間違いと気づいて悲しかったです。

まとめ

受験しなくてもWebの入り口として勉強するには最適

最短で自分でWebサイトが作れるようになる

テスト自体の難易度はそんなに高くないので、資格として持つよりは、Webサイトについて理解を深めるのに最適な資格かなと思います。
これからWebサイトを勉強していきたい方など、よろしければ参考にしてみてください。
ここまで読んでくださり、ありがとうございました。

項目	スタンダード	エキスパート
受験資格	なし	なし
合格基準	実技問題の得点率65%以上	知識問題と実技問題の合格得点率65%以上
試験時間	実技問題：60～70分	知識問題：20分/実技問題：90～110分
出題内容(実技)	HTML5の変換、HTMLの作成、CSSの読込と作成、画像の表示	HTMLの作成、CSSの読込と作成、画像の表示、JavaScriptの読込
出題内容(知識)	-	Webサイトに関する知識
出題形式	配布された問題データおよび素材データに基づき、問題文の指示に従って編集を行い、回答データを提出する	配布された問題データおよび素材データに基づき、問題文の指示に従って編集を行い、回答データを提出する
出題数(実技)	1テーマ(4ページ程度のHTMLとCSSの作成)	1テーマ(基本ページ1ページと5ページ程度のHTMLとCSSの作成、JavaScriptの対応、レスポンシブデザインの対応)
出題数(知識)	-	20問(デザインカンプによる設問15問、文書による設問5問)

　 Tweet
Qiitaで続きを読む

投稿日：2020-05-18T12:12:18+09:00

SCSS記法チートシート

この内容について

この内容は、私が運営しているサイトに、より見やすく掲載しているので、よければそちらもご活用ください。
【Sass】SCSS記法チートシート

SCSS記法とは

SCSS記法とはSassの書き方の1つで、SassにはSCSS記法とSASS記法があり、SCSS記法の方がCSSと互換性があるので使われることが多い。
拡張子は「.scss」にする。

Sassとは

「Syntactically Awesome StyleSheet」の略で、CSSを効率的に記述できるように設計・開発されたRuby製のCSSメタ言語のこと

基本的な書き方
SCSS
div{
  p{
    color: red;
  }
}
ネスト構造系

ネスト構造

入れ子構造(HTMLのような形)に記述

See the Pen
Sass_scss_nest by engineerhikaru (@engineerhikaru)
on CodePen.

親セレクタ参照

親セレクタの名称を参照し記述

See the Pen
Sass_scss_parent-reference by engineerhikaru (@engineerhikaru)
on CodePen.

ネームスペースネスト

CSSでネームスペースで記述しているもの(font-familyなど)をネスト構造で記述

See the Pen
Sass_scss_namespace-nest by engineerhikaru (@engineerhikaru)
on CodePen.

変数系

変数

よく使う値を変数でまとめる

See the Pen
Sass_scss_variable by engineerhikaru (@engineerhikaru)
on CodePen.

配列変数

よく使う値を配列変数でまとめる

See the Pen
Sass_scss_array-variable by engineerhikaru (@engineerhikaru)
on CodePen.

グループ変数

よく使うスタイルをまとめる

See the Pen
Sass_scss_group-variable by engineerhikaru (@engineerhikaru)
on CodePen.

継承系

インポート

分割したSCSSファイルをインポートする
SCSS
// basic.scssというSCSSファイルを読み込む場合
@import "basic";
継承

他の場所で使用したスタイルを継承する

See the Pen
Sass_scss_extend by engineerhikaru (@engineerhikaru)
on CodePen.

文法

条件分岐

条件によってスタイルを変更する

See the Pen
Sass_scss_if-else by engineerhikaru (@engineerhikaru)
on CodePen.

繰り返し

スタイルを繰り返す

See the Pen
Sass_scss_for by engineerhikaru (@engineerhikaru)
on CodePen.

繰り返し(配列変数)

配列変数を使用した繰り返し

See the Pen
Sass_scss_foreach by engineerhikaru (@engineerhikaru)
on CodePen.

演算・色

四則演算

スタイルの中で演算

See the Pen
Sass_scss_calculation by engineerhikaru (@engineerhikaru)
on CodePen.

文字列結合

スタイルの中で文字列結合

See the Pen
Sass_scss_concatenation by engineerhikaru (@engineerhikaru)
on CodePen.

明度の調整

ベースの色の明度を調整

See the Pen
Sass_scss_brightness by engineerhikaru (@engineerhikaru)
on CodePen.

彩度の調整

ベースの色の彩度を調整

See the Pen
vYNVVjr by engineerhikaru (@engineerhikaru)
on CodePen.

透明度の調整

ベースの色の透明度を調整

See the Pen
Sass_scss_transparency by engineerhikaru (@engineerhikaru)
on CodePen.

色相の調整

ベースの色の色相を調整

See the Pen
Sass_scss_hue by engineerhikaru (@engineerhikaru)
on CodePen.

色の補色&反転

ベースの色の補色or反転にする

See the Pen
Sass_scss_inversion by engineerhikaru (@engineerhikaru)
on CodePen.

色を混ぜる

ベースの色(2つ)を混ぜる

See the Pen
Sass_scss_color-mix by engineerhikaru (@engineerhikaru)
on CodePen.

その他

コメントアウト
SCSS
// 1行コメント
/* 
  複数行コメント(コンパイル後も残る)
*/
引用符の付け外し

文字列の引用符("")の付け外し

See the Pen
Sass_scss_quote by engineerhikaru (@engineerhikaru)
on CodePen.

大文字&小文字化

文字列の大文字or小文字化

See the Pen
Sass_scss_upper-case by engineerhikaru (@engineerhikaru)
on CodePen.

絶対値を返す

数値の絶対値を返す

See the Pen
Sass_scss_abs by engineerhikaru (@engineerhikaru)
on CodePen.

切り上げを返す

数値の切り上げを返す

See the Pen
Sass_scss_ceil by engineerhikaru (@engineerhikaru)
on CodePen.

切り捨てを返す

数値の切り捨てを返す

See the Pen
Sass_scss_floor by engineerhikaru (@engineerhikaru)
on CodePen.

四捨五入を返す

数値の四捨五入を返す

See the Pen
Sass_scss_round by engineerhikaru (@engineerhikaru)
on CodePen.

この内容について

この内容は、私が運営しているサイトに、より見やすく掲載しているので、よければそちらもご活用ください。
【Sass】SCSS記法チートシート

　 Tweet
Qiitaで続きを読む

投稿日：2020-05-18T10:06:12+09:00

CSSで表示アニメーションを指定する方法

モーダル表示時などに普通にアニメーションを設定しても反映されなかったので、その対応策です。
実際の動作は、ミニマルなモーダルライブラリをnpmで公開しましたのデモで使用していますのでご確認ください。

表示アニメーションが効かないケース
html
<input type="checkbox" class="trigger">
<div class="modal">
  <div class="modal__container"></div>
</div>
css
.modal {
  display: none;
  /* opacity をアニメーションさせたい */
  opacity: 0;
  transition: opacity .3s ease;
}

.trigger:checked + .modal {
  /* チェックボックスがONになると表示される */
  display: block;
  /* アニメーションが効かない */
  opacity: 1;
}
表示アニメーションが効くケース
html
同上
css
.modal {
  display: none;
}

.modal .modal__container {
  /* opacity をアニメーションさせたい */
  opacity: 0;
  transition: opacity .3s ease;
}

.trigger:checked + .modal {
  /* チェックボックスがONになると表示される */
  display: block;
}

.trigger:checked + .modal .modal__container {
  /* displayプロパティを変更した要素の内側の要素であれば、 */
  /* (displayプロパティを変更した要素以外の要素であれば、) */
  /* アニメーションが効く */
  opacity: 1;
}
注意

非表示は、アニメーションが実行される前に、display: none;になってしまうためアニメーションが効きません

　 Tweet
Qiitaで続きを読む

投稿日：2020-05-18T05:10:02+09:00

初心者によるプログラミング学習ログ 319日目

100日チャレンジの319日目

twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。
すでに100日超えましたが、継続。
100日チャレンジは、ぱぺまぺの中ではプログラミングに限らず継続学習のために使っています。
319日目は、

おはようございます
319日目 5h
・ポートフォリオ作成#早起きチャレンジ #駆け出しエンジニアと繋がりたい #100DaysOfCode
— ぱぺまぺ@webエンジニアを目指したい社畜 (@yudapinokio) May 17, 2020

　 Tweet
Qiitaで続きを読む

20200518のCSSに関する記事は7件です。

スクロールで動く仕組み検証 【Javascript】【脱jQuery】

はじめに

動作デモ

スクロールの計測

判定したい要素の計測

判定ロジック

javascript

スクロール量の考え方

ZONeチャレンジ第一弾をJavaScriptでハックした話

要約

PCでスマートフォン専用サイトにアクセスする

フリック入力をプログラミングで再現する

1. ひらがなボタンのElementを取得

2. 取得したElementに対してフリック入力を再現

3. 答えを機械が認識できる形で入力＆変換

おわりに

Magical Margin Tips

【Ice Break 】 Margin と Paddingの違いついて

Margin Tips

1. Negative Margin

他にも

2. Marginの相殺

3. おまけの応用編(疑似要素 × Negative Margin)

Marginの無い状態での要素間の挙動

理想

現実

Webクリエイター能力認定試験のすすめ

はじめに

こんな方におすすめ

勉強を開始した時の状態

Webクリエイター能力認定試験とは？

受験をおすすめする理由

勉強方法について

テキスト

サンプル問題

受験のポイント

実際のテスト

実技

知識問題

まとめ

SCSS記法チートシート

この内容について

SCSS記法とは

Sassとは

基本的な書き方

ネスト構造系

ネスト構造

親セレクタ参照

ネームスペースネスト

変数系

変数

配列変数

グループ変数

継承系

インポート

継承

文法

条件分岐

繰り返し

繰り返し(配列変数)

演算・色

四則演算

文字列結合

明度の調整

彩度の調整

透明度の調整

色相の調整

色の補色&反転

色を混ぜる

その他

コメントアウト

引用符の付け外し

大文字&小文字化

絶対値を返す

切り上げを返す

切り捨てを返す

四捨五入を返す

この内容について

CSSで表示アニメーションを指定する方法

スクロールで動く仕組み検証　【Javascript】【脱jQuery】