トップページ > サイト作成 > スタイルシート > レイアウトの設定
レイアウトの設定
幅の指定 width
幅の設定をすることができます。
width : 数値
数値には"px"や"pt"などの単位付きの数値や"%"を利用します。
高さの指定 height
高さの設定をすることができます。
height : 数値
数値には"px"や"pt"などの単位付きの数値や"%"を利用します。
余白 margin
余白の設定をすることができます。
margin : 数値
数値には"px"や"pt"などの単位付きの数値や"%"を利用します。
また、"margin-top"、"margin-bottom"、"margin-left"、"margin-right"といった形式で部分的な余白の調整も可能です。
枠と内容の間の余白 padding
枠と内容の間の余白を設定することができます。
padding : 数値
数値には"px"や"pt"などの単位付きの数値や"%"を利用します。
また、"padding-top"、"padding-bottom"、"padding-left"、"padding-right"といった形式で部分的な余白の調整も可能です。
要素の性質 display
要素の性質を設定することができます。
display : 形式
形式には
- inline ： インライン要素にする
- block ： ブロック要素にする
- none ： 要素を表示しない
で指定します。
要素の配置 position
要素の配置を設定することができます。
position : 配置場所
配置場所には
- absolute ： 絶対位置で指定
- relative ： 相対位置で指定
- static ： 配置方法を指定しない
で指定します。
回り込み float
回り込みを設定することができます。
float : 配置場所
配置場所には
- left ： 左への回り込み
- right ： 右への回り込み
で指定します。
回り込みの解除 clear
回り込みの解除を設定することができます。
clear : 解除指定
解除指定には
- left ： 左への回り込みを解除
- right ： 右への回り込みを解除
で指定します。
位置 top bottom left right
位置の設定をすることができます。
あらかじめ、「要素の配置 position」で配置方法を指定する必要があります。
top : 数値
bottom : 数値
left : 数値
right : 数値
数値には"px"や"pt"などの単位付きの数値や"%"、"auto"を利用します。
重ね順 z-index
重ね順の設定をすることができます。
z-index : 数値
数値には単位が付かない整数が入ります。
数値が大きいほど手前に表示されます。
スクロールバーを表示 overflow
スクロールバーを表示することができます。
overflow : 表示
表示には
- scroll ： スクロールバーを表示する
- visible ： 幅と高さを超えて表示する
- hidden ： 幅と高さが足りなければその分を表示しない
- auto ： ブラウザの設定に従う
で利用します。
関連記事
ウェブサイト作成
スタイルシート（CSS）はウェブサイトの装飾やレイアウトに利用されるプログラムの一種で、CSS の基本的な使い方と実際に指定するプロパティの一覧を紹介する。
作業効率アップとアクセス数アップにつながるウェブサイト作成のソフトウェア
ウェブサイト作成
ウェブサイト（ホームページ）は専用のソフトウェアを利用しなくても作成することができるが、作成ソフトを利用することで作成に必要な時間が大幅に短縮されるとともに検索サイトからのアクセス数アップにもつながる点について紹介する。
検索結果で自身のサイトが上位に表示されやすくする SEO の方法
ウェブサイト作成
インターネット上に公開した自身のウェブサイトやブログへアクセスしてもらうためには Google や bing など検索サイトから誘導する手段があり、検索結果の上位に表示されるとアクセス数が増えるため、その上位に表示させるための施策（SEO）の方法について紹介する。
スマホサイトで用いられるハンバーガーメニューの作成方法とサンプル
ウェブサイト作成
スマートフォンやタブレットなど小型の携帯端末向けのウェブサイトは画面を縦向きで利用されることが多いため、サイトのデザインと操作性も縦方向で利用されることを想定して横方向（水平方向）に画像を並べたり配置することを避けるが、縦にスクロールせずとも横方向に展開するハンバーガーメニューの作成方法について紹介する。
スマホやタブレット用ウェブサイトの横幅の比較と CSS でのレイアウト切り替え方法
ウェブサイト作成
ウェブサイトやアプリを作成する際にパソコンだけでなくスマートフォンやタブレットを利用する人ではどのように画面に表示されるか配慮する必要があり、利用される端末ごとにディスプレイのサイズが異なるため各端末の横幅の比較と CSS で端末ごとにレイアウトを切り替える方法について紹介する。
