【ブログ一覧】 - ますみのブログ

ますみのブログ

パソコンとかプログラミングに関するあれこれ発信してます

CSSで使われる*って何?

こんにちは!エンジニアのますみです!本日はCSSで使われる*(アスタリスク)について解説します!目次 *(アスタリスク)はすべての要素に適用される *(アスタリスク)以外の特殊な書き方 HTMLタグで指定 :から始まるCSSセレクタ 属性による指定それではさっそく見ていきましょう*(アスタリスク)はすべての要素に適用されるH1タグH2タグParagraph(段落)こんな感じのHTMLがあるとします。div h1H1タグ/h1 h2H2タグ/h2 pParagraph(段落)/p/div*(アスタリスク)で要素を指定すると、すべての要素にスタイルが適用されます。では*(アスタリスク)を使ってCSSを書いてみましょう。H1タグH2タグParagraph(段落)CSS* { background-color: lightblue;}*(アスタリスク)を使い、背景色にlightblue(薄い青色)を指定しました。このようにすべてのタグにlightblue(薄い青色)が適用されましたね*(アスタリスク)以外の特殊なCSSの書き方ここでいう特殊なというのは、クラス名やid以外のことを指します。HTMLタグで指定H1タグH2タグParagraph(段落)CSSh1 { background-color: lightblue;}h1、h2、p、span等のHTMLタグで指定することもできます。ですが、HTMLタグを使ってCSSを書く方法は、管理が大変になってしまいがちなので注意が必要です。HTMLタグを使ってCSSを書く最も多いケースはbodyに対してスタイルを適用することです。body { margin: 0; padding: 0;}通常、Webブラウザーはデフォルトで body要素に余白やパディングなどのスタイルを設定しています。デフォルトのスタイルがページのスタイリングに影響を与えることがあるため、CSSで余白などをリセットする際に使われます。また、font-family等のウェブサイト全体で統一したいスタイルも、bodyタグでCSSを書くと良いでしょう。:から始まるCSSセレクタH1タグH2タグParagraph(段落)CSSh1:hover { background-color: lightblue;}:や::で始まるものは疑似クラスと呼ばれ、マウスホバー時や、インプットにフォーカスした時の状態を指定します。マウスホバー時のスタイルを定義できる:hoverの使い方はこちらの記事で解説しています。インプットにフォーカスした時のスタイルを定義できる:focusの使い方はこちらの記事で解説しています。属性による指定 HTMLdiv input type="text" input type="email"/divCSSinput[type="text"] { border: 1px solid lightgray; width: 100%; padding: 0.4rem 0.8rem; border-radius: 0.4rem; margin-bottom: 1rem;}このように、input要素でtypeがtextのもの、といった指定方法もあります。name属性で指定する場合はこんな感じで書くことができます。HTMLdiv input name="name" type="text" input name="email" type="email"/divCSSinput[name="name"] { border: 1px solid lightgray; width: 100%; padding: 0.4rem 0.8rem; border-radius: 0.4rem; margin-bottom: 1rem;}最後まで読んでいただきありがとうございます!質問や、こんなことを記事にしてほしい!というのがありましたらTwitterのコメント等で受け付けていますので、お気軽にどうぞ!ますみ - 愛知県在住の20代プログラマー - | @mashmy_98それでは次の投稿もお楽しみに!

2023年04月29日

Read More

【書けるからわかるCSS】deg、rad、turnとは?

こんにちは!エンジニアのますみです!本日はCSSの数値の単位deg、rad、turnについて解説します!聞きなれない単位ですね...何に使うのでしょうか?deg、rad、turnは回転の角度の単位deg、rad、turnはすべて回転の角度を表す単位です。transformのrotate等で使うことができます。それぞれ数値の意味合いが変わってくるので見ていきましょう。degの使い方BOX.box { transform : } degは最も簡単で、1degは円周の360分の1です。普段使う角度の単位と同じですね。数値を増やすと時計回りに要素が回転します。マイナスの値を指定すると反時計回りに回転します。radの使い方BOX.box { transform : } radはラジアンのことです。3.14が180度(180deg)、6.28が360度(360deg)です。動きが難しいのでサンプルは元の角度にオレンジの線、現在の角度に青い線を引きました。turnの使い方BOX.box { transform : } turnはさらに直感的で、1で一周といった意味になります。つまり半回転させたい場合は0.5turnとすればよいというわけですね最後まで読んでいただきありがとうございます!質問や、こんなことを記事にしてほしい!というのがありましたらTwitterのコメント等で受け付けていますので、お気軽にどうぞ!ますみ - 愛知県在住の20代プログラマー - | @mashmy_98それでは次の投稿もお楽しみに!

2023年04月29日

Read More

ますみ

愛知県在住の20代プログラマーです!

プログラミングと無縁の専門学校を卒業して働き出しましたが、コロナ禍でほぼ無職に...

無職時代に独学でプログラミングを勉強して、未経験からめでたくプログラマーとして採用していただけました。

このブログを見た方が、わたしが独学で勉強していた時期に悩んでいたことで悩まないように...そう願いながら情報を発信しています!

おすすめレンタルサーバー


当サイトはXserverを利用しています。 HTML、CSSで作成したホームページはもちろん、wordpress、Laravel等で作成した高度なアプリケーションも利用可能です!

ますみ

愛知県在住の20代プログラマーです!

プログラミングと無縁の専門学校を卒業して働き出しましたが、コロナ禍でほぼ無職に...

無職時代に独学でプログラミングを勉強して、未経験からめでたくプログラマーとして採用していただけました。

このブログを見た方が、わたしが独学で勉強していた時期に悩んでいたことで悩まないように...そう願いながら情報を発信しています!