20200330のCSSに関する記事は13件です。

投稿日：2020-03-30T22:13:43+09:00

修正しやすいCSSプリプロセッサの書き方を考える

最近はcssを直接修正することがほぼなく、scssやstylusなどを使って修正をすることがほとんどで、色々なCSSプリプロセッサの機能を使って書くことがほとんどになりました。
その分生のcssを調整する時に感じなかった「こう書かれると困るなー」、「こう書いたけど見にくいなー」というのが色々出てきたので、覚書。

&を使ってのネスト

デベロッパーツールから該当クラスをコピーしてエディターのプロジェクト内検索を行った際、以下のようにネストされると、検索結果に引っかからず目視で該当のクラスを探す必要が出てくるため、＆を使用してのネストの多用を避ける。
もしくは使用箇所をmodifireのみに限定する。
// 検索に引っかからない。
.block {
  width: 600px;
  margin: 0 auto; 
  &__element {
     font-size: 16px;
     &--modifier1 {
       color: #ff0000;
     }
     &--modifier2 {
       color: #00ff00;
     }
  }
}

// 検索に引っかかる。
.block {
  width: 600px;
  margin: 0 auto;
}
.block__element {
  font-size: 16px;
}
.block__element--modifier1 {
  color: #ff0000;
}
.block__element--modifier2 {
  color: #00ff00;
}
extend

該当の要素の修正を行った際、以下のように他箇所でextendされているのを気づかず対応した場合、他箇所に影響が出てしまう。
気づいたとしても対応する場合に新しいクラスを作成する必要が出てくるため、使用する場合は、mixinかプレースホルダセレクタ※を使用する。
// 修正箇所
.block1 {
  width: 600px;
  margin: 0 auto; 
}

// 間に色々な記載

// 気づかず影響を受ける箇所
.block2 {
  @extend .block;
  backgroud: #000;
}

.block3 {
  @extend .block2;
  margin-bottom: 60px;
}
※プレースホルダーセレクタの書き方
// プレースホルダーセレクタ、cssにはコンパイルされない
%extend-block {
  width: 600px;
  margin: 0 auto; 
}

// 他箇所の影響を考えずここだけ修正出来る。
.block1 {
  @extend %extend-block;
}

.block2 {
  @extend %extend-block;
  backgroud: #000;
}

.block3 {
  @extend %extend-block;
  backgroud: #000;
  margin-bottom: 60px;
}
演算

式だけ見ると、どういう風に計算されているか分からない場合があるため避ける。
使用する場合は、コメントアウトで補足を入れる。
// 式が不明
.block1 {
  width: (690 / 750 * 100)vw;
}

// 式が分かる
.block1 {
 // デザイン上の要素の横幅 / デザイン幅 * 100 
  width: (690 / 750 * 100)vw;
}

　 Tweet
Qiitaで続きを読む

投稿日：2020-03-30T18:33:26+09:00

【0円ipadプログラミングの限界に挑む】iPad mini 5だけで本格的なweb開発出来るのかやってみたwwwww

qiita初投稿です。この記事ではipad一台だけでお金かけずにweb開発できるか検証したらどうなったのかを記したものであります。
スクショ及びgif画像多めです。
結果的にはこちら

チョット何言ってるの？？

もうちょっと詳しく説明すると、HTMLやCSS、JavaScript更にはJqueryを使って、フロントエンドのweb開発をするということです。Githubも使います。

7.9インチのipadで

勿論、macやwindowsなどのパソコン使用禁止
なんでmini 5なのかというと、手元にあるapple端末がそれしか無いからです。
そんなこと出来るの！？と思った方もいれば、何とは言いませんが過去によく似た記事を見た人はそういえば！と思った方もいるかもしれません。
ですがその記事で紹介されたアプリは一部お金がかかってたのでこの記事で紹介するアプリは全て0円です。
検証

1 用意するもの

iPad

Bluetoothキーボード（これがないと辛い）

以上！！

2 githubにてRepositoryを作成する

Repositoryがある方は３にスキップ。
iPad版chromeかsafariでGitHubにログインします。
アカウントを持っていない方は「サインアップ」から作ってください。

Repositoryを作成します。

馴染みのある画面で安心しました。
Repository nameの所は必ず入れてください。僕は「ipadonly」という名前にしました。
create Repositoryを押すとRepositoryの作成が完了しました。
ただ、ここからかなり苦労したので出来るだけ詳しく説明していきます。

3 working copyをインストール～Repositoryの入手（？）

appstoreからworking copyというアプリを入手します。このアプリがあるからこその検証なのです！

開くとこんな感じ

画面の青い文字のCreate（もしくは「Repositories」の右の＋）を押すと吹き出しが出てきます。
「Clone repository」を選択します。するとウィンドウが出てくるので

Sign Inをタップ。すると以下のようなウィンドウが開くので、

メアドとパスワードを入力してサインイン！
すると～？

さっき作ったRepositoryが…出てきた！！！
もうこの時点で感動してきたのは僕だけじゃないはず...
1. Repositoryをタップ
2. URLがニョキっと上に移動するのかわいいすき
3. ウィンドウ右上の「Clone」が「Clone」になるのでタップ
するとッ！！？

どうやらRepositoryを開けたようです！！！
ステップ3終わり！

4 いよいよweb開発

それでは早速、コードを書きたいと思います！！その前にフォルダを作成しましょう！
1. 「+」をタップ
2. Create directoryをタップ（何でdirectoryなんすかね）
3. 任意の名前を入力。僕は「tekito」にしました。
Enterを押すとフォルダの作成が完了し、勝手にフォルダが開きます。

ここから皆さんを驚かせます！

作成したフォルダを開き、＋をタップ。

「Create text file」をタップします。

名前を「index」にしてみてください。するとファイル名の隣に緑色の紙のアイコンが出てきました。画面右上が「plain text」になっているのが分かります。普通のテキストファイルですね。それではもう一度、1と2の手順をしてファイルを作成し、今度は名前を「index.html」にしてみてください。するとどうでしょう？

VScodeやん！！！！！！？？？
なんと！？ファイル名の横のアイコンが紙ではなく「</>」になってる！
しかも画面右上の「plain text」が「HTML」に変化したの、分かりますか！？
これは間違いなくッ！！今僕が作成したファイルはHTML形式！！！
今度こそプログラムが書けるので、
index.html
<html>
 <head>
  <title>あ</title>
 </head>
 <body>
 </body>
</html>
とりあえずこれだけ書いてみます。するとどうでしょう？

シンタックスハイライトが付いてるだと！！！？
待ってくださいこれ書いたっていうかコピペして張り付けただけなんすけど！？
これってもしかして...

あっ（　＾ω＾）・・・
いえ、ただVScodeでお馴染みインテリセンスのような自動補完システムが搭載されているのではと思っただけなんです...なかった...

やっぱりインテリセンスがないとVScode使ってる身としては致命的ですねー...どうすれば

そうだ！appstoreで探すんだ！！！VScodeに負けない無料エディタアプリを！！！
「editor code」で検索っと…
ん？なんだこのアプリは？評価高いやんけ・・・（インスコする音）

！！！！！？！？！？？？！？

キタああああああああああああああああんあんあんあんｱ”ﾝｯ！！！！！！！

これを…これを求めてたんや！！！！！
今から全力で解説します！！！
まず、以下のアプリをインスコしてください。

開きます。

Open Koderをタップ。

ちなみにその上のFollow us nowをタップすると公式のツイッターに飛びます。ツイートの頻度少な過ぎたのでフォローはしませんでした。

画面左下の「＋」をタップ。

アイコン好き…
Open Other App’s fileをタップ
ブラウズ➡︎Working copy➡︎ipadonly➡︎tekito➡︎アイコンが「HTML」と書いてある紙の方のindex
の順番にタップします。すると先程開いたindex.htmlが開くかと思います。

そしてカーソルを <diの後に持っていくだけでインテリセンスが表示されます！
いや〜これでようやく本格的なプログラミングが出来るわけですよ！
手始めに、色んなタグを使ってHello Worldの出力でもしてみましょう！！
index.html
<html>
 <head>
  <title>あ</title>
 </head>
 <body>
 <div>
    <h1>Hello World!</h1>
    <h2>Hello World!</h2>
    <p>Hello World!</p>
</div>
 </body>
</html>
なんと自動的に保存されるのでctrl+sを押さなくていい！！
よし。じゃあクローム開いてindex.htmlをドラッグアンドドロッ
そういやプレビューってどうやるんや。。。
プレビューがないと話になりません。そんな時はworking copyを開いて下のgifの通りにします。

はい！これでプレビューが表示されました！！
え？何？クロームで表示したい！？
えっと！頑張って表示できるようにはしましたがお勧めできません。割と手間がかかりますし、バグが起きるリスクがあります（起きた）
なによりipadじゃないと無理です。
1. Koder code editorを再び開きます。
2. index.htmlは開いた状態にして、画面上部の歯車アイコンをタップ。
3. Local File Accessをタップ
4. Enable Local File AccessがONになっているか確認します。
5. 太字で「http://...」と書いてあるのが確認できます。その太字で書いてあるリンクをクロームの検索ボックスに貼り付け検索します。
この時、クロームとKoderを分割画面表示してください。

gif、見難いですがよく見るとindex.htmlの7行目が<h1>Hello!あsdhfjkl</h1>になっています。なのにクロームの方のプレビューをよく見るといまだにHello World!になっているのでやめたほうがいいです。
working copyに戻って、今度はindex.cssとindex.jsを作成します。

分割画面に対応してて偉い！
ちゃんとcssとjsのファイルになっていますねー
今度はhtmlとcssがちゃんと動くのか、index.htmlとindex.cssをいじってヘッダーを作りたいと思います。それぞれのファイルはこちらからどうぞ。（開きますかね？）
パソコンだとこんな感じ

簡単すぎたかな？
じゃあ次！ipadだとどうなるのか！？

明朝体になってて草
それ以外は特に何も変わってなさそうですね！

jqueryは動くのか！？

jqueryはJavaScriptの書き方などを簡単にすることが出来ることで有名ですし、僕もjavascriptそっちのけで勉強してますw
ですが、ipadで書けるのでしょうか...？とりあえず、CDNでやってみたいと思います。
まず、index.html、.css、.jsをこちらの通りとします。
対照実験。パソコンだとjqueryでこんな感じで動いてます。

ではipadではどうんなふうに動くのか！？そもそも動くのか！！？

めっちゃ理想通りに動いてるやんけ…(´；ω；`)
いや～ここまできたらもう感無量です！無事にjquery動いてよかったです！ステップ4大成功！！

5　githubで色んな動作する

commitしてみる

まずcommitをしてみます。windowsではVScodeのターミナルを開いて色々コードを書いてローカルリポジトリにcommitしてpushをしました。
ターミナルの存在しないipadはどうなの？何かあったらやばいのでipadonlyとは別にsampleというリポジトリを作成。適当にhtmlファイルを作成。
画面上部を見る、と

色んなアイコンがありますね...
それらの中で左から3番目の指紋みたいなマークをタップ。

commitをタップ。

上のテキストボックスにsummaryを、その次にdescriptionを入れる感じかな？
htmlファイルの隣のチェックボックスにチェックを入れてCommitを押せばローカルリポジトリへのcommitが完了します。

pushしてみる

ではリポジトリをプッシュしまsy...

うっそだろおおおおおおおおお

どうやらリポジトリやファイルをgithubにpushする動作は有料だそうです。。。
ていうか、commit,revert,pull以外（多分）のgithubの全ての動作が有料でした。パソコンだと何気なく無料で出来るのにipadだと2440円するのはさすがにないと思いました。
ここまでか...いやまだ諦めてない...!!これはあくまでもworking copyなんや...
他のアプリで試すんや...
appstoreで探すんや...gitが使えるツールを...
これはどうかな？
アプリ開いて、サインインして、、、
真面目に説明します。（意味深）
1. サインインしたらヘッダーにNEWSとあります（なんだこれ）。左上の三本線のマークをタップ。
2. RepositoriesのOWNEDをタップ。
3. ipadonlyをタップ。
4. 一番下のSourceをタップ。
5. 編集したいファイルをタップ。（僕はsono2.mdのindex.htmlにしました。）
6. ファイルが開く。
7. 画面右上の共有マークをタップ。からのEditをタップ。
8. ファイルが編集できるようになるので適当に書く。（僕は37行目の「スマホアプリ」を「何か」に変えました。）
9. 編集し終わったら画面右上のsaveをタップ。
10. Upload...と書いてありますが、ここではプッシュのタイトルを記述します。記述し終わったらcommitをタップして完了。

さて、ホントにpushされているのか、windows版githubで確認しようかと思います。

されてたああああああああああああああああ
やっときた...ここまできたら

pullもいけるやろ！

今度はpullが出来るかどうか試したいと思います。PCのVScodeでindex.htmlの22行目の「login」を「brain」にしてコードでプッシュ。そしてipadで

このアプリで開いたファイルをKoderで編集できるようにします。まず、上の5番の手順まで進めてindex.htmlが開いた状態にしておきます。
1. 画面右上の共有マークをタップ。からの「Open In」をタップ。
2. 横にスクロールして「その他」をタップ
3. Suggestionsの「Koderにコピー」をタップ
4. Koderが開く。Documentsの右下の＋マークをタップ
5. New Folderをタップするとファイルを作成できるので、任意のファイル名を入力
6. Createをタップ。作成したファイルを開き、「Done」をタップすると、
初回はそのファイルにindex.htmlをコピーしたやつがインポートされる。
2回目以降は恐らく「ファイルが既に存在しますので上書きしますか？」みたいなことが聞かれるのでyesをタップして上書き。

pushしてみる（2回目）

Koderで色々編集した後、command+Aで全選択してコピーしてCode hubでedit modeにしてまた全選択してペースト。するしか方法がないみたいです。効率悪いですね...。

この記事もめっちゃ長くなったのでここで検証を終えたいと思います。

検証結果及び感想

今回紹介したアプリは3つ。

Working copy：以下、WKと略す。git連携ツール。ここでhtmlファイルなどを作成したり、プレビューを確認できる。2440円課金すればgitの全ての動作が可能。

Koder Code Editor：以下、Koder。ここでプログラムを書くことをお勧めする。

Code Hub：以下、CH。ここでgitの動作を行うことを勧める。

項目(?) 使ったアプリ可能か

htmlファイルなどの作成 WK 可能

ｼﾝﾀｯｸｽﾊｲﾗｲﾄ WK、Koder、CH 可能

ｲﾝﾃﾘｾﾝｽ Koder、WK、CH Koderは可能　WKは✖

HtmlCssJsのプレビュー WK 可能

jquery WK,Koder 可能だがｼﾝﾀｯｸｽﾊｲﾗｲﾄが微妙

github commit WK,CH WK：ﾛｰｶﾙﾘﾎﾟｼﾞﾄﾘへのcommitは可能　CH:可能

push WK,CH WK：課金しないと無理　CH：なんか違う気がするが可能

pull WK,CH WK：課金しないと無理　CH：ゴリ押しでいける

正直ipadのみで、無課金でここまで出来るとは思っておりませんでした。最後にこの記事を書いた本当の目的なんですが、すべてここに書きました。文下手くそかもしれませんがお読みくだされば幸いです。

項目(?)	使ったアプリ	可能か
htmlファイルなどの作成	WK	可能
ｼﾝﾀｯｸｽﾊｲﾗｲﾄ	WK、Koder、CH	可能
ｲﾝﾃﾘｾﾝｽ	Koder、WK、CH	Koderは可能　WKは✖
HtmlCssJsのプレビュー	WK	可能
jquery	WK,Koder	可能だがｼﾝﾀｯｸｽﾊｲﾗｲﾄが微妙
github commit	WK,CH	WK：ﾛｰｶﾙﾘﾎﾟｼﾞﾄﾘへのcommitは可能　CH:可能
push	WK,CH	WK：課金しないと無理　CH：なんか違う気がするが可能
pull	WK,CH	WK：課金しないと無理　CH：ゴリ押しでいける

　 Tweet
Qiitaで続きを読む

投稿日：2020-03-30T17:11:18+09:00

コードの写経したけど、動かない件

コードの写経したけど、動かねぇ...

そんなことは、初心者あるあるかと思います。

いちいち、自力で違いをチェックするのも面倒でしょう。

そんな時は、diffコマンドがおすすめ。（完成品ファイルがある時に限る。）

diffコマンドの使い方

diff [オプション] オリジナルファイル新しいファイル

が基本です。

結果としては、例えば

1c1
< a
---
> b

などと返ります。

これは、オリジナルファイルの1行目がaから、新しいファイルの1行目がbに変わったという意味ですね。

ちなみに、変更が複数行にわたる時は、数字の部分が1,2とかなります。

コマンドの返りの意味

cは変更の意味ですが、dは削除、aは追加という意味ですね。

　 Tweet
Qiitaで続きを読む

投稿日：2020-03-30T15:39:14+09:00

【Vue + vue-mq】レスポンシブ対応でのVue実装について

目次

・レスポンシブ対応での課題
・レスポンシブ対応での課題解決方法
・vue-mqとは
・vue-mqの実装方法
・vue-mqでのデメリット
・vue-mqのseo要件が満たされない可能性とは
・vue-mq実装時の動き

レスポンシブ対応での課題

一般的な実装方法としては、PCやスマホなど各デバイス毎に各HTMLファイルを複数用意し最適化する手法を取っています。
レスポンシブ対応では、1つのHTMLファイルを、CSS3（Media Queries）で制御し、異なる画面サイズに応じてページのレイアウト・デザインを調整します。
その際、ここで問題となるのが「1つのHTMLファイル」。
一般的な実装方法を先ほど記載しましたが、基本PC・SPでHTMLが分かれている。
つまり、PC用のデザイン、SPの用のデザインとなっているため、それに合わせてHTML構造も異なります。

レスポンシブ対応する際は、デザイナーがPC・SPでの表示を考慮してデザインしたものを対応する場合はそこまで困らないですが、
今まであったものをそのままレスポンシブで対応するとなると、
デザイン的に考慮されていなかった表示をレスポンシブで対応しなければいけません。

そのため、「1つのHTMLファイル」とCSS3（Media Queries）での制御では実装的に苦しい部分が出てきます。

今回は、まさにこの内容で、
「今まであったものをそのままレスポンシブで対応」という要件があり、
HTML構造がPC、SPを「1つのHTMLファイル」で対応するとCSS側がごちゃごちゃするので、
こういった部分にだけ、vue側もレスポンシブ対応させようと思いました。

レスポンシブ対応での課題解決方法

上記、課題解決の方法として、
vue実装であれば、「vue-mq」plugin を使用することで、課題解決ができそうだったので、
「vue-mq」plugin を試してみることにしました。

vue-mqとは

vue-mqは、Vueを使用してレスポンシブのブレークポイントを定義できるライブラリです。
セマンティックおよび宣言的にモバイルファーストの構築が行えます。

簡単にお伝えするとCSSのMedia QueriesのHTML版と考えてもらえるとわかりやすいかと思います。

vue-mqの実装方法

基本的にはドキュメントを参考に実施してもらえれば問題なくできるかと思います。

ドキュメント：https://www.npmjs.com/package/vue-mq

一応、こちらにも実施手順を記載します。

1.Installation

Using NPM
npm install vue-mq
Using Yarn
yarn add vue-mq
2.ファイル作成
touch src/plugins/vue-mq.js
3.vue-mq.jsにブレイクポイントを記載
import Vue from 'vue'
import VueMq from 'vue-mq'

Vue.use(VueMq, {
  breakpoints: {
    sp: 959,
    pc: 960
  },
  defaultBreakpoint: 'sp'
})
4.nuxt.config.ts(nuxt.config.js)にのplugins内にvue-mqを登録
plugins: ['~/plugins/vue-mq'],
or
module.exports = {
  plugins: [
    '~/plugins/vue-mq',
    ...
  ],
}
5.vue側での実装
<template>
  <div>
    <div>{{ $mq }}です</div>
    <div v-if="$mq === 'sp'">
      SPのtemplateです。
    </div>
    <div v-if="$mq === 'pc'">
      PCのtemplateです。
    </div>
  </div>
</template>
これにより、レスポンシブの対応で実装したMedia Queries同様に
vue側も表示領域に合わせたDOMに切り替わるため、
vueファイルは1つのままで、表示を切り替えることが可能となります。

vue-mqでのデメリット

基本的にレスポンシブ対応には重宝すると思われる「vue-mq」ですが、いくつかデメリットも考えられます。

1、レスポンシブ対応と言いつつ、PC・SPでvue実装を分けているため、負債が多少残る可能性がある。（テンプレートを分けているのと似ているため）
2、SEO要件が満たされない可能性がゼロではない。（ここは最後に少しお話しします。）

大きなデメリットは無いと思われるものの、
よく考えてみると見えていなかったデメリットも見えてくるので実施に使用するか否かの判断は
慎重に決める必要があるかなと思います。

vue-mqのSEO要件が満たされない可能性とは

vue-mqは実際のHTMLにはソースとして入っていないため、googleBotが正確に認識できているかという点が挙げられます。
よくSPAはSEO上はよくないとか、そういう話が昔あったと思います。
vue-mqの特徴として「画面サイズに応じてクライアントサイドで再レンダリング」されます。
そのためSSRとはまた違った動きになります。

注目すべき点は1つで、
「クライアントサイドで再レンダリングされる」、これがSEO的に問題ないか？という点になります。

私もここは気になったので少し調べてみたところ、そちらの内容を検証されている方の記事がありました。
https://logmi.jp/tech/articles/321993

内容的には以下になります。

・2019年5月にGooglebotが急にアップデートを発表
・アップデートにより「Webブラウザでユーザーが表示するのとまったく同様に」Googlebotがクローリングしてくれるようになった
・検証結果としてPC、SPでの表示内容をGooglebotが認識している

上記内容から、
クライアントレンダリングがSEO的に問題と思われる節がありましたが、
そのような内容が解決してきている状況と見えそうですね。

vue-mq実装時の動き

vue-mqを実際に実装した際の動きをcodepenに入れてみました。
下記のようにサイズが変化することで表示される内容が切り替わります。

See the Pen vue-mq sample by miyawash (@miyawash) on CodePen.

　 Tweet
Qiitaで続きを読む

投稿日：2020-03-30T15:34:49+09:00

SCSS記法まとめ

この記事はSCSS環境構築まとめの続きという位置づけで書いています。

子孫セレクタのネスト

SCSSでは子孫セレクタをネストして書くことができます。
CSSの場合
style.css
nav ul {
  background-color: #f00;
}

nav li {
  color: #ff0;
}
SCSSの場合
style.scss
nav {
  ul {
    background-color: #f00;
    }

  li {
    color: #ff0;
    }
}
このようにネストしてまとめて書くことができるので、親子関係がわかりやすくなります。

子セレクタ、隣接セレクタのネスト

子セレクタや隣接セレクタのみをネストしたい場合もあります。
CSSの場合
style.css
ul {
  background-color: #ff0;
  }

ul>li {
  color: #f00;
  }
SCSSの場合
style.scss
ul {
  background-color: #ff0;
  >li {
    color: #f00;
    }
  }
このように、子セレクタの頭に>を付けるだけで、子セレクタ扱いになります。
隣接セレクタの場合は、>の代わりに+です。

疑似クラス、疑似要素のネスト

疑似クラスや疑似要素もSCSSではネストして書くことができます。
CSSの場合
style.css
.save-btn {
  background-color: #000;
  }

.save-btn:hover {
  background-color: #f00;
  }
SCSSの場合
style.scss
.save-btn {
  background-color: #000;
  &:hover {
    background-color: #f00;
    }
  }
上のように、ホバー時やクリック時、:beforeや:afterなどもすべてネストして記述することができます。

プロパティのネスト

一部のプロパティもネストすることができます。
CSSの場合
style.css
.box {
  font-color: #000;
  font-weight: "bold";
  }
SCSSの場合
style.scss
.box {
  font: {
    color: #000;
    weight: "bold";
    }
  }
このように、font-colorとfont-weight、background-colorとbackground-imageなどの初めの単語が同じプロパティはネストして書くことができます。

メディアクエリのネスト

メディアクエリもネストすることができます。
CSSの場合
style.css
div {
  margin: 0 10px;
  }

@media(max-width: 670px) {
  div {
    margin: 0;
  }
}
SCSSの場合
style.scss
div {
  margin: 0 10px;
  @media(max-width: 670px) {
    margin: 0;
  }
}
このように、メディアクエリをネストすることで一目で画面幅とその時に適用させたいCSSを見比べることができます。

変数

SCSSでは色などを変数に格納して開発を効率化できます~~(CSSでも似たようなことはできますが)~~。
CSSの場合
style.css
.style1 {
  background-color: #f00;
}
.style2 {
  background-color: #f00;
}
.style3 {
  background-color: #f00;
}
#f00がメインカラーであるとします。
もしメインカラーが#ff0に変更になると、#f00と指定してある場所はすべて変更することになります。
これを解決するのが変数です。

SCSSの場合
style.scss
$main-color: #f00;

.style1 {
 background-color: $main-color;
}
.style2 {
 background-color: $main-color;
}
.style3 {
 background-color: $main-color;
}
値を変数に格納するには、上のように$変数名: 値;のように書きます。
変数を使う利点は、値に変更が生じたときに変数を定義している部分だけ書き換えればすべての値を変更できる点です。

演算

Sassでは値の演算もできます。~~(これもCSSでも似たようなことが可能です)~~
CSSの場合
横1920px,縦1042pxの画像を使用している想定です。
style.css
.main-img {
  width: 100vw;
  height: 54vw;  /*≒1042÷1920×100vw*/
  }
このように自分の手で計算してからサイズを指定する必要があります。
SCSSの場合
style.scss
.main-img {
  width: 100vw;
  height: 1042/1920*100vw;
  }
このように直接計算記号を使うことができるので、計算する手間を省くことができます。
単位の違う値でも計算することができるので、かなり便利です。

関数

SCSSには関数も用意されています。

lighten、darken
style.scss
color: lighten(#fff000, 30%); /*#fff000を30%明るくする*/
color: darken(#fff000, 40%);  /*#fff000を40%暗くする*/
↓ これが
style.css
color: #fff999;
color: #333000;
こうなる。
このように、lighten関数やdarken関数に色と割合を渡すと、渡した色を渡した割合だけ明るくしたり暗くしたりすることができます。

round
style.scss
height: round(1042/1920*100vw);
↓これが
style.css
height: 54vw;
こうなる。

round関数は、入力した値を四捨五入してくれます。

他にも様々な関数がありますが、長くなるうえ、頻繁に使うものでもないのでここでは省略します。

コンポーネント

SCSSでは、ファイルをコンポーネントごとなどで分割して管理することで、保守性を高めることができます。
コンポーネントで分けたファイルを読み込むには、
style.scss
@import "button";
_button.scss
button {
  width: 20px;
  height: 10px;
}

.blue-btn {
  background-color: blue;
}
この時、"button"を定義するファイル名の頭にはアンダースコア_を入れる必要があります。

継承

SCSSでは、スタイルを継承してコードを短くする仕組みもあります。
CSSの場合
style.css
.btn {
  width: 50px;
  height: 20px;
  }

.blue-btn {
  width: 50px;
  height: 20px;
  background-color:  blue;
}
CSSで書くと、このように同じスタイルを何度も書く必要が出てくる時があります。

SCSSの場合
style.scss
.btn {
  width: 50px;
  height: 20px;
  }

.blue-btn {
  @extend .btn;
  background-color: blue;
  }
SCSSを使うと、このように共通のスタイルは@extendを使うことで省略することができます。

まとめ

ミックスインなどの機能もありますが、一部の機能は記事の長さと私自身がいまいち理解できていないという面から省略しています。
もし興味があったらリファレンス等で調べてみてください。
SCSSを使うと、コードの省略や分割の面でかなり有利になります。
SCSS便利なのでどんどん使っていきましょう!!

　 Tweet
Qiitaで続きを読む

投稿日：2020-03-30T15:34:30+09:00

SCSSの環境構築方法いろいろ

SCSSとは?

SCSSは、CSSに演算機能や変数、ネストなどを用いることで、より効率的に書けるようにした、Sassの記法の1種です。
Sassには、SASS記法とSCSS記法があります。
SASS記法では中かっこを使用しないので、可読性やCSSとの互換性と引き換えに、より短く書くことができます。
SCSS記法ではCSSと同様に中括弧{}を使用するため、SASS記法と比べて見た目がCSSに近くなり、可読性が高まったりCSSを混ぜて記述することができるといったメリットがありますが、少しだけコードが長くなります。

コンパイルの方法

ブラウザはHTML、CSS、JavaScript以外の言語を読み込むことができないので、拡張子が.scssのSCSSは事前にCSSに変換してあげる必要があります。このSCSSからCSSに変換する作業のことをコンパイルと言います。
コンパイルの仕方はいくつかありますが、ここでは4つの方法を紹介します。

①専用のサイトを使用する方法

SassをCSSに変換してくれる、Sass Meisterというサイトがあります。
このサイトでは、下の写真のようにSassで書いたコードを自動でCSSにコンパイルしてくれるので環境構築も必要なく、とりあえず試してみたい学習者に適しています。

②Rubyを使う方法

この方法は、自身のパソコンにRubyをインストールしている必要があります。
Macを使用している方はデフォルトでRubyが入っているので問題ありませんが、Windowsを使用している方はセットアップが必要です。
Windowsを使用している方はこちらからダウンロードした後、画面に従ってインストールを行ってください。
----------------ここからはMac、Windows共通で行う必要があります。-------------------------
ターミナル(コマンドプロンプト)を起動して、以下のコマンドを打ち込んでください。
$gem install sass
これでインストールに成功すれば準備完了です。
SCSSを記述しているファイルがあるディレクトリに移動して以下のコマンドを実行してください。
$sass qiita.scss:qiita.css
ファイル名は適宜変更してください。
コロンの前が元のSCSSファイル名、後が生成されるCSSファイルの名前になります。
これだけです。
これを実行すると、SCSSがあったディレクトリにCSSファイルが新たに生成されます。
このコマンドには実行時にオプションを付けることができます。

①圧縮オプション
$sass qiita.scss:qiita.css --style compressed
これを実行すると改行がない圧縮された状態で出力されるので、可読性の低下と引き換えにサイトの表示を早めることができます。
基本的にスタイルシートはSCSSを使って管理することになると思うので、CSSファイルの可読性の低さはあまり問題にはならないと思います。

②監視オプション
$sass --watch qiita.scss:qiita.css
開発途中で毎回コマンドを実行するのはあまりにも効率が悪いです。
このコマンドを実行すると、SCSSファイルの変更を検知して、その部分をCSSファイルに自動で反映してくれます。
開発中は基本的にこれを使うことになると思います。

GUIソフトを使用する方法

Sassには、コンパイルするためのGUIソフトが用意されています。
よく使われるのは、PreprosとKoalaです。

Prepros

Koala

PreprosもKoalaも使い方はほとんど同じです。
ファイルをドラッグして、コンパイルしたいファイルを選択、Preprosなら右下のProcess Fileを、KoalaならConpileをクリックすれば終わりです。

VSCodeを使用する方法

エディタであるVSCodeでも、拡張機能を使用することでコンパイルが可能です。
Live Sass Compilerという拡張機能をインストールして有効化すると画面の右下にWatch Sassというボタンが表示されます。
これをクリックすると、自動でSassのコンパイルが始まり、変更があればその都度CSSファイルに反映してくれます。

まとめ

長くなりましたが、これでSCSS(正確にはSASSも)を使う準備ができました。
実際にSCSSを書く時の記法はこちらをご覧ください。

　 Tweet
Qiitaで続きを読む

投稿日：2020-03-30T15:06:38+09:00

なるほどメモ_1

ひとつの親要素の中で子要素をそれぞれ左寄せと右寄せにするには...

親要素に対して
display: flex;
justify-content: space-between;

太字じゃなくするのは

font-weight: normal;

行の高さを指定するのは

line-height:px;

スクロールしても固定させるのは

position: fixed;

固定部分と画像が重なるときは、

z-index: 9999;

背景画像を指定するのは

background-image: url();

背景画像を領域いっぱいに広げるのは

background-size: cover;

padding:上　右　下　左;

liの中にaタグ使ってるときのテキストスタイルを変更するときはaタグに対して指定する

a{
text-decoration: none;
color:white;
}

　 Tweet
Qiitaで続きを読む

投稿日：2020-03-30T14:57:20+09:00

Power Apps Component FrameworkでGitHubAPIを使ったコントロールを作成する

Power Apps Component Framework でコントロールを作成する

この記事はこちらの動画をもとに作成してあります。

Power Apps Component Frameworkとは

キャンバスアプリやモデル駆動型アプリのUIを作成するフレームワークのことです。
例えば数値を入力するスライダーや、日付を入力する際にカレンダーなどUIの部品を作成できます。
詳細はPower Apps Component Frameworkの概要で説明してあります。

環境構築

まずはMicrosoft Power Apps CLIをインストールする必要があります。
Microsoft Power Apps CLIはカスタマイズの作成、構築、デバッグ、公開を行うコマンドのことです。
Microsoft Power Apps CLIインストールとコマンド一覧に詳細が書かれています。
不足しているものをインストールしておいてください。

component framework プロジェクト作成

プロジェクトを作成したいディレクトリに移動しておきます。
以下のコマンドを実行します。

> pac pcf init --namespace [specify your namespace here] --name [Name of the code component] --template [component type]

今回はコンポーネントのタイプをフィールドに設定します。
>pac pcf init -ns fic -n GitControl -t field
PowerApps component framework プロジェクトが 'C:\Microsoft\GitControl' 内に正常に作成されました。
プロジェクトの依存関係をインストールするために、このディレクトリで 'npm install' を実行してください。
Node.jsのパッケージをインストールします。
>npm i
作成したプロジェクトをVisual Studio Codeで開きます。
>cd GitControl

>code .
(Visual Studio Codeが起動)
作成したプロジェクトのファイルに以下が用意されているか確認します。

PCF コントロールフォルダ

マニフェスト(ControlManifest.Input.xml)

control metadata

configuration propaties

resources

コントローラ(index.ts)

init()

updateView()

getOutputs()

destroy()

コントローラにデフォルトで用意されているメソッドについて軽く説明します。

init()

indexが呼び出されたときに最初に1度だけ処理される

updateView()

スクリーンサイズが変わったときやイベントが走った時などに呼び出される

getOutputs()

UIに送るreturn値の定義

destroy()

全てのイベントハンドラのClean up用

画面にテキストボックスを表示/valueの取得

マニフェスト修正

namespaceは大文字始まりが良いようです。
ControlManifest.Input.xmlを修正します。
<?xml version="1.0" encoding="utf-8" ?>
<manifest>
  <control namespace="Fic" constructor="GitControl" version="0.0.1" display-name-key="GitControl" description-key="GitControl description" control-type="standard">
    
    <property name="gitUsername" display-name-key="Property_Display_Key" description-key="Property_Desc_Key" of-type="SingleLine.Text" usage="bound" required="true" />

 ...
エレメントの追加

画面にテキストボックスとイメージを追加します。
init()に以下を追記します。
    public init(context: ComponentFramework.Context<IInputs>, 
                notifyOutputChanged: () => void, 
                state: ComponentFramework.Dictionary,
                container:HTMLDivElement)
    {
        let textbox = document.createElement("input");

        let image = document.createElement("img");

        container.appendChild(textbox);
        container.appendChild(image);
    }
ここでビルドを走らせ、ファイルが更新する度に自動でビルドを行うようにします。
> npm run build
実際に追加したテキストボックスを見てみたいと思います。
> npm start watch
画面が切り替わり、テキストボックスが表示されていたら成功です。
イメージをまだセットしていないため、画像は表示されません。

valueの取得

init()に以下を追加します。
    let username = context.parameters.gitUsername.raw || "";
    let textbox = document.createElement("input");
    textbox.value = username;
これでgitUsernameをセットした状態で画面を更新するとテキストボックスにデフォルト値が入ります。

GitHubAPIを使ってみる

テキストボックスに入力されたユーザネームからアバターを表示してみます。
まずは、ユーザネームからアバターを取り出すメソッドをindex.tsに追加します。
    private async setAvatarImage(imageContainer: HTMLImageElement, 
                                username: string) {
        const response = await fetch("https://api.github.com/users/" + username);
        const body = await response.json();
        imageContainer.src = body.avatar_url;
    }
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　
次に、テキストボックス内のテキストが変更された時に呼び出されるイベントハンドラをindex.tsに追加します。
    public textboxOnChange(): void {
        this._value = this._textbox.value || "";
        this.setAvatarImage(this._image, this._value);
        this._notifyOutputChanged();    
    }
このままだと変数未定義のエラーが出てしまうので、必要な変数を定義していきます。
export class GitControl implements ComponentFramework.StandardControl<IInputs, IOutputs> {

    private _notifyOutputChanged: () => void;

    private _textbox: HTMLInputElement;
    private _image: HTMLImageElement;

    private _value: string;

    private _textboxOnChange: EventListenerOrEventListenerObject;
init()が呼び出されたタイミングでこれらの変数に値を入れていきます。
    public init(context: ComponentFramework.Context<IInputs>, notifyOutputChanged: () => void, state: ComponentFramework.Dictionary, container:HTMLDivElement)
    {
        this._notifyOutputChanged = notifyOutputChanged;
        this._textboxOnChange = this.textboxOnChange.bind(this);

        let username = context.parameters.gitUsername.raw || "";
        // Add control initialization code
        let textbox = document.createElement("input");
        textbox.addEventListener('input', this._textboxOnChange);

        textbox.value = username;
        this._textbox = textbox;

        let image = document.createElement("img");
        this._image = image;

        container.appendChild(textbox);
        container.appendChild(image);
    }
最後に、変更されたusernameをgitUsernameプロパティにセットするためにgetOutputs()を使って定義します。
    public getOutputs(): IOutputs
    {
        return {
            gitUsername: this._value
        };
    }
これでテキストボックス内を変更するたびにAPIが呼び出されアバターが更新されます。
また、画面右側のデータの出力の値もテキストボックスが変更される度に更新されます。

アバターの枠を変更する

ドロップダウンでアバターの枠を変更できるように設定してみます。
まずはプロパティを追加します。
    <property name="gitUsername" display-name-key="Property_Display_Key" description-key="Property_Desc_Key" of-type="SingleLine.Text" usage="bound" required="true" />
    <property name="imageShape" display-name-key="Property_Display_Key" description-key="Property_Desc_Key" of-type="Enum" usage="input" required="true" >
      <value name="square" display-name-key="square" description-key="Square">Square</value>
      <value name="circle" display-name-key="circle" description-key="Circle">Circle</value>    
    </property>
次にinit()から追加したプロパティを受け取ります。
gitUsernameを受け取るタイミングでshapeも受け取ります。
        let username = context.parameters.gitUsername.raw || "";
        let shape = context.parameters.imageShape.raw;
次に、cssファイルを追加します。
GitControlフォルダにcssフォルダを追加し、GitControl.cssファイルを作成します。
GitControl\css\GitControl.css
.Fic\.GitControl img{
    border-style: solid;
    border-width: 5px;
    border-color: #742774;
    height: 150px;
    width: 150px;
}

.Fic\.GitControl input{
    width: -webkit-fill-available;
}

.Fic\.GitControl .circle{
    border-radius: 50%;
}
これで実行すると、アバターに枠がついています。

しかし、この状態でimageShapeをcircleに変更してもアバターの枠を変えることはできません。
initializaは文字通り1度しか呼ばれないからです。
ここからは枠を丸く変化させる実装をしていきます。
    public init(context: ComponentFramework.Context<IInputs>, notifyOutputChanged: () => void, state: ComponentFramework.Dictionary, container:HTMLDivElement)
    {
        this._notifyOutputChanged = notifyOutputChanged;
        this._textboxOnChange = this.textboxOnChange.bind(this);

        let username = context.parameters.gitUsername.raw || "";
        // Add control initialization code
        let textbox = document.createElement("input");
        textbox.addEventListener('input', this._textboxOnChange);

        textbox.value = username;
        this._textbox = textbox;

    let image = document.createElement("img");
        if(shape == "Circle") { image.classList.add("circle") }
        this._image = image;

        container.appendChild(textbox);
        container.appendChild(image);
    }
これで「circle」に設定してからリロードすると
アバターの枠が丸くなったかと思います。

しかし、代わりにアバターがクリアされてしまいます。
アバターをセットするタイミングは、テキストボックスを変更したときしか用意されていないためです。
ここでinit()に、枠と同時にアバターをセットするコードを追加します。
        let image = document.createElement("img");
        if(shape == "Circle") { image.classList.add("circle") }
        this.setAvatarImage(image, username);
        this._image = image;
これでリロードしてもセットしていたusernameからアバターを表示することができます。

フィールドレベルのセキュリティ実装

ここからはフィールドレベルのセキュリティを実装します。
初めに、読み取り専用の際は変更無効のロジックをupdateView()に追加します。
    public updateView(context: ComponentFramework.Context<IInputs>): void
    {
        // Add code to update control view
        this._textbox.disabled = context.mode.isControlDisabled;
    }
次にページを離れた時のイベントの破棄をdestroy()に実装します。
    public destroy(): void
    {
        // Add code to cleanup control if necessary
        this._textbox.removeEventListener('input', this.textboxOnChange);
    }
デプロイ

ここまでできたらデプロイしていきます。

まずは埋め込むアプリを認証する必要があります。
認証プロファイルの作成から行いましょう
  使用法: pac auth [create] [list] [select] [delete] [clear]

    create                      認証プロファイルを作成してこのコンピューターに保存します
    list                        このコンピューターに保存されている認証プロファイルをリストします
    select                      アクティブにする認証プロファイルを選択します
    delete                      特定の認証プロファイルを削除
    clear                       このコンピューターに保存された認証プロファイルをすべてクリア
こちらに従って
> pac auth create -u [環境URL]
環境URLはDynamics 365 Administration Centerから確認することができます。

サインインを求められますので、アカウント名とパスワードを入力してください。
認証が正常に作成されました。
接続の検証中...
接続先...[環境名]
こちらが表示されたら成功です。
コンポーネントをプッシュしていきます。
--publisher-prefix          CDS ソリューション発行者を表すカスタマイズの接頭辞の値 (エイリアス: -pp)
--verbosity                 一時的なソリューション ラッパーをビルドする際の MSBuild の詳細レベル。 (エイリアス: -v)
                            値: minimal, normal, detailed, diagnostic
--force-import              Force a full update of the control (エイリアス: -f                 テレメトリ設定の管理
-pp で接頭語を入れます。
> pac pcf push -pp fic
初回のプッシュは3分ほどかかります。
現在の組織に一時的なソリューション ラッパーをインポート: 完了。
Updating the control in the current org: done.
プッシュが完了しました。
今後のプッシュは修正箇所のみがプッシュされる為、より早くなります。

作成したソリューションを使う

それではソリューションを確認します。
ブラウザでPowerAppsの左メニューからSolutionsを開くとPowerAppsTools_ficが追加されていることがわかります。

ここでGitHub_usernameを格納するフィールドを、任意のエンティティに用意します。
データの型はsingle line textとしておいてください。
フィールドのプロパティを開き、コントロールを追加します。
Controlsタブを選択し「Add Control...」から作成したコントロールを選びます。
Web, Phone, Tablet全てにチェックを入れます。
下のプロパティをcircleに設定しておきます。

フォームに作成したフィールドを挿入し、実際にアプリを動かして見ると、アバターが表示されます。

これでGitHubのユーザ名を登録する際に、正しく入力することができているかアバターを使って確認できるようになりました。

　 Tweet
Qiitaで続きを読む

投稿日：2020-03-30T12:25:24+09:00

marginなどの指定方法、ショートハンド（省略方法）

上、右、下、左の順に指定する方法
.block {
  margin: 50px 20px 50px 20px;
}
四方同じ数値で指定する方法
.block {
  margin: 50px;
}
上下、左右の順に指定する方法
.block {
  magin: 50px 20px;
}
上、左右、下の順に指定する方法
.block {
  margin: 50px 20px 80px;
}

　 Tweet
Qiitaで続きを読む

投稿日：2020-03-30T10:24:43+09:00

同じ行に中央寄せと右寄せを混在させたい…！(CSS)

はじめに

エンジニアならHTMLとCSSは出来て当たり前だと言われてますが、意外と奥が深く、調べないと分からない場面って結構ありますよね！
今回は、私が先日遭遇した、調べないと分からなかったCSSについてご紹介します！

今回やりたかった事

こんな感じで、ヘッダー内にロゴを中央寄せ、メニューアイコンを右寄せに配置しようとしました。

flexbox を使えば、

２つの要素を片側に寄せたりとか、端と端に寄せたりとかは簡単なのですが、

１つを中央、もう１つを右端（もしくは左端）に配置したい場合は、どうしたら良いのでしょか？

さっそく見ていきましょう！

方法

今回は、以下の状態から説明スタートです。
<div class="header-item">
  <h3>Goutfit</h3>
  <i class="fas fa-bars"></i>
</div>
.header-item {
  display: flex;
}

h3 {
  margin: 0;
  line-height: 50px;
}

i {
  line-height: 50px;
  font-size: 20px;
}
line-heightとかサイズとか調整して、display flex で横並びにしてある状態です。

上記のCSSにjustify-contentを追加します。
.header-item {
  display: flex;
  justify-content: center;  // 追記
}

h3 {
  margin: 0;
  line-height: 50px;
}

i {
  line-height: 50px;
  font-size: 20px;
}
justify-content: center; で、取り敢えず要素を中央寄せにしました。

ここから、さらにアイコンだけを動かしていきます！
.header-item {
  display: flex;
  justify-content: center;
  position: relative;   // 追記
}

h3 {
  margin: 0;
  line-height: 50px;
}

i {
  line-height: 50px;
  font-size: 20px;
  position: absolute;  // 追記
  right: 0;          // 追記
}
親要素に position: relative; を追加。
アイコンに position: absolute; を追加し、
親要素を機転に right: 0; とします。

すると、

求めていた配置にする事ができました！！

まとめ

flexbox だけでは出来なかった配置も、
position を組み合わせる事で可能となります！

今回の記事が少しでも参考になれば嬉しいです！

　 Tweet
Qiitaで続きを読む

投稿日：2020-03-30T05:08:09+09:00

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

100日チャレンジの276日目

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

おはようございます
276日目
・xdデザインカンプからのサイト模写
・FLOU設計にあわせて、コード整理#早起きチャレンジ #駆け出しエンジニアと繋がりたい #100DaysOfCode
— ぱぺまぺ@webエンジニアを目指したい社畜 (@yudapinokio) March 29, 2020

　 Tweet
Qiitaで続きを読む

投稿日：2020-03-30T02:28:35+09:00

iGarage 体験会カリキュラム

JavaScriptでおみくじを作ってみよう

今日のゴール

ボタンをクリックするとランダムで運勢が表示されるおみくじを作ってみましょう。

　　　　　↓クリック↓

使用するファイル

MyOmikujiフォルダ内にある、index.html,styles.css,main.jsを編集していきます。

index.htmlでは全体の見た目

styles.cssではスタイル

main.jsではアニメーション

を主に作ります。

見た目の実装

まずはindex.htmlで全体の見た目を作っていきます。

テキストエディタでindex.htmlを開いて、以下を貼り付けましょう。
index.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>おみくじ</title>
  <link rel="stylesheet" href="css/styles.css">
</head>
<body>
  <script src="js/main.js"></script>
</body>
</html>
これはHTMLを書く際の決まりのようなものです。

次にボタンとなる要素を作ります。
<body>の下の行に、
index.html
  <div id="btn">?</div>
を入れましょう。
最初ボタンに表示される?を入れておきました。
また、id="btn"と入れておくと、後でJavaScriptから扱いやすくなります。

ここまで出来ているか、index.htmlをブラウザで開いて確認してみましょう。
?が表示されていればOKです。

ボタンのスタイルを作ろう

次に、styles.cssを編集してボタンのスタイルを作っていきましょう。

先程、id="btn"として?を表示した部分をボタンの形にしましょう。
styles.cssを開いて、
styles.css
#btn {
  width: 200px;  /* 幅: 200px */
  height: 200px;  /* 高さ: 200px */
  background: #ef454a;  /* 背景色: #ef454a */
  border-radius: 50%;  /* ボタンを円形に */
  margin: 30px auto;  /* ボタンの位置を上から30px,左右の余白を均等に */
}
一度、ブラウザを更新して確認してみましょう。

?の位置がずれてしまっているので、直してみましょう。

margin: 30px auto;の下の行を追加します。
styles.css
#btn {
  width: 200px;  /* 幅: 200px */
  height: 200px;  /* 高さ: 200px */
  background: #ef454a;  /* 背景色: #ef454a */
  border-radius: 50%;  /* ボタンを円形に */
  margin: 30px auto;  /* ボタンの位置を上から30px,左右の余白を均等に */
  /* ここから */
  text-align: center;  /* 左右中央揃え */
  line-height: 200px;  /* 高さ調整 */
  color: #fff;  /* 文字の色: 白 */
  font-weight: bold;  /* 太字 */
  font-size: 42px;  /* 文字の大きさ: 42px */
  /* ここまで */
}
ブラウザを更新して確認してみましょう。

ボタンをクリックした操作を作ろう

ボタンをクリックできるようにして、クリックした時の処理を書いていきましょう。

main.jsを開いて、
main.js
'use strict';
を入れましょう。これによって厳密なエラーチェックをするようにします。
その下の行に、
main.js
{
  const btn = document.getElementById('btn');

  btn.addEventListener('click', () => {
    btn.textContent = 'hit!';
  });
}
を入れましょう。

ブラウザを更新して変化を見てみましょう。
ボタンをクリックするとhit!と表示されるようになりました。

ここで、ボタンがクリックできることがわかるようにスタイルを追加し、さらに、ボタンの形を整えていきましょう。

styles.cssを開いて、
font-size: 42px;の下の行を追加します。
styles.css
#btn {
  width: 200px;  /* 幅: 200px */
  height: 200px;  /* 高さ: 200px */
  background: #ef454a;  /* 背景色: #ef454a */
  border-radius: 50%;  /* ボタンを円形に */
  margin: 30px auto;  /* ボタンの位置を上から30px,左右の余白を均等に */
  text-align: center;  /* 左右中央揃え */
  line-height: 200px;  /* 高さ調整 */
  color: #fff;  /* 文字の色: 白 */
  font-weight: bold;  /* 太字 */
  font-size: 42px;  /* 文字の大きさ: 42px */
  /* ここから */
  cursor: pointer;  /* カーソルをポインターに */
  box-shadow: 0 10px 0 #d1483e;  /* ボタンの下に影をつける */
  user-select: none;  /* 中のテキストを選択不可に */
  /* ここまで */
}
一番下の行に、
styles.css
#btn:hover {
  opacity: 0.9;  /* ホバーした時に色を薄く */
}

/* クリックするとボタンが押し込まれたように */
#btn:active {
  box-shadow: 0 5px 0 #d1483e;
  margin-top: 35px;
}
を追加します。

ブラウザを更新して確認してみましょう。

乱数を表示してみよう

最終的にはランダムで運勢が表示されるようにします。
そのために、乱数を使ってランダムな数値を作ってみましょう。

JavaScriptでは、Math.random()という命令を使うことで０以上１未満のランダムな数値を生成出来ます。

main.jsの'hit!'の部分をMath.random()に変えます。
main.js
{
  const btn = document.getElementById('btn');

  btn.addEventListener('click', () => {
    btn.textContent = Math.random();
  });
}
このようになります。

ブラウザを更新して確認してみましょう。
０以上１未満のランダムな値が生成されるかと思います。

条件分岐で運勢を表示しよう

条件分岐にはif文を使います。

まずは、先程の
main.js
{
  const btn = document.getElementById('btn');

  btn.addEventListener('click', () => {
    btn.textContent = Math.random();
  });
}
を消して、
main.js
{
  const btn = document.getElementById('btn');

  btn.addEventListener('click', () => {
    const n = Math.random();
  });
}
とします。
これでnをランダムな数値としています。

このnはMath.random()によって、０以上１未満の乱数となるので、
例えば、大吉を22％の確率で表示したい場合は、
main.js
    if (n < 0.22) {
      btn.textContent = '大吉'
    }
をこの行:
main.js
    const n = Math.random();
の下の行に入れてあげれば良いでしょう。

また、大吉以外の場合も書いてあげましょう。
main.js
    if (n < 0.22) {
      btn.textContent = '大吉'
    } else if (条件２) {
      btn.textContent = '中吉'
    } else if (条件３) {
      btn.textContent = '小吉'
    } else {
      btn.textContent = '凶'
    }
といったように書いてあげます。
22%の確率で大吉、8%の確率で中吉、13%の確率で小吉、それ以外の場合は凶と表示させるとしたら、
この条件２と条件３をどうすれば良いか考えてみましょう。

書けたら、コーチに見てもらいましょう。

最後に、他の運勢を追加したり確率を変えたりして、オリジナルのおみくじを完成させましょう。

体験会カリキュラムはこれで以上になります。

Web開発では、このような全体の見た目、スタイル、アニメーションなどを取り入れながら作っていきます。
体験会カリキュラムを通して、自分オリジナルのWebサイトのアイデアがふくらんだのではないでしょうか。

また、見た目だけでなく、サイトそのものの構造も自分で作って行くことになります。
詳しい内容はコーチに聞いてみてください。

iGarageでこれらをさらに深く学び、自分だけのWebサイトを作っていきましょう。

　 Tweet
Qiitaで続きを読む

投稿日：2020-03-30T01:15:02+09:00

そのjs、cssで代用できませんか？（件数通知バッジ編）

webアプリケーションエンジニアからフロントエンドエンジニアになって約一年やってきた中で、
どうしたらjsを書く量を減らせるか？みたいな状況を解決した時のtips

why 件数通知バッジ

皆さん通知バッジ作ってますか？僕は作りました。
脳筋コードで書いたら意外とめんどくさいんですよねあいつ。

数字が変わるとなると、疑似要素でやるのがめんどくさいので<span>とかで作りがち

0件になったら消さなきゃいけない

とかやってるとjsがとても汚くなって悲しくなったので、いい感じにcss交えて書くといい感じになったよっていうお話です。

コード

See the Pen 通知バッジ by さむとる (@sumtrue) on CodePen.

jsはdata-numを++/--するだけで済んでるので、とても綺麗で読みやすいコードになりました

tips

attr()

https://developer.mozilla.org/ja/docs/Web/CSS/attr
htmlに付与された属性を取得できる関数。
今回はこれを使うことでjsとhtmlの繋ぎこみをしている。

まだ使ったことはないが型指定とか代替値も指定できる便利屋さん。
要素によって少しだけ変わることがある、みたいなのを実現もできる。

属性セレクター

https://developer.mozilla.org/ja/docs/Web/CSS/Attribute_selectors
htmlに付与された属性でcssをあてることのできるセレクター。
今回は0件のときにバッジを非表示にする際に使用。

その他オススメの使い方としてはこれ。

Tip: highlight images missing alt text with img:not([alt]) pic.twitter.com/zgjdE5iTU6
— Addy Osmani (@addyosmani) February 2, 2020

img:not([alt])でaltが指定されていない画像を見つけられるというやつ
この記事を書いた理由的な

「ぶっちゃけjs書けばなんでもできるじゃん」論者だったんですが、CSS組み合わせることでコードの可読性がめっちゃあがります。
「普段あまりcssはほとんど書かないけどjsは時々書く」「jsは基本書かないけどcssは結構書くよ」みたいな人たちに、
それぞれで何ができるかを知ってもらい、世の中のコードが綺麗になったらいいなと思った次第。

　 Tweet
Qiitaで続きを読む

20200330のCSSに関する記事は13件です。

修正しやすいCSSプリプロセッサの書き方を考える

&を使ってのネスト

extend

※プレースホルダーセレクタの書き方

演算

【0円ipadプログラミングの限界に挑む】iPad mini 5だけで本格的なweb開発出来るのかやってみたwwwww

チョット何言ってるの？？

7.9インチのipadで

検証

1 用意するもの

2 githubにてRepositoryを作成する

3 working copyをインストール～Repositoryの入手（？）

4 いよいよweb開発

！！！！！？！？！？？？！？

キタああああああああああああああああんあんあんあんｱ”ﾝｯ！！！！！！！

jqueryは動くのか！？

5 githubで色んな動作する

commitしてみる

pushしてみる

うっそだろおおおおおおおおお

pullもいけるやろ！

pushしてみる（2回目）

検証結果及び感想

コードの写経したけど、動かない件

コードの写経したけど、動かねぇ...

diffコマンドの使い方

コマンドの返りの意味

【Vue + vue-mq】レスポンシブ対応でのVue実装について

目次

レスポンシブ対応での課題

レスポンシブ対応での課題解決方法

vue-mqとは

vue-mqの実装方法

1.Installation

2.ファイル作成

3.vue-mq.jsにブレイクポイントを記載

4.nuxt.config.ts(nuxt.config.js)にのplugins内にvue-mqを登録

5.vue側での実装

vue-mqでのデメリット

vue-mqのSEO要件が満たされない可能性とは

vue-mq実装時の動き

SCSS記法まとめ

子孫セレクタのネスト

子セレクタ、隣接セレクタのネスト

疑似クラス、疑似要素のネスト

プロパティのネスト

メディアクエリのネスト

変数

演算

関数

lighten、darken

round

コンポーネント

継承

まとめ

SCSSの環境構築方法いろいろ

SCSSとは?

コンパイルの方法

①専用のサイトを使用する方法

②Rubyを使う方法

GUIソフトを使用する方法

Prepros

Koala

VSCodeを使用する方法

まとめ

なるほどメモ_1

ひとつの親要素の中で子要素をそれぞれ左寄せと右寄せにするには...

太字じゃなくするのは

行の高さを指定するのは

スクロールしても固定させるのは

固定部分と画像が重なるときは、

背景画像を指定するのは

背景画像を領域いっぱいに広げるのは

liの中にaタグ使ってるときのテキストスタイルを変更するときはaタグに対して指定する

Power Apps Component FrameworkでGitHubAPIを使ったコントロールを作成する

Power Apps Component Framework でコントロールを作成する

Power Apps Component Frameworkとは

環境構築

component framework プロジェクト作成

5　githubで色んな動作する