更新履歴 [2021年10月16日]「RedHat8 / CentOS8 に FTP をインストールして利用できるまでの手順」を更新。

タグ: ,

トップページ > サイト作成 > スタイルシート > レイアウトの設定

レイアウトの設定

幅の設定をすることができます。

width : 数値

数値には"px"や"pt"などの単位付きの数値や"%"を利用します。

高さの設定をすることができます。

height : 数値

数値には"px"や"pt"などの単位付きの数値や"%"を利用します。

余白の設定をすることができます。

margin : 数値

数値には"px"や"pt"などの単位付きの数値や"%"を利用します。

また、"margin-top"、"margin-bottom"、"margin-left"、"margin-right"といった形式で部分的な余白の調整も可能です。

枠と内容の間の余白を設定することができます。

padding : 数値

数値には"px"や"pt"などの単位付きの数値や"%"を利用します。

また、"padding-top"、"padding-bottom"、"padding-left"、"padding-right"といった形式で部分的な余白の調整も可能です。

要素の性質を設定することができます。

display : 形式

形式には

  • inline ： インライン要素にする
  • block ： ブロック要素にする
  • none ： 要素を表示しない

で指定します。

要素の配置を設定することができます。

position : 配置場所

配置場所には

  • absolute ： 絶対位置で指定
  • relative ： 相対位置で指定
  • static ： 配置方法を指定しない

で指定します。

回り込みを設定することができます。

float : 配置場所

配置場所には

  • left ： 左への回り込み
  • right ： 右への回り込み

で指定します。

回り込みの解除を設定することができます。

clear : 解除指定

解除指定には

  • left ： 左への回り込みを解除
  • right ： 右への回り込みを解除

で指定します。

位置の設定をすることができます。
あらかじめ、「要素の配置 position」で配置方法を指定する必要があります。

top : 数値
bottom : 数値
left : 数値
right : 数値

数値には"px"や"pt"などの単位付きの数値や"%"、"auto"を利用します。

重ね順の設定をすることができます。

z-index : 数値

数値には単位が付かない整数が入ります。
数値が大きいほど手前に表示されます。

スクロールバーを表示することができます。

overflow : 表示

表示には

  • scroll ： スクロールバーを表示する
  • visible ： 幅と高さを超えて表示する
  • hidden ： 幅と高さが足りなければその分を表示しない
  • auto ： ブラウザの設定に従う

で利用します。

関連記事

スマホやタブレット用ウェブサイトの横幅の比較と CSS でのレイアウト切り替え方法

CSS, 携帯端末

ウェブサイトやアプリを作成する際にパソコンだけでなくスマートフォンやタブレットを利用する人ではどのように画面に表示されるか配慮する必要があり、利用される端末ごとにディスプレイのサイズが異なるため各端末の横幅の比較と CSS で端末ごとにレイアウトを切り替える方法について紹介する。

ウェブサイトのスタイルシート（CSS）の 3 つの書き方

CSS, Web制作

ウェブサイトで利用するスタイルシート（CSS）には 1 つのファイルに CSS まとめたり、ページごとや HTML のタグごとに記載するといった 3 つの書き方がありそれらについて解説する。

ウェブサイトで利用されるスタイルシート（CSS）とは

CSS, Web制作

スタイルシートとはフォントや行間など文書の装飾を定義するもので、一部のソフトウエアでも互換性を持たせるために利用されているが、一般的にウェブサイトの制作現場で用いられるスタイルシートについて解説する。

Web サイトの作成方法と作成にまつわる TIPS

Web制作

Web サイトを作成するための基本的な情報から検索結果に上位表示するための SEO、プログラムの TIPS などを紹介する。

SEO に適した h タグの使い方とやってはいけない使い方

Web制作

HTML の h タグは見出しとして利用されるものだが、Web サイトやブログを掲載する際にただ文章を連ねるのではなく適切に見出しと段落を使い分けることで読みやすくなり、検索結果の表示順位にも良い影響を与えるため正しい h タグの使い方と SEO への影響について紹介する。

検索

タグ一覧

最新記事

2005 - 2021 Copyright Webolve. All Rights Reserved.