100日チャレンジの216日目

twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。
すでに100日超えましたが、継続。

100日チャレンジは、ぱぺまぺの中ではプログラミングに限らず継続学習のために使っています。

216日目は

おはようございます
216日目

架空のwebサイトコーディング

wifiの調子がわるくて、調整に手間取ってたら勉強時間少なくなった#100DaysOfCode #駆け出しエンジニアと繋がりたい #早起きチャレンジ

— ぱぺまぺ@webエンジニアを目指したい社畜 (@yudapinokio) January 20, 2020

毎回ほんとに忘れるので、備忘録。

これが　　　　　　　　こうなる
　　→　　

そんな時は、

style.css

button {
  outline: 0;
}

とすると、枠線が出なくなる。

これだけなのに、毎回忘れる。。

完成形を確認

クリックボタンを押したらボタンがへこむアニメーションをつくりましょう

上のアニメーションのようなものを完成させましょう！
とても簡単にできます
・・・が、そのまえに active の説明

:active

要素がクリックされているあいだだけ CSS が適用される

セレクタ:active {
  プロパティ: 値;
}

書き方は hover と似ていますね

例.html

<p>You！押しちゃいな</p>

例.css

p:active {
  background-color: red;
}

こんな感じでクリックすると背景が赤くなります
これを踏まえてアニメーションを作成していきましょう！

アニメーション作成

このアニメーションを作ろうとしたときどのようにプログラムは動いているのだろうか

ポイント
　 クリックするとアニメーションが動いている
　 クリックすると影がなくなっている
　 クリックすると赤いボタン部分が下に移動している
この３点を目安に作成していこう

まずはHTML

ボタンつくるで.html

<p>You！押しちゃいな</p>

これはもう簡単
これでできあがり

ではお次はCSS

ボタンつくるで.css

p {
  background-color: red;
  box-shadow: 0px 10px #bfbfbf;
  width: 150px;
  text-align: center;
}

ボタンの色を赤にして
ボタンの下に10pxのグレーの影をつくって
幅は150pxくらいでいいかな・・・
見栄え良く文字は中央揃え

はい！とりあえずボタンは完成
ここからアニメーションをつけていこう

クリックするとアニメーションが動いているので・・・

ボタンつくるで.css

p:active {

}

まずは1点目のポイントの

クリックするとアニメーションが動いている

ということなので active を設定。

active を設定しただけなので中身はカラ。
ここになにを入れていくかというと
2点目のポイントの

クリックすると影がなくなっている

という部分。
さっそく入力してみよう

ボタンつくるで.css

p:active {
  box-shadow: none;
}

影なくなりました！
影をなくしたいときは box-shadow: none; にすれば影は消えてくれます

さて、影は消えてくれたけどまだボタンらしくない。。
これではただ影が消えただけ。
どうするのかといえば、3点目の

クリックすると赤いボタン部分が下に移動している

を設定すればアニメーションは完成です

p:active にさらにCSSを追加します

ボタンつくるで.css

p:active {
  box-shadow: none;
  position: relative;
  top: 10px;
}

position: relative; は 【CSS】position: absolute; と position: relative; でまとめたときに基準位置を決めることで使用しました。
でも要素の位置を変更するという使い方もできます

今回は 10px の影がなくなった分だけ下にずらしたいため
position: relative;
top: 10px;
とします。

ではアニメーションを見てみましょう

ボタンを押すことができました

おまけ

さっきのコードを踏まえたうえで、よりボタンぽいものを作成しました。
コードは下記となります。

ボタンらしいボタン.html

<p>click!</p>

ボタンらしいボタン.css

p {
  background-color: #1e90ff;
  box-shadow: 0px 3px #000080;
  width: 100px;
  text-align: center;
  cursor: pointer;
  color: white;
  font-size: 20px;
  line-height: 30px;
  border-radius: 50px;
}

p:active {
  box-shadow: none;
  position: relative;
  top: 3px;
}

cursor

要素にカーソルが乗ったときにカーソルの形を変える

なにも指定しないと赤い四角にカーソルをのせても何の変化もありません。

cursor: text;

テキスト編集カーソルになる

CSS.

cursor: text;

テキストを入力するときに変化するローマ字の I のカーソルに変更になりました

cursor: pointer;

リンクカーソルになる

CSS.

cursor: pointer;

リンクボタンを押す時の指ボタンに変更になりました
ちなみに＜a＞タグはこの cursor: pointer; が初期設定されています

cursor: default;

標準のカーソルになる

CSS.

cursor: default;

初期設定されているカーソルです

表示させる部分にはクラスに'fr-view fr-element'を付ける

froalaエディタは、とても高機能のエディタである。

ブログアプリで使用するとき、form画面ではとくに問題ないが、その内容を表示させるときに思うように表示されないときがある。
それは、form画面ではデフォルトで

<div class="fr-view fr-element">

で囲まれているが、表示させるときはない。
画像の左寄せ、中央寄せ、右寄せの機能がうまく表示されないのはこのせいである。
なので表示させたいページで同じようにdivで囲めばよい。

box-shadow

ボックスに影をつける

名前通りでなんておぼえやすい・・・

box-shadow: 水平方向 垂直方向 色;

厳密に言えばどこを基準にするかで水平方向も垂直方向も変わってくるのでしょうが、現段階では

水平方向→横方向
垂直方向→縦方向

でいいかと思います

横にのみ影CSS.

  box-shadow: 10px 0px #dfdfdf;

影を横方向に 10px だけ出す設定です。
影の色はグレーです。

縦にのみ影CSS.

  box-shadow: 0px 10px #dfdfdf;

影を縦方向に 10px だけ出す設定です。
では組み合わせると・・・

縦＋横に影CSS.

  box-shadow: 10px 10px #dfdfdf;

影っぽくなりました

dovtoolsを開いてRenderingを選択

prefers-color-scheme で設定

この設定を切り替えれば表示確認ができる

参考

• https://stackoverflow.com/questions/57606960/how-can-i-emulate-prefers-color-scheme-media-query-in-chrome

やりたい事

• リンクを:hoverした際に上にテキストを表示させる。
• テキストの文字数が変わっても崩れない。

  See the Pen LYEXedW by KARIN (@kkkarin) on CodePen.

参考：意外と知らないvisibilityの活用方法！

補足

content(擬似要素)にテキストを入れる場合の注意

デメリットとしては、SEO的な側面になりますが、疑似要素に指定された文言はテキストとしてみなされないという点です。

googleのクローラーはHTMLのコードを解析し、テキストに何が書かれているか把握しています。

CSSの疑似要素で文字を追加しても、その部分はテキストとしてみなされません。大切なことは疑似要素ではなく、HTML内に記述するようにしましょう。

引用元：CSSの疑似要素の使い方！ befor・after をマスターしよう