CSSの基本

CSSとはCascading Style Sheetの略で、Webサイトのデザインしたりするための言語です。
ここでは自分の備忘録のためにも、CSSの基本的で重要なものを取り扱っていこうと思います。

メディアクエリ

メディアクエリとは、cssの機能で、PCとスマホなど画面のサイズによって適用するデザインを変更できる機能です。
以下ではアクセスしてきたデバイスの画面の幅の大きさによって、適用するスタイルを変更する処理を定義しています。

主に以下のように2通りの指定方法があります。

• 1. 外部でcssファイルを作成して、linkで読みこむ場合、そのcssファイルはどの画面サイズの時に適用するかを指定する方法。
• 2. htmlファイル内のstyleタグで指定する場合

 

1. 外部でcssファイルを作成して、linkで読みこむ場合、そのcssファイルはどの画面サイズの時に適用するかを指定する方法。

/* 画面サイズが480pxまでこのファイルのスタイルが適用される。*/

/* 画面サイズ480pxから1024pxまではこのファイルのスタイルが適用される。 */

/* 画面サイズ1024px以上はこのファイルはスタイルが適用される */

 

2. htmlファイル内のstyleタグで指定する場合

    p {
        color:red;
    }
    
    @media screen and (min-width:480px) { 
           /*　画面サイズが480pxからはここを読み込む　*/
        p { color:#ededed;}
    }
    
    @media screen and (min-width:768px) and ( max-width:1024px) {
           /*　画面サイズが768pxから1024pxまではここを読み込む　*/
       p {}
    }
    
    @media screen and (min-width:1024px) {
           /*　画面サイズが1024pxからはここを読み込む　*/

    }


デバイスがPCでは表示させるけど、スマホでは表示させない方法
@media screen and (max-width:480px) { 
    /*　画面サイズが480pxからはここを読み込む　*/
    #sign {
        display: none;
    }
}

 

アニメーション

cssのアニメーションは以下の書き方でかける
@keyframes name{}では、アニメーションの開始時(0%)や真ん中(50%)、そして最後のアニメーション終了時(100%)など、それぞれの時点でのCSSを指定する
そしてそのアニメーションをする要素のidやclassをcssで指定し、nameで指定したアニメーションの名前をanimation-nameで指定することでkeyframeと紐づいて、
そのidやclassを持つ要素に対してkeyframeで指定したものが適用される

keyframe。
動画編集ソフトであるAdobe Creative CloudのAfter Effectでもアニメーションを使用できるが、ここでのアニメーションもkeyframeの考え方でできるので学んでおくといい！

 

スクロールしても画面にabsoluteで固定する

test

 

::hoverや::afterといった疑似要素

::after(このクラスのコードが読み込まれた後に実行する), ::before(このクラスのコードが読み込まれる前に実行)
::afterは該当のタグの最後にそのstyleを適用し、::beforeは該当のタグの最初にそのstyleを適用する
ただなかなかうまいところに配置できないので、position:absoluteで設定可能。そしてhtmlコードはどこにおいても問題ない。absoluteで画面上に配置するのでどこに書いても影響なし。

指定したクラス名を持つ要素上でhover(jqueryで言うblur)、つまりカーソルが当たるとどういったスタイルにするかを指定することができる
他にも、LVHA(:link, :visit, :hover, :active)がある

 

画像をリサイズする

画像が大きい、小さい場合、styleでpxを用いて大きさを調整することができる。しかし、縦横比率が合わないと画像が潰れてしまう。
自動的に元々の縦横比率を保ちつつ、画像の大きさを変更する(リサイズ)やり方は以下のようにCSSを指定する

 

!importnantを用いて適用の優先順位を変更する

通常、htmlとcssではスタイルの優先順位がある。
id属性が一番優先度高く、次にclass属性になる。
当然id属性は固有のもので、1つのタグに一意となるidを付与しなければいけないため、優先度が高くなる。それに対してclass属性は複数のタグに適用できるので優先度は劣る。
ただ開発をしているとこの優先度を無視して、とにかくこのcssを適用したい！などがある。
そういう場合に使用するのが、!importantである。

 

ボックスモデル(padding、margin)

 

ブートストラップで、buttonとtableをおしゃれにデザインする

レスポンシブデザイン。
通常PCでのwebページと、スマホでのwebページはスクリーンの大きさが違うので、
PCのwebページだとスマホでは崩れてしまったり、横スクロールになってページの最適化ができなかったりする。
ブートストラップはそのPCとスマホでの画面をきれいに表示してくれる機能が揃ったツールで、こういったデザインをレスポンシブデザインと言ったりします。

 

スクロールして、上に戻るボタンを表示する

よくスクロールをした際に、一番上に戻るボタンが右下とかに表示されるのをよく見かけると思います。
その実装ですが、
まずスクロールしても常に画面の右下にボタンを表示させるために、
absoluteを使って、固定します。そしてページの一番上にいるときはhideによって非表示にしておきます。
そしてスクロールして、150px動いたら表示するようにして、上に戻るボタンを使用できるようにしているのが以下のコードになります。

上に戻る