Animationを使ってbuttonにアニメーションをつけてみる 目標：Animationと@keyframesの基礎を理解するため テキストエディターはVSCode. ↓下記の方のtransitionの説明を参考にしました @7968様 とても解りやすかったです！！ 　　　 今回はcodePenで書いてみました♪ ※head部分は省略 See the Pen oNZvJQG by トモゑ☛Web作成の37? (@swan2pink) on CodePen. 詳しくcodeを書いてみます .button { color: white; width: 200px; height: 80px; background-color: pink; font-size: 30px; border-radius: 5px/5px; text-align: center; line-height: 80px; box-shadow: 5px 5px 5px black; } .button:hover { animation-name: buttons; ※ animation-duration: 1s;　※　 animation-iteration-count: 3;　※ } @keyframes buttons { 0%{ width: 200px; } 100%{ width: 20%; background-color: blue; } } Animation と@keyframes を使ってアニメーションしてみました また、カーソルを hoverした時にアニメーションしてほしかったので、 hoverに animation設定をしました。 animation-iteration-count: 3 カウントを３回にしましたが無限に繰り返したい時は、３をinfinite　に変更してあげます まとめ 今回は、Animation と@keyframes の基本について書いてみました。 引き続き応用にもチャレンジしていきたいと思います 今回は以上です！ ありがとうございます

要素を中央に持ってくるやり方を毎回忘れるのでまとめてみました。 他にもやり方があるかもしれませんので、気づいた方おりましたら コメント頂けますと幸いです。 ①文字列の高さを中央にする index.html <style> .container { height: 100px; position: relative; box-sizing: border-box; border: 5px solid #76d3f4; box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.25); margin: 20px 0px; } .char_heigth-center { /*文字要素の高さを整える*/ line-height: 100px; } </style> <div class="container"> <p class="char_heigth-center">文字の高さを中央に</p> </div> 結果 ②文字の横幅を中央にする text-align:center;でも可能だが、改行して複数行になると 両方中央寄せになるのうで使い分けが必要 index.html <style> .container { ・・・ } .char_width-center { display: flex; justify-content: center; } </style> <div class="container"> <p class="char_width-center">文字の横の配置を中央に</p> </div> 結果 ③連続した文字要素を中央に配置（縦と横を中央に） index.html <style> .container { ・・・ } .char_heigth-center { line-height: 100px; } .char_width-center { display: flex; justify-content: center; } .disflex { display: flex; } .items { margin-right: 10px; } </style> <div class="container"> <div class="disflex char_heigth-center char_width-center"> <p class="items">文字列1</p> <p class="items">文字列2</p> <p class="items">文字列3</p> </div> </div> 結果 ④文字列以外の配置を中央にする 画像のように中の文字列は中央に配置されないので注意 index.html <style> .container { ・・・ } .element-center { width: 60%; height: 60%; margin: auto; position: absolute; top: 0; bottom: 0; left: 0; right: 0; border: 5px solid #ff0000; box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.25); } </style> <div class="container"> <div class="element-center">テスト</div> </div> 追記：以下の構文でも可能みたいです。 .element-center　{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } 　　または親要素に .element-align { display: flex; justify-content: center; align-items: center; } 　※position は要素ごとにを中央配置できるが、 　　flexは親要素の中身全てが中央配置になるため、使い分けは必要です。 追記２：右下に配置する場合は以下のようにする .element-right-bottom{ position: absolute; right: 0; bottom: 0; } 結果

急な事態ですね コロナなどいろいろと急な事態なので、HTML、CSS等を学んでいきましょう。Qitaの投稿の練習も兼ねています。 開発環境の準備 まず、開発環境を準備します。実際の運用については次号で。 ダウンロード（1） 今回は簡単な内容ですのでテキストエディタでも充分なのですが、今回はVisual Studio CODEを利用します。普段使用しているVisual Studioとはちょっと違いますのでご注意ください。 上記リンク先よOSに応じたソフトをダウンロードし、インストールなどしてください。 ソフトの起動と日本語化 Visual Studio CODEを起動します。 おっと、英語メニューですね。 ここで逃げ出したい気持ちはよく分かるのですが、Visual Studio CODEはちょっとひと手間加えると日本語化できるらしいっす。 Visual Studio CODEの日本語化 アプリケーションウィンドウの右下、歯車のアイコンをクリックします。 その中にExtensions（機能拡張の意味）が表示されるのでクリックします 左上にExtensionの検索フィールドが出ますのでlanguageと入力してください Japanese Language Packが候補に出てきますので、そこのInstallボタンを押します Restart（再起動）するか右下のウィンドウで聞いてきますので、Restartをクリックします。 ソフトが再起動され、日本語化されました ダウンロード（2） XAMPPの準備 実行環境用として、XAMPPをダウンロード＆インストールします。 XAMPPは車校みたいなもの 車校（東海地区では自動車学校のことをこう呼ぶ）では、まず敷地内で運転の練習をしてから路上教習に出ますよね。XAMPPはその車校みたいなもんです。 いきなりサイトを公開するんじゃなくてXAMPPの中でテストしてから本番サーバで公開という流れをとったりします。なので、XAMPPはみなさんのパソコンの中（ローカル）にサーバを作ってテストする環境を作るツールです。（ローカルサーバって言ったりします） XAMPPダウンロード＆インストール Windows環境が無いので、こちらを参考にインストールしてください。（外部サイトが立ち上がります） 余談 余談ですけどHTML、CSS、JavasScriptのテストであればXAMPPは無くてもいいかもしれません。パソコン内のブラウザ（Chromeとか）でテストできます。 XAMPPを入れるのは、サーバが必用なPHPやSQLをいじってみたいからですね。ゲームのスコアのとか、ランキングとか記録してみたいですよね。 ここまでインストールしたら、次のステップにすすみます。

どうも7noteです。Twitterのログイン画面(PCブラウザ)がホラーで話題なので、バグでなくデザインであることを調査してみた。 結論から話しますと、 「バグではありません。そういうデザインみたいです。」 バグなのか？と話題になっている情報のまとめサイト↓ なんの事？という方もおられると思うので、ツイッターのログイン画面（PC ブラウザ）をおみせしますね。 以下のリンクからも確認することができます。（ログアウトがめんどくさい方はシークレットモードでみれますよ。） （Twitterのログイン画面の画像↓） PCのブラウザからtwitterにログインしようとするとこの画面がでてきます。正直、 「えっ、バグ？」 「偽サイト？」 「なんかまずいことした？」 って私も最初は思ってしまいました。 偽サイトでない理由 ドメインをみていただければわかると思いますが、ちゃんと【twitter.com】になっているので、公式サイトにアクセスしていることがわかります。 もし偽サイトであれば、たとえば「https://twitter.xxx.ga/」（適当）など若干の不自然感がある場合が多いです。 ただ巧妙に作られていることが多いのでなかなかわかりにくいのが現状だと思います。.comや.jpは誰でも利用できますし、SSL化している詐欺サイトなんかもあるので一概に安全といいきるにはなかなか難しいかもしれません。 バグではない理由 では実際に調査した様子を掲載しますね。 これはGoogleChromeの検証ツールというもので、これを使って調査していきます。 簡単に言えばwebサイトの構造を表示して調査したり検証したりすすのに使うものです。 これを使って、背景のバグっているように見えるところにフォーカスしていくと1つの画像を発見しました。 ここに以下のような記述があります。 <div class="css-1dbjc4n r-1niwhzg r-vvn4in r-u6sd8q r-4gszlv r-1p0dtai r-1pi2tsx r-1d2f490 r-u8s1d r-zchlnj r-ipm5af r-13qz1uu r-1wyyakw" style="background-image: url(&quot;https://abs.twimg.com/sticky/illustrations/lohp_1302x955.png&quot;);"></div> imgタグをつかっている箇所もありますが、実際に表示されているのはその上にあるこのdiv要素です。 ここに「background-image:ほげほげ〜」と書かれているURLがあるのですが、これがバグっているように見える画像を表示するコードです。 表示されている画像だけを別タブで開いて確認できます。（※クリックしても安全です） https://abs.twimg.com/sticky/illustrations/lohp_1302x955.png （Twitterのログイン画面に使われている画像↓） このdiv要素を検証ツール上で消すと、とてもシンプルな背景に戻りました。 このソースがあのバグったように見える背景を表示しているのは間違いなさそうですね。 まとめ << 結論 >> 「バグではなくそういうデザイン。偽サイトでもない。ただ画像を表示しているだけ。」 なんでTwitterがあんなにホラーなデザインを採用しているのかは不明ですが、困惑しているユーザーが多いのは間違いなさそうですね。 セキュリティ周りに関してはあまり深い知識をもっていないので、偽サイトの見分け方などはネットにある情報から参考にまとめて書いているだけですのでご了承ください。 興味本位で調査してみましたがdivとimgの両方で画像情報をもっているのは不思議ですね。 divのbackgroundで指定しているのであれば、すぐ下のimg要素は必要ないのでは？と思うのですが、なんで設置しているのかなどまた違った部分に興味がわいてきました。 普段はHTMLやCSSをはじめとしたweb周りの情報発信をしています。 よければご覧ください。 おそまつ！ ~ Qiitaで毎日投稿中!! ~ 【初心者向け】WEB制作のちょいテク詰め合わせ

■　line - height とは 行の高さを指定するプロパティを指します。 簡単に説明をすると文字の大きさは変わりません。　ですが、ノートで言うA行のノートからB行のノートに変わったと思ってもらえればいいと思います。 こちらがイメージ図です⬇️ ■　記述の仕方 line-height: 20px, ■　おまけ 上下中央揃えにしたいときは line-height を使う事もできます！ 投稿は以上です！