自主学習2-5「プロゲートHTML/CSS中級編」

前回「自主学習2-4」にてプロゲートHTML/CSS初級編を終え、今回は中級編に挑戦します。

プロゲート「HTML/CSS中級編」について

中級編では初級編で作成したwebページよりも、さらにモダンなwebページを作成していきます。

HTML中級編で学習できること

WEBページのレイアウトについて
WEBページのレイアウト方法

ホームページ全体のレイアウトを構成する際に、divタグを用いてブロック要素を作っていく方法もあるが、HTML5では<header>と<footer>というタグが予め用意されているので、こちらを使用する。

<body>タグ内に
  • ヘッダー
  • divタグを用いたブロック要素
  • フッター
をそれぞれ記述し、全体のレイアウトを作成する。
ブロック要素、インライン要素、インラインブロック要素について
ブロック要素、インライン要素、インラインブロック要素

HTMLで定義される要素のうち、bodyタグ内で使用される要素はブロック要素かインライン要素に分類される。この要素の分類をCSSプロパティを用いて「インラインブロック要素」へ変更することができる。

ブロック要素 見出し、段落、表など文書を構成する要素で、一つのかたまりとして扱われる。
ブロック要素 主にブロックレベル要素の内容部分として用いられる要素で、文章の一部として扱われる。
インラインブロック要素 ブロック要素とインライン要素の両方の特徴を持つ。

横幅と高さの指定他要素との並び方
ブロック要素改行される
インライン要素×改行されない
インラインブロック要素改行されない

使用例)<a>タグはインライン要素なので高さや幅の指定が出来ない。これをブロック要素とインライン要素の両方の特徴を持つ「インラインブロック要素」に変更することで、高さや幅の指定が可能になる。これにより、リンクとしてクリックできる範囲がブロック要素まで拡大される。

CSS中級編で学習できること

中級編では要素に動きをつけて表示させたり、背景画像と文字を重ねて表示させ、背景のみ透過させるなど、装飾に関するプロパティを学習することができます。

CSS中級編で学習できるプロパティ
CSS中級編で学習できるプロパティ一覧
    文字の装飾
  • letter-spacingプロパティを用いて文字間隔を指定する。
  • font-weightプロパティを用いて文字の太さを指定する。
  • 要素全体の装飾
  • box-shadowプロパティを用いてボックスに影をつける。
  • opactyプロパティを用いて要素を透過させる。(要素の中身全てが透過される)
  • rgaプロパティを用いて要素の背景色のみ透過させる。
  • border-radiusプロパティを用いてブロック要素の角を丸くする。
  • 要素に対する変化
  • cursorプロパティを用いてカーソルが要素にのったときのカーソルの形を変える。
  • 要素の分類
  • displayプロパティを用いて要素の種類を指定する。(inline、block、inline-block)
  • 要素の配置
  • text-alignプロパティを用いて要素の配置を指定する。(インライン要素、インラインブロック要素の配置に用いるプロパティ)※ブロック要素の配置はmarginを用いる。
  • positionプロパティのposition: absolute;を用いて2つの要素を重ねて表示する。サイト全体の左上部分を基準とし、そこからの位置をtopとleftを用いて指定する。基準位置は変更可能で、position: relative;と指定すると要素の左上部分が基準位置となる。
  • positionプロパティのposition: fixed;を用いて、常に要素を画面上の指定した位置に固定させておくことができる。(ヘッダーの固定などに利用できる)
  • z-indexプロパティを用いて要素の重なりの順列を指定。z-indexプロパティはpositionプロパティと併用して用いる。
  • 要素全体の装飾(動きをつける)
  • transitionプロパティを用いてアニメーションをつける。このプロパティはhoverプロパティと組み合わせて使用する。(カーソルをのせた状態とのせていない状態の両方を指定することで、要素の見た目に変化をつけることができる。)
  • セレクタ:hoverを用いてカーソルがのった時のCSSを指定する。
  • セレクタにactiveを指定することで、要素がクリックされている間だけCSSを適用することができる。

これらのプロパティの記述方法はスタイルシートリファレンスで全て確認することができます。

SNSなどのアイコンの配置

Font Awesome(アイコンをフリーで配布しているサイト)のCSSファイルを読み込み、<span>タグでクラス名を指定する。クラス名はFont Awesomeのサイト参照。

ゴミコ
以上がHTML/CSS中級編の内容だよ。装飾について色々学んだので、より見やすいページが作れそうだよ。

自主学習2-5について、講師の評価

引き続きこの調子で進めていってください。なお、いま学習しているHTMLはHTML5/CSS3だと思いますが、Webの古い情報だとHTML4やCSS2の情報が今も載っていたりするので、WEBサイトを参考にする場合はその辺について気をつけるようにしましょう。

byゴミリョ

次回の記事

にほんブログ村 IT技術ブログへ
にほんブログ村