#2 progateでHTMLを学んでwebエンジニアを目指す! ~画像を使ったモダンなデザイン~

HTML&CSS
この記事は約4分で読めます。
スポンサーリンク

webエンジニアになるための勉強を記録していくシリーズの記事。

現在はオンラインのプログラミング学習サービスであるprogateを利用して、HTML&CSSを勉強しています。

webエンジニアへの道

webエンジニアを目指して勉強する当ブログ管理人の記録です

progate学習記録

プログラミングのオンライン学習サービス[progate]を使って学習した記録です

学んだコース

現在はprogateの【HTML&CSS中級編】を勉強している最中。

これまでに新しい方法を使って

  • トップの作り方
  • ヘッダーの作り方

を学びました。コースの後半はコンテンツ部分やフッターを作っていきます。

学んだ内容をアウトプット!

今回はコースの途中ですが、学ぶことが多かったのでアウトプットとして学んだ内容を生かしたwebサイトを作ってみました。

それがこちら(レスポンシブ対応していないのでスマホだと表示が崩れることがあります)

KUMA's OFFICIAL SITE

写真やヘッダーなどちょっと見栄えが良いサイトになってきた感じがして嬉しい!

これからも続けていきます

勉強した内容のおさらい

progateの【HTML&CSS中級編】の途中で学べる内容を備忘録もかねて書いておきます。

複数のクラス名を指定

htmlでクラス名をつけるときに、スペースを空けることで複数のクラス名を指定できる。

  <a class = "btn site"    href="https://kumajournal.com">ブログ</a>

とすると

  • btn
  • site

という二つのクラスを設定できる。

背景に画像を設定

要素の背景に写真や画像を設定できる。

画像が小さく、横幅が十分でないときは要素いっぱいに広がるように指定できる。

background-image:url(kuma.png);
background-size:cover;

背景に色を設定・透明度を調整

背景に色を設定して、その透明度を調整する

rgba(R,G,B,A)で設定。

background-color:rgba(0,0,0,0.7);

背景ではなく全体(文字などを含んで)透明にしたいときは

opacity: 0.9;

ボタンなど 角を丸める

角を丸めてボタンなどを作るときに使います。

border-radius: 4px;

こんな感じ

TOP

リンク表示の下線を消す

aタグでリンクを書くと青字で下線が引かれる。

青字は文字色を変えればいいが、下線を消すには以下のcssが必要。

text-decoration: none;

テキストを揃える位置を変える

テキストはデフォルトで左揃え。これを右揃えや中央揃えにするにはtext-alignを使う

text-align: center;

テキストを表示する高さを揃える

テキスト1行の高さを変えることで結果的にテキストが表示される位置を調整できる。

line-height: 70px;

そのまま

真ん中に

in-line要素をブロック要素にする

in-line要素はテキストなどで、入るテキストによって大きさが変わる。

この大きさを決めてしまいたいときがあっても、in-line要素には高さや幅を設定することができない。

そこでin-line要素をブロック要素やin-lineブロック要素にして幅と高さを変えられるようにする!

display: block;

マウスを重ねた時にCSSを変える

マウスを重ねた時に色を変えたりするのには:hoverと指定してCSSを書きます。

.btn:hover{
   opacity: 1;
 }

ボタンにマウスを載せると透明度が1(不透明)になります。

あらかじめ透明度を低く設定しておけば、透明→不透明と強調することが可能。

cssの適用をアニメーションさせる

先ほどの:hoverなど、cssの変化をアニメーションさせるにはtransitionを使います。

 .btn:hover{
   opacity: 1;
   transition: all 1s;
 }

こうすると、マウスを乗せて適用される:hover内のcssのすべて(all)が1sかけてアニメーションします。

1sかけて不透明になっていく感じです。

transitionには他のプロパティもあるらしいけどまだ勉強していないのでこれだけ。

allをfont-sizeなどにすれば文字の大きさだけをアニメーションさせることも可能。

まとめ

コースの途中ですがたくさん新しいことが出てきてちゃんと覚えられるか心配(笑)

htmlの基礎知識と、以上に挙げたようなcssの知識があればこんなサイトは作れました。

また、ブログに自分でデザインしたボタンを載せることができるようになり副産物的な成果もありました!

webエンジニアへの道は今のところ順調。これからも頑張って勉強していきます。

コメント

タイトルとURLをコピーしました