- 投稿日:2021-01-09T20:28:52+09:00
【初心者でもわかる】hover時のCSSをhtmlのタグに直接書く方法
どうも7noteです。hover時にだけCSSを当てる方法。
CSSは.cssファイルに書くか、
<style></style>
の中に書くのが一般的ですが、HTMLのタグの中に書くことも可能です。index.html<!-- HTMLのタグに直接CSSを書く方法 --> <div style="background:#CCF;">てすとてすと</div>しかし、この方法には欠点があり:hoverなどの疑似セレクタがついた時のCSSを指定することができません。
(※ほかにも管理がしにくいなどの欠点もあります。)ですが、onMouseOutとonMouseOverの属性を使うことで:hoverと同じようにCSSを反映することができます!
hover時のCSSをhtmlのタグに直接書く方法
index.html<div style="background:#CCF;" onMouseOut="this.style.background='#CCF';" onMouseOver="this.style.background='#EEF'">てすとてすと</div>このようにボタンの上にカーソルが乗った時に色が変わります。
文字色も変えたい!複数処理をするときはセミコロン(;)で繋ぐ。
index.html<div style="background:#CCF;" onMouseOut="this.style.background='#CCF';this.style.color='#000';" onMouseOver="this.style.background='#EEF';this.style.color='#F00';">てすとてすと</div>またjavascriptで関数を動かすこともできるので以下のような書き方でも同じ処理をすることが可能です。
index.html<div id="hover-btn" style="background:#CCF;" onMouseOut="omOut();" onMouseOver="omOver();">てすとてすと</div> <script> function omOut(){ document.getElementById('hover-btn').style.background='#CCF'; document.getElementById('hover-btn').style.color='#000'; } function omOver(){ document.getElementById('hover-btn').style.background='#EEF'; document.getElementById('hover-btn').style.color='#F00'; } </script>まとめ
htmlだけやjsを使って:hoverの代わりの処理を入れることはできますが、可能なのであればやはりCSSファイルでちゃんと:hoverとかける方が作りやすいし管理もしやすいですね。
でもどうしてもhtmlのタグしかかけないときに使える技です!困ったときに使えるTipsでした。
参考:https://teratail.com/questions/151338
おそまつ!
~ Qiitaで毎日投稿中!! ~
【初心者向け】WEB制作のちょいテク詰め合わせ
- 投稿日:2021-01-09T17:16:44+09:00
nuxtアプリをスマホで開いたときに出る謎の余白を消したい
はじめに
どうもこんにちは高専の冬休みが終わりを迎えそうでかなり悲しい気持ちになっているげんしです。
いつになったら僕は課題に手を付けるんでしょうか?
非常に楽しみですね。何が起こった?
前のポートフォリオがかなりダサかったので久々に作り直していて「あとはスマホ対応だ」という時にchrome dev toolでiphone Xでのページの挙動をみてみると、、
このように謎の余白が生まれていました。
絶対にここに余白ができるように書いていないのに余白ができているのですこし調べ倒してみました。
するとchromeだとbody要素に強制的にmargin 8pxが入ってしまう
らしくこれが原因だということが分かりました。調べてみると
body { margin: 0px; }というふうにすれば余白が消えるとあったので
nuxt.config.jsexport default { css: [ '../assets/main.css', ], }外部ファイル,main.cssを追加し試してみたところうまく消えてくれませんでした。
解決方法
上の様にnuxt.config.jsで外部ファイルを読み込めるようにしたあとに
main.cssbody { overflow: hidden; }というように収まっていない部分をoverflow: hidden;で非表示にすることで解決しました。
まとめ
恥ずかしながらこの余白が消せないで1時間ほど溶かしてしまったので、この記事が僕と同じところで詰まっていしまっている人の助けになってくれると嬉しいです。
参考文献
- 投稿日:2021-01-09T11:55:39+09:00
CSSが理解できなかった私の奮闘記
Progate>youtubeなどの動画教材を見ながら模写コーディングは何度かやったものの、自分がデザインしたポートフォリオのサイトが欠片にできない!置きたいところに要素を配置できない!という壁にぶち当たりました。
コミュニティの先輩方からアドバイスを頂きながら、実行したことを記録したいと思います。
大前提
・自分で調べるの大事。すぐに理解して覚えられなくてもいいから知識を拾い集めていく感じで。
・デベロッパーツールを駆使して、いいなと思ったサイトの中身を見ること。大量のコードにビビらない。フレックスボックスの概念が理解できずに、要素を置きたいところに置けない人向けの学習マップ
①フレックスボックスの概念が学べるカエルゲーム
align-itemsやjustify-contentなどを使って、カエルをハスの上に移動させていくというシンプルなゲームです。
後半に続くにつれ難易度が上がって行きますが、小一時間で終わるので、さくっと学習できます。