単位の重要性について(px,%,em,rem,vw,vh…)

単位の重要性については、最近作品を作り始めて、重要性に気づきました。

これまでは、px,%を多用していましたが、vw,vhを使った方が良い場合が多いですね。

px:10pxだと、画面が小さくなろうと指定した10pxのままです。

%:親要素の値によって変わります。
  例:body{font-size: 20px;} p{font-size: 80%;}
  この時のp要素のfont-sizeは、16pxになります。

em:これも%と同様に、親要素の値によって変わります。

rem(root em):ルート要素のフォントサイズによって値が変わります。
       ルートとは、最上層に位置する(htmlタグ)のことです。
       つまり、<html></html>のことです。
       remのいいところは、親要素によって値を一つずつ変えなくていい点です!!

vw(viewport width):これは、viewport(表示領域)の幅に合わせて自動で指定してくれます。
          vwのいいところは、レスポンシブなどのPC、スマホ、タブレットなどで画面いっぱいに表示したい時など、に100vwとすると、どのデバイスでも画面いっぱいに表示することができます。
vh(viewport height):上記のvwの高さバージョンです。使い道としては、画像を中央に正確に配置したい時に、要素の高さが分かっていれば、marginプロパティでtopとbottomの値を[(100 – height)/2]vhに設定するだけで表示できます。
さらに、1カラムで表示したい時にも、100vhで簡単に指定できます。

なぜ、vw,vhを進めるのか、これには、理由があります。最近は、スマホでWEBページを見るユーザーが多くなりました。
つまり、WEBページを作る側もそれに合わせる必要が出てきました。
いわゆる…レスポンシブデザインですね!!
モバイルファーストと言うこともありますしね!!

さらに、これを後押ししているのが、googleがデザインパターンとして、レスポンシブデザインを進めているところもあります。

リファレンス:https://yattokoo.com/css-tani#4

もりけん塾
もりけん先生ブログ

background-sizeについて

background-sizeは要素の背景画像の大きさを設定します。

一つずつ見ていきます。

値としては、
contain:画像を切り取ったり縦横比を崩したりすることなく、画像ができるだけ大きくなるよう拡大縮小します。

cover:画像の縦横比を崩すことなく、画像ができるだけ大きくなるよう拡大縮小します。画像の縦横比が要素と異なる場合、空き領域が残らないように上下または左右のどちらかを切り取ります。

auto:縦横比が維持されるように、適切な方向に背景画像を拡大縮小します。

たったこれだけのことですが、背景画像を入れる時には、大きめの画像を用意して、containを指定するときれいに表示されます。

ここでは、取り上げていませんが、backgroundプロパティには、グラデーションをつけることができます。(background: radial-gradient)これらを使うとさらに、きれいに画像をいじれます笑

css3は、photoshop,illustratorもいらないかも!?(そこまでではないですが…)

もりけん塾
もりけん先生ブログ

cssフォントサイズの指定の違いについて

cssのフォントサイズの設定で使う物は、大きく分けて2つです。
1、絶対値:10pxと決めれば10pxになります。
2、相対値:親要素のサイズによって変わります。

1、絶対値:px
2、相対値:%,em,rem,

1、のpxについてです。
これは、親要素などに関係なく指定した要素の文字サイズを変化させます。

2、相対値
・%:親要素のfont-sizeを基準にフォントサイズを変更します。
例:css

html {
  font-size: 32px;
}

h1 {
  font-size: 2em; /* -> 64px; */
}

span {
  font-size: 0.5em; /* -> 32px; */
}

・em:これも同様に親要素などに関係なく指定した要素の文字サイズを変化させます。
例:css

html {
  font-size: 32px;
}

h1 {
  font-size: 200%; /* -> 64px; */
}

span {
  font-size: 50%; /* -> 32px; */
}

・rem(root em):文章のルート要素、つまり、html要素のfont-sizeを基準にします。
例:css

html {
  font-size: 32px;
}

h1 {
  font-size: 2rem; /* -> 64px; */
}

span {
  font-size: 0.5rem; /* -> 16px; */
}

pxだとなぜいけないのか…
ブラウザによって表示方法が変わるからです。
これは、fontのデザインにも当てはまりますよね。それを防ぐのによく使われるのは、google fontですよね。

もりけん塾
もりけん先生ブログ

cssで要素を中央に配置する方法

cssを使って、画像を中央に配置したいときどうしますか?
今回は、それをいくつか紹介します。

早速行ってみます。

1、text-align: center;を使う(※インライン要素のみ)
2、margin: auto;を使う(※ブロック要素のみ)
3、img要素は、インライン要素なので、1、2を踏まえると、display: block;を使ってブロック要素にしてしまう。
4、display: flex;を用いる方法

まだ、いくつかありますが、よく使いそうなものをピックアップしました。

1、2、3、はそのままです笑

4、については、少し説明します。

HTML
<div class=”flex-Box”>
 <div class=”flex-Img”>
  <img src=”./img/hoge.jpg” />
 </div>
</div>

css
.flex-Box {
 display:flex
 justify-content: center;(boxを左端から右端へのレイアウト位置)
 justify-items: center;(boxを上から下へのレイアウト位置)
}

ちなみに、ベンダープレフィックスです(まだcssで試験的運用なcssプロパティということです。)

リファレンス:https://webkcampus.com/201501/949/

もりけん塾
もりけん先生ブログ

background-imageで画像をぼかさずフルサイズにする方法

background-imageで画像をぼかさずにフルサイズで表示する方法。

HTML
<div class=”img”>
 <img src=./img/a.jpg alt=”” width=”” height=”” />
 <img src=./img/a.jpg alt=”” width=”” height=”” />
 <img src=./img/a.jpg alt=”” width=”” height=”” />
</div>

css
img {
height: 100vh;
width:auto;
background-size: auto 100%;
background-position: center;
background-repeat: no-repeat;
}

こんな感じです。
順番にみていくと、

1,height: 100vh
viewport heightと言って、1%=1vhです。
じゃあ、%使えばよくね?と思われるかもしれませんが…
簡単に言うと、子要素の%は、親要素の%に左右されます。

一方、viewport単位は、viewportの寸法を基準としているため、要素の幅、高さ、サイズをviewportに合わせて設定しなければならない状況でとても便利です。

2,width:auto;
セクションの横幅の指定です。他の要素の指定を基に自動算出させるためautoを指定します。

3,背景画像のサイズを指定しています。
autoは横幅を、100%は高さの指定になります。ここでは単位が%であるところに注意です。

4,background-position: center;
これは、要素いっぱいに画像を広げた際に、画像を中央に寄せる指定です。

5、background-repeat: no-repeat;
ただ単に、画像を繰り返すかどうかの設定です。
これは、背景画像を繰り返して使うときには、よく使います。

リファレンス:https://natsukimemo.com/css-fullscreen

もりけん塾
もりけん先生ブログ

クラス名,id名 命名について

HTML,cssで作品を作っていて思ったのが、意外と、クラス名、id名についての設定で時間をとることが、多くなりました。

ブロックなど親要素で使えそうなclass名

  • container : コンテナ
  • main : メイン
  • global : グローバル
  • home : ホーム
  • hero : でかいブロック。bootstrapのサンプルにある
  • inner : 中味。
  • outer : 囲っているもの。親。wrapperと同じ。
  • wrapper : 囲っているもの。親。

ブロックや子要素で使えそうなclass名

  • articles : 記事の一覧
  • comments : コメント一覧
  • contents : contentを複数囲むなら
  • users : ユーザーの一覧

フォーム要素で使えそうなclass名

  • form form要素関連
  • field input要素関連
  • radio radiobox要素関連
  • checkbox checkbox要素関連
  • submit 送信

基本的には日本語を英語に直せばいいようですが…笑

実際に、クラス名、id名の命名について調べました。
リファレンス:HTMLとCSSクラスでよく使う命名について

こういうクラス名やid名をつけるのは、慣れと、実際に作られているホームページを見て、実際に真似することが、上達の鍵ですね!!

以上です。

もりけん塾
もりけん先生ブログ

CSS ~しまぶーのIT大学~で改めて勉強できたこと

しまぶーのIT大学はわかりやすいです。
ただ、完全な初心者向けとは言いづらいのかな?

自分としては、完全初心者向けの参考書で勉強してから見たら、「あぁ、なるほど」となります。

今回は、改めて理解したことを記事にします。

✅属性によるセレクターについて
HTML
<li><a href =…></a></li>

CSS
a[href=”urlなど”] {color:red}
href属性と持っているa要素にcolor redのスタイルを適応する。

a[href^ =”https://www.”]{color:red}
href属性を持っているhttps://www.から始まるもので一致するものにスタイル適応する。(前方一致)

a[href* =”yahoo”]{color:red}
href属性を持っているyahooを持つもののみ一致するものにスタイル適応する。(部分一致)

a[href$ =”.co.jp”]{color:red}
href属性を持っている最後が.co.jpのもののみスタイルを適応する。(後方一致)

✅疑似クラスおよび疑似要素によるセレクター
article p : first-of-type
pタグの最初の部分にスタイルを適応する。

ここで、first-of-typeとfirst-childの違い。
first-of-typeは、決めた要素のみの最初にする。
first-childは、最初の要素にするか

例HTML
<article>
    <h1>テキストです。</h1>
    <p> テキストテキストテキストテキストテキストテキスト </p>
    <p> テキストテキストテキストテキストテキストテキスト </p>
<p> テキストテキストテキストテキストテキストテキスト </p>
<p> テキストテキストテキストテキストテキストテキスト </p>
</article>

CSS
article p : first-of-type {
   font-weight:bold
}

結果
テキストです。
テキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキスト

ちなみに、last-of-typeとlast-childも同じです。

次は、nth-of-type()
()番目の要素にスタイルを適応する。

notを使えば、
例: article p:not(: nth-of-type;)
意味:first-of-type以外の(最初のp要素以外の)スタイルを適応する。

さらにさらに…
p:not(:hover) {
 back-ground-color:pink
}
とすると、p要素には、あらかじめ背景がピンクになり、カーソルをp要素に持っていくと背景のピンクが消えて、白の背景(デフォルトの色)になります。

::before
::after

p::first-line {
 color:red
}
とすると、p要素の最初の行にスタイリングをします。

p::first-letter {
 font-size:80px
}
とすると、最初の文字のみ文字の大きさを80pxにします。

✅あともう少し、結合子については
・子孫結合子
article p{}

・子結合
main > h1
意味:main直下のh1に適応

・隣接兄妹結合
article p:not(:first-of-type){…}
     ≒
article p + p {…}
意味:p要素の次のp要素に適応

よく使う使い方は、margin-top:40pxなど2番目の要素からmarginを空けたいときに使う。

・一般兄弟結合
article h1 ~ p{…}
h1より下のp要素に適応。

カスケードについて
カスケード:同じ宣言をしても後の宣言が優先的に適応される(あと勝ち)

!importantはあまり推奨されていない。

最後にinherit, initial, unsetについて
inheritは親要素から値を引き継ぐ
initialはブラウザが扱っている適応地を引き継ぐ
unset 親要素があればinheritを適応
initialがあればinitial

all: unset すべてのプロパティを初期値へ

今日は以上です。

もりけん塾
もりけん先生ブログ