【初心者向け】cssの効率良い勉強方法は?cssは書かなくても良いです

プログラミング

cssは覚えたけど、面倒くさい、、

もっと楽にWebデザインをしたい、、

こんな方に向けての記事です。

前回の記事で、クラスにcssを適用する方法をご紹介しました

【超基礎】CSSのクラスの書き方。クラスの概念を理解してレベルアップ
本記事では、クラスの概念クラスにCSSを適用させるブラウザ確認この辺に触れていきます。前回までは、HTMLタグにCSSを適用しました。今回は、指定クラスにCSSを適用していきます!index.htm...

これでWebサイトの好きな場所にcssを適用させる事ができました。

しかし、以下の問題があります。

  • いちいちクラスごとにcssを適用させるのが面倒
  • 自分では綺麗なデザイン、思い通りのデザインにできない

こんな感じで、デメリットがあります。

せっかくcssを覚えたのに、、うまく使えない、、

そこで、オススメするのが、Bootstrapです!

  • Bootstrapとは
  • Bootstrapの使い方
  • Bootstrapの凄さをブラウザで確認

そこら辺に触れていきます。ではいきましょうっ!

Bootstrapって何?

Bootstrap公式サイト

BootstrapはTwitter社が開発したCSSの「フレームワーク」です。

通常CSSを書く場合、全てのスタイルを自分で作っていく必要がありますが、このフレームワークにはよく使われるスタイルがあらかじめ定義してあるので、ルールに沿って利用するだけで整ったデザインのページを作成できます。

んーよく分からない!

簡単に言うとクラスを指定するだけで、デザインが整うということだよ。
Bootstrap側で既に良い感じのcssを書いてくれているからです!

それはすごいね!さっそく使ってみたい!でも難しそう、、

Bootstrapの使い方

使い方は超簡単です。以下のピンクで囲んだ部分を書くだけです。
めんどくさい方はコードコピーしてね

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">    
   <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

    
    <link rel="stylesheet" href="sample.css">
    <title>Document</title>
</head>
<body>
    <h1>イージーな人生を歩みたい!</h1>
     <p class="yamada">知識をつけて、楽に生きる</p>
     <p>何も捨てることが出来ないものは、何も変えることが出来ない</p>
     
       
     <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>

書いたよー!ピンクの部分は何をしているの?

これはBootstrapの『良い感じに書かれたcss』を読み込んでいます!

なるほど、、次はどうするの?

あとは、好きなHTML要素に特定のクラス名を追加すればおけです。実際にやってみましょう

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">    
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    
    <link rel="stylesheet" href="sample.css">
    <title>Document</title>
</head>
<body>
    <h1>イージーな人生を歩みたい!</h1>
     <p class="yamada">知識をつけて、楽に生きる</p>
     <p>何も捨てることが出来ないものは、何も変えることが出来ない</p>

     <p class="bg-success">イージー人生</p>
     <p class="bg-info">イージー人生</p>
     <p class="bg-warning">イージー人生</p>
     <p class="bg-danger">イージー人生</p>
     

     <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>

<p>にBootstrapで決められているクラスを指定します。すると、、

こんな感じで勝手にcssが適用されます!

すごい!これは楽だね!

Bootstrap側で、『このクラスを指定するとこのcssが適用される』ということが決まっています。

Bootstrapの使い方は、Bootstrapを読み込んで特定のクラス名をつけるだけ!

Bootstrapをより自由に使うために

今回は、Bootstrapで背景色を変えるクラス名を指定しました。これ以外にもクラス名を指定するだけでたくさんのことができます。

クラス名をつけるだけっていうのがすごく分かりやすいし、楽だね!

あとは、Bootstrapの指定クラスとcssの組み合わせを知るだけでBootstrapは上達し、素敵なWebデザインができます!

今回は、Bootstrapで簡単手軽にcssを指定する方法を解説してきました。

しかし、Bootstrapの凄さをまだ100分の1も説明できていません。これから解説記事を出していきます。

↓記事では、Bootstrapで一番大切な技術をお伝えします。

Bootstrap初心者がまず覚えるべきたった1つのこと。結論:グリッドシステム
前回記事でBootstrapの導入・使い方を説明しました。本記事では、Bootstrap学習でまず覚えるべき事レスポンシブデザイン画面確認この辺について触れていきます。Bootstrap学習...

書籍でまとまった知識を得たいなら以下の本がおすすめです!

Bootstrapを覚えて自由なデザインを作りましょう!では!

コメント