HTML-CSS 入門講座

HTML-CSS 入門講座

こんにちは！
今日も頑張ろう

Appendix-3
知恵袋（Tips）

A3.1 はじめに

(1) 知恵袋（Tips）とは？

「知恵袋（Tips）」は、筆者が Web サイト開発を行うにあたって気になった事、調べた事、知っておいてほしい事などをまとめたものです。

順不同ですが、Web サイトを開発する時に知っておいてほしい事項を説明していますので参考にしてください。

(2) 記載内容

「知恵袋（Tips）」の記載内容は、以下の通りです。

  1. BOX モデルの構成要素
    BOX モデルの構成要素である content、padding、border、margin の関係を説明します。
  2. margin プロパティの注意事項
    margin プロパティを使う場合に注意しなければいけない、重なりによる相殺、マイナス値の指定、ボックスの配置などの使用方法を説明します。
  3. overflow プロパティでの領域の処理
    overflow プロパティを使用してボックスからはみ出ているテキストや画像の処理方法を説明します。
  4. 文字の折り返し
    word-break、word-wrap、white-space プロパティを使用したテキストの折り返しやホワイトスペースの処理方法などを説明します。
  5. フォントの構成と単位
    font-size、line-height プロパティを使用したフォント構成と行間の考え方とフォントサイズの単位を説明します。
  6. 画像の隙間を消す
    画像を並べた時に発生する縦方向や横方向の隙間の原因と消す方法を説明します。
  7. object-fit プロパティでの画像トリミング
    object-fit プロパティを使用して大きさの違う画像を一定の大きさでトリミングする方法を説明します。
  8. shape-outsideプロパティでの回り込み
    shape-outside プロパティを使用して画像などの形状に従ったテキストの回り込み方法を説明します。
  9. calc 関数での幅の計算
    calc 関数を使用して横幅が可変長の場合の計算方法を説明します。
  10. 画面の幅による表示画像の切り替え
    画面の幅によって表示する画像ファイルを切り替える方法を説明します。
  11. 端末やブラウザ情報の取得
    表示している端末やブラウザの情報（種別）を取得する方法を説明します。
  12. 三角形の作成
    border プロパティを使用して三角形を作成する方法を説明します。
  13. レスポンシブ対応の正方形の作成
    padding プロパティを使用してレスポンシブ対応の正方形を作成する方法を説明します。
  14. 写真ギャラリーの作成
    写真を並べる（ギャラリー作成）方法を説明します。
  15. 画像のマスキング
    画像（写真）のマスキング（トリミング）方法を説明します。

ロケット本体
PAGE
TOP
ロケット炎