CSS/Position
をテンプレートにして作成
LECTURE
担当科目一覧
ソーシャルデザイン概論/2024
ソーシャルデザイン演習/2024
情報デザイン論/2024
情報デザイン演習IIA/2024
3DCG演習/2024
情報デザイン研究/2024
卒業研究/2024
KEYWORDS
WEB DESIGN
SOCIAL DESIGN
SQUARES
LINKS
九州産業大学
芸術学部
芸術研究科
九産大美術館
九産大図書館
年間スケジュール
動画ニュース他
交通情報
気象・環境情報
危機に備えて
K'sLife
Office365Mail
Tools
SEARCH
開始行:
*CSS|Position
~
CSS の position プロパティは、文書内での要素の配置方法を...
~
***Position の仕様
positionプロパティーが使える値は、以下のとおりです。
-relative:元の位置を基準に相対的な座標を使う場合
-absolute:親要素を基準に絶対的な座標を使う場合
-fixed:ブラウザ画面を基準とした絶対的な座標を使う場合
-sticky:ページのスクロールに際し、指定位置で fixed する
-static:デフォルトです。
一般に、top、bottom、left、rightというプロパティとセット...
~
***position : relative
対象となるブロックに以下のように書きます。
position:relative;
top: Ypx;
left: Xpx;
相対指定は「元の位置(何も指定しなかった場合に自動的に置...
~
***position : absolute
絶対指定は「親要素に対する相対的な位置」を指定するもので...
-位置の基準となる親要素(一般的には #container など)に以...
position:relative;
これで基準となる親要素の左上が原点(0,0)となります。
-位置を絶対指定したい要素に以下のように記載します。
position:absolute;
top: Ypx;
left: Xpx;
これで当該要素は、親要素の左上を原点とする(X,Y)の位置に...
-書き方の例
#container{
position:relative;
}
nav{
position:absolute;
top:200px;
left:40px;
width:640px;
height:40px;
}
この例では、containerの左上を原点(0,0)としたエリアの中...
nav領域が(40,200)の位置を起点として、幅640px、高さ40px...
固定的に表示されます。
~
***position : absolute を用いたサイトのロゴの配置例
サイトのロゴは、ページ内での位置が固定されるものなので、
以下のように ID を利用して書くと簡単です。
-html側の記述
<a href="index.html">
<img id="logo" src="images/logo.png">
</a>
-css側の記述
[ 親要素のセレクタ ] {
position:relative;
:
}
#logo {
position:absolute;
top: 40px;
left:40px;
}
~
***position: fixed の事例
これを使うとブラウザ画面上の特定の位置に要素を固定するこ...
スクロールしても特定の場所から動かないメニューバーやボタ...
''html''
<nav id="MenuButton"> ・・・・ </nav>
''css''
nav#MenuButton {
position: fixed;
top: 80px;
right: 0px;
}
~
***position: sticky の事例
例えば、このサイトでは、ヘッダー直下のメニュー(Navigatio...
以下、通常配置されたh1要素に対し、スクロールして最上部(t...
''html''
<h1 id="Sticky">Sample Site</h1>
''css''
h1#Sticky {
position: sticky;
top: 0;
}
参考
-ブラウザ対応状況:https://caniuse.com/#search=sticky
-Sticky のデモ: http://html5-demos.appspot.com/static/cs...
~
~
終了行:
*CSS|Position
~
CSS の position プロパティは、文書内での要素の配置方法を...
~
***Position の仕様
positionプロパティーが使える値は、以下のとおりです。
-relative:元の位置を基準に相対的な座標を使う場合
-absolute:親要素を基準に絶対的な座標を使う場合
-fixed:ブラウザ画面を基準とした絶対的な座標を使う場合
-sticky:ページのスクロールに際し、指定位置で fixed する
-static:デフォルトです。
一般に、top、bottom、left、rightというプロパティとセット...
~
***position : relative
対象となるブロックに以下のように書きます。
position:relative;
top: Ypx;
left: Xpx;
相対指定は「元の位置(何も指定しなかった場合に自動的に置...
~
***position : absolute
絶対指定は「親要素に対する相対的な位置」を指定するもので...
-位置の基準となる親要素(一般的には #container など)に以...
position:relative;
これで基準となる親要素の左上が原点(0,0)となります。
-位置を絶対指定したい要素に以下のように記載します。
position:absolute;
top: Ypx;
left: Xpx;
これで当該要素は、親要素の左上を原点とする(X,Y)の位置に...
-書き方の例
#container{
position:relative;
}
nav{
position:absolute;
top:200px;
left:40px;
width:640px;
height:40px;
}
この例では、containerの左上を原点(0,0)としたエリアの中...
nav領域が(40,200)の位置を起点として、幅640px、高さ40px...
固定的に表示されます。
~
***position : absolute を用いたサイトのロゴの配置例
サイトのロゴは、ページ内での位置が固定されるものなので、
以下のように ID を利用して書くと簡単です。
-html側の記述
<a href="index.html">
<img id="logo" src="images/logo.png">
</a>
-css側の記述
[ 親要素のセレクタ ] {
position:relative;
:
}
#logo {
position:absolute;
top: 40px;
left:40px;
}
~
***position: fixed の事例
これを使うとブラウザ画面上の特定の位置に要素を固定するこ...
スクロールしても特定の場所から動かないメニューバーやボタ...
''html''
<nav id="MenuButton"> ・・・・ </nav>
''css''
nav#MenuButton {
position: fixed;
top: 80px;
right: 0px;
}
~
***position: sticky の事例
例えば、このサイトでは、ヘッダー直下のメニュー(Navigatio...
以下、通常配置されたh1要素に対し、スクロールして最上部(t...
''html''
<h1 id="Sticky">Sample Site</h1>
''css''
h1#Sticky {
position: sticky;
top: 0;
}
参考
-ブラウザ対応状況:https://caniuse.com/#search=sticky
-Sticky のデモ: http://html5-demos.appspot.com/static/cs...
~
~
ページ名: