20210109のCSSに関する記事は3件です。

【初心者でもわかる】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>

結果
sample.gif

このようにボタンの上にカーソルが乗った時に色が変わります。

文字色も変えたい!複数処理をするときはセミコロン(;)で繋ぐ。

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>

結果
sample02.gif

また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>

同じ結果になりました。
sample02.gif

まとめ

htmlだけやjsを使って:hoverの代わりの処理を入れることはできますが、可能なのであればやはりCSSファイルでちゃんと:hoverとかける方が作りやすいし管理もしやすいですね。
でもどうしてもhtmlのタグしかかけないときに使える技です!

困ったときに使えるTipsでした。

参考:https://teratail.com/questions/151338

おそまつ!

~ Qiitaで毎日投稿中!! ~
【初心者向け】WEB制作のちょいテク詰め合わせ

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

nuxtアプリをスマホで開いたときに出る謎の余白を消したい

はじめに

どうもこんにちは高専の冬休みが終わりを迎えそうでかなり悲しい気持ちになっているげんしです。
いつになったら僕は課題に手を付けるんでしょうか?
非常に楽しみですね。

何が起こった?

前のポートフォリオがかなりダサかったので久々に作り直していて「あとはスマホ対応だ」という時にchrome dev toolでiphone Xでのページの挙動をみてみると、、
image.png
このように謎の余白が生まれていました。
絶対にここに余白ができるように書いていないのに余白ができているのですこし調べ倒してみました。
すると chromeだとbody要素に強制的にmargin 8pxが入ってしまうらしくこれが原因だということが分かりました。

調べてみると

body {
    margin: 0px;
}

というふうにすれば余白が消えるとあったので

nuxt.config.js
export default {
  css: [
    '../assets/main.css',
  ],
}

外部ファイル,main.cssを追加し試してみたところうまく消えてくれませんでした。

解決方法

上の様にnuxt.config.jsで外部ファイルを読み込めるようにしたあとに

main.css
body {
  overflow: hidden;
}

というように収まっていない部分をoverflow: hidden;で非表示にすることで解決しました。

まとめ

恥ずかしながらこの余白が消せないで1時間ほど溶かしてしまったので、この記事が僕と同じところで詰まっていしまっている人の助けになってくれると嬉しいです。

参考文献

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

CSSが理解できなかった私の奮闘記

Progate>youtubeなどの動画教材を見ながら模写コーディングは何度かやったものの、自分がデザインしたポートフォリオのサイトが欠片にできない!置きたいところに要素を配置できない!という壁にぶち当たりました。

コミュニティの先輩方からアドバイスを頂きながら、実行したことを記録したいと思います。

大前提

・自分で調べるの大事。すぐに理解して覚えられなくてもいいから知識を拾い集めていく感じで。
・デベロッパーツールを駆使して、いいなと思ったサイトの中身を見ること。大量のコードにビビらない。

フレックスボックスの概念が理解できずに、要素を置きたいところに置けない人向けの学習マップ

フレックスボックスの概念が学べるカエルゲーム

align-itemsやjustify-contentなどを使って、カエルをハスの上に移動させていくというシンプルなゲームです。
後半に続くにつれ難易度が上がって行きますが、小一時間で終わるので、さくっと学習できます。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む