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 すべてのプロパティを初期値へ

今日は以上です。

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