#3 progateでHTMLを学んでwebエンジニアを目指す! ~アニメーションと表現方法~

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

webエンジニアを目指して勉強している記録の記事#3

現在はprogate というオンライン学習サービスでHTML&CSSを学んでいます。

webエンジニアへの道

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

progate学習記録

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

学んだコース

今回は、progateの【HTML&CSS中級編】を修了したのでこちらで学んだ内容のまとめとなります。

具体的には、

  • 画像を背景に設定したデザイン
  • 文字と画像など要素同士を重ねて表示
  • 影をつける
  • クリックされたときのアニメーション
  • ヘッダーなどを上部に固定

などを学びました。

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

今回も学んだ内容を生かしてwebページを作成してみました。

progateの【HTML&CSS中級編】まで終了するとこのようなページを作ることができます。

  • ヘッダーなどのリンクにカーソルを重ねた時の変化
  • コンテンツ部分

がよくあるサイトのような感じに近づけた気がします。

アウトプットをこまめにすることでモチベーション維持や記憶の定着に効果的。

勉強中の皆さんは学ぶだけではなく自分で何かを作るということもしてみてくださいね

学んだ内容の備忘録(HTML&CSS)

今回学んだ内容の備忘録です。

HTMLやCSSに詳しくなったらまとめたページを作りたいと思っていますが、今はとりあえず学習ペースごとにまとめていきます。

絶対座標と相対座標

要素同士を重ねて表示したいとき、絶対座標と相対座標を使う。

絶対座標とは、ページの左上を基準とした位置。

以下のコードでは、左上から下方向に100px,右方向に50pxのところに要素が配置される。

position:absolute;
top:100px;
left:50px;

相対座標とは、基準となる場所を親要素の右上として考えた時の座標。

親要素にposition:relativeをつけ、子要素にabsoluteをつける。

下のコードでは、childクラスを持った要素はparentクラスの左上を基準として下に100px下がった位置に配置される。

.parent{
   position:relative;
}

.child{
   position:absolute;
   top:100px;
}

影をつける

影をつけるプロパティの一つにbox-shadowがある。

box-shadow:横の影 縦の影 色; で指定

.hoge{
   box-shadow:0 7px black;
}

こんな感じ

影ついた!

カーソルを変える

要素にのったときのカーソルのデザインを変える。

これは:hoverではなく普通に書くだけでOK

.hoge{
   cursor:pointer;
}

こんな感じ。マウスカーソルを乗せてみてください。

押せそうでしょ

クリックされたときのアニメーション

要素がクリックされたときの挙動は:actionで指定する。

以下のようにすると、クリックされたとき要素が下に移動するようになる。

.hoge:active{
  position:relative;
  top:10px;
}

ヘッダーなどを固定

ヘッダーなどは、webページをスクロールしてもずっと上に固定して表示したいときがある。

そんな時はposition:fixed;

ただ固定しただけでは他の要素と重なって見えなくなってしまうのでz-indexを指定して最前面に表示する必要がある。

z-indexが大きいほど前面。(デフォルトはたぶん0)

.hoge{
   position:fixed;
   z-index:1;
}

containerクラスの謎

htmlのコードで、なぜか○○-wrapperというクラスの下にcontainerクラス、その下に目当てのタグという構造がお手本に多かった。

コードにするとこんな形式

<body>
   <header>
      <div class ="container">
         
      </div>
   </header>

   <div class="top-wrapper">
      <div class="container>
         
      </div>
   </div>

</body>

おそらく画面の表示を管理しやすくする(レスポンシブデザインとか?)ために横幅などを一括で変えるようにしておく必要があるからだと思うが、真偽は不明。

誰かコメントかTwitterで教えてください@kumajournal

文字の間隔を調整

文字同士の間隔を調整することができる

.hoge{
   letter-spacing:5px;
}

こんな感じ

普通

間隔開けた

アイコンのフリーサイトを使ってみた

今回アウトプットとして作ったこちらのページでは画像やアイコンにフリーの商用利用可の素材を使いました。

二つのサイトから利用させてもらったのですが、どちらのサイトもとてもおしゃれでいい素材が多くて見つけられてよかった!

ということで皆さんにも共有します。

アウトプットで作ったwebページのフッターにも記載しています。

FLAT ICON DESIGN -フラットアイコンデザイン-
フラットデザインに最適!WEBサイトやDTPですぐ使える商用利用可能なフラットアイコン素材がフリー(無料)ダウンロードできるサイト『FLAT ICON DESIGN』
アイコン素材ダウンロードサイト「icooon-mono」 | 商用利用可能なアイコン素材が無料(フリー)ダウンロードできるサイト | 6000個以上のアイコン素材を無料でダウンロードできるサイト ICOOON MONO
6000個以上のアイコン素材を無料でダウンロードできるサイト ICOOON MONO

まとめ

現在毎日数時間は勉強ができているので、成長している実感も感じられて楽しく学べています。

これからも頑張って勉強していくのでアウトプットのwebページがどのように変化していくのか楽しみにして頂けたら嬉しいです。

同じようにweb制作やプログラミングの勉強をしている方は一緒に頑張りましょう!

コメント

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