気ままに趣味旅行

面白いコト「拡がる/拡げる」

【初心者向け】HTML/CSS中級4

どうもhiroakiです。

 

今回は前回に続き、ウェブページを作るうえで大切な、HTML言語とCSS言語の中級編についてまとめていきます。説明の部分が多くなりますが、実際にコードを打ちながら試すことが大切です。

hiroakies.hatenablog.com

で、前回までに色々とまとめていってるわけですが、何をどう紹介しようか迷ってきました。もしいいアイデアがあれば教えてくださるとうれしいです(笑)

 

Lesson13
  1. .back-image{ background-image: url(画像のURL);
  2.     background-size: cover;
  3.     width: 300px;
  4.     margin: 0 auto;}

背景画像を指定するには「background-image: url(画像のURL);」を使います。指定された画像は表示範囲を埋め尽くすまで、何度も繰り返し表示されるので、「background-size: cover;」を指定して、「1枚の画像で表示範囲を埋め尽くす」ように画像の大きさを変えます。

marginにautoを指定するときは、必ずwidthを併せて指定します。しかし、上下marginにはautoを指定できません。

また、広い範囲を囲うようなブロック要素の場合は「セレクタ{margin:0 auto;}」を使い、テキストやボタンのようなインライン・インラインブロック要素の場合は「セレクタ{text-align:center;}」を使うようにしましょう。

 

Lesson14 
  1. a { letter-spacng: 0.3em;
  2.     display:inline-block;}

letter-spacingでは文字の間隔を指定することができます。指定できる値は「normal」や「(数字)+単位」です。

<a>タグのようなインライン要素には「widthやheightが指定できない」「padding、marginの上下を指定できない(横は指定できます)」などの特性があります。displayプロパティでは、これらをblock要素やinline-block要素、inline要素に変更することができます。ブロックやインラインブロック要素に変えることで、widthやheightを指定できるようになります。埋め込みのボタンなどを作る際に便利なのでおすすめです。

hiroakies.hatenablog.com

 

Lesson15

半角スペースで区切れば、複数のクラス名を指定できます。 こうすることで共通部分(btn)に共通してCSSを指定できます。classが複数になってくるとまとめて指定できるので便利です。

ボディ(HTML):

  1.   <div class="btn-wrapper">
  2. <a class="btn sign-up">新規登録はこちら</a>
  3. <a class="btn">or sign up with</a>
  4. <a class="btn facebook">Facebookに登録</a>
  5. <a class="btn twitter">Twitterに登録</a>
  6. </div>

CSS:

  1. .btn{ color:white;
        display:inline-block;}
  2. .sign-up{background-color:#ddd;}
    .facebook{background-color:#3b5998;
        border-radius:5px;}

角を丸めるにはborder-radiusプロパティを用います。
数字が大きいほど角が丸くなります。例えば5pxなら、角の5px*5pxの部分に曲線ができます。

 
Lesson16

opacityは要素の中身全てを透明にします。値には0.0(完全に透明)~1.0(完全に不透明)を指定できます。そのため背景色のみを透明にするには、rgbaを使います。

CSS:

  1. header{height:65px;
        width:100%;

  2.     opacity:0.7;}

  3. /* background-color:rgba(4つのコンマで色指定 透明度指定); */
  4. back-image{background-color:rgba(34, 49, 52, 0.9);}

 

Lesson17

次はアニメーションをつける方法です。

  1. .header-right {float: right;

  2.     background-color: rgba(255, 255, 255, 0.3);
        transition:all 0.5s;}

    .header-right:hover {background-color: rgba(255, 255, 255, 0.5);}

  3. .header-right a{line-height:65px;
        padding:0 25px;
        color:white;
        display:block;}

カーソルが乗ったときの状態をhoverといいます。「セレクタ:hover」とすることで、カーソルが乗ったときのCSSを指定できます。  

transitionでは「変化の対象」や、「変化にかかる時間」などを指定できます。「変化の対象」にはcolorなどのプロパティを指定できすが、allを指定すると全てのプロパティに適用できます。hoverと組み合わせて使うことが多いです。

 

Lesson18

アイコンを使用するにはFont Awesomeを使います。Font Awesomeは、以下の手順で使用することができます。
①Font AwesomeCSSファイルを読み込む。
②Font Awesomeのサイトにアイコンごとのクラス名が載っていますので、タグにクラスとアイコン名クラスを指定する。

こちらのサイトを参考にしてみてください。

saruwakakun.com

 

今回は以上です。文法の練習ってつまんないですよね(笑)もう少し面白くできればいいんですが。

中級編の知識はこれからときどき間に挟む実践編でも使いますので、やりながら覚えていきましょう。気にせず何度もやりつつ身につけてください。

 

では。