WEBGIS開発
目次
WEBGIS開発
01、セレクタの優先順位問題1
02、セレクタの優先順位問題2
03、フォーム要素
04、フロートレイアウト
05、インラインブロック要素の使用を避ける理由
06、フロートの問題点
07、フロート問題の解決策
08、CSSの導入方法
09、ポジショニング
10、z-indexによるレイヤーの重なり順序
11、固定ポジショニング
12、transformプロパティ
13、シャドウ効果
14、フレックスボックスレイアウト
15、フレックスボックス演習
01、セレクタの優先順位問題1
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ドキュメント</title>
<style>
div{
width: 200px;
height: 200px;
background-color: blue !important;/*!importantが最優先*/
}
/*クラスセレクタは要素セレクタより優先度が高い*/
.container{
background-color: brown;
}
/*IDセレクタはクラスセレクタより優先度が高い*/
.main{
background-color: blanchedalmond;
}
</style>
</head>
<body>
<div class="container" id="main" style="background-color: black;"></div>
</body>
</html>
02、セレクタの優先順位問題2
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ドキュメント</title>
<style>
/*セレクタのネストが深いほど優先度が高い*/
.list-item{
color: red;
}
ul>li{
color: aqua;
}
.parent ul li{
color: aquamarine;
}
html body .parent ul li{
color: purple;
}
</style>
</head>
<body>
<div class="parent">
<ul>
<li>
こんにちは
</li>
</ul>
</div>
</body>
</html>
03、フォーム要素
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ドキュメント</title>
</head>
<body>
<form action="">
<div>
ユーザー名：<input type="text" placeholder="ユーザー名を入力してください">
パスワード：<input type="password" placeholder="パスワードを入力してください">
</div>
<hr>
<div>
<!-- type="radio"はラジオボタン ただしnameは同じにする必要がある -->
男性<input type="radio" name="gender">
女性<input type="radio" name="gender">
</div>
<hr>
<div>
<!-- type="checkbox"はチェックボックス -->
趣味：
<input type="checkbox" name="" id="">食事
<input type="checkbox" name="" id="">睡眠
<input type="checkbox" name="" id="">豆叩き
</div>
<hr>
<div>
都市を選択してください：
<select name="" id="">
<option value="東京">東京</option>
<option value="大阪">大阪</option>
<option value="名古屋">名古屋</option>
<option value="福岡">福岡</option>
</select>
</div>
<hr>
<div>
<!-- 長テキスト入力フィールド -->
<textarea name="" id="" cols="50" rows="20"></textarea>
</div>
<div>
<!-- type="submit"は送信ボタン -->
<input type="submit">
</div>
</form>
</body>
</html>
04、フロートレイアウト
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ドキュメント</title>
<style>
.box1{
width: 100px;
height: 100px;
background-color: red;
float: left;
/* フロート要素は文書フローから外れ、並べて表示される */
}
.box2{
width: 200px;
height: 200px;
background-color: blue;
float: left;
/* フロート要素は文書フローから外れ、並べて表示される */
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
05、インラインブロック要素の使用を避ける理由
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ドキュメント</title>
<style>
.container{
height: 40px;
background-color: pink;
}
.element{
/* インラインブロックは要素間に隙間ができるため使用しない */
width: 40px;
height: 40px;
background-color: red;
float: left;
margin-right: 30px;
}
</style>
</head>
<body>
<div class="container">
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
</div>
</body>
</html>
06、フロートの問題点
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ドキュメント</title>
<style>
.parent{
width: 200px;
background-color: green;
}
.box1{
width: 100px;
height: 100px;
background-color: red;
float: left;
}
.box2{
width: 200px;
height: 200px;
background-color: blue;
}
</style>
</head>
<body>
<!-- 1、子要素にフロートを使用すると、親要素の高さが崩れる -->
<!-- 2、後続の要素に干渉を与える -->
<div class="parent">
<div class="box1"></div>
</div>
<div class="box2"></div>
</body>
</html>
07、フロート問題の解決策
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ドキュメント</title>
<style>
.parent{
width: 200px;
/* height: 100px; 高さを指定する */
background-color: green;
/* はみ出し部分を隠す：内部要素がフロートしている場合 */
overflow: hidden;
}
.box1{
width: 100px;
height: 100px;
background-color: red;
float: left;
}
.box2{
width: 200px;
height: 200px;
background-color: blue;
}
</style>
</head>
<body>
<!-- 1、親要素に高さを指定して崩れを防ぐ -->
<!-- 2、overflow: hiddenを使用する -->
<div class="parent">
<div class="box1"></div>
</div>
<div class="box2"></div>
</body>
</html>
08、CSSの導入方法
.cssファイル
div{
color: blue;
}
HTMLでの参照
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ドキュメント</title>
<!-- 外部スタイルシートの参照 -->
<link rel="stylesheet" href="./08、CSS導入.css">
<style>
/* 内部スタイルシート */
</style>
</head>
<body>
<!-- タグに直接記述するインラインスタイルは非推奨。極力避ける -->
<div>
こんにちは
</div>
</body>
</html>
09、ポジショニング
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ドキュメント</title>
<style>
*{
margin: 0;
padding: 0;
}
.container{
width: 400px;
height: 400px;
background-color: blue;
/* position: relative; */
}
.inner-box{
width: 150px;
height: 150px;
background-color: red;
position: absolute;
left: 40px;
bottom: 10%;
}
/* 相対定位は元の正常な位置を基準に配置される */
/* 絶対定位はまず祖先要素を探し、祖先要素が定位されている場合はそれを基準に、そうでなければbodyを基準にする */
</style>
</head>
<body>
<div class="container">
<div class="inner-box"></div>
</div>
</body>
</html>
10、z-indexによるレイヤーの重なり順序
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ドキュメント</title>
<style>
.container{
width: 400px;
height: 400px;
background-color: blue;
}
.layer1{
width: 100px;
height: 100px;
background-color: red;
position: absolute;
z-index: 3;
}
.layer2{
width: 150px;
height: 150px;
background-color: green;
position: absolute;
z-index: 2;
/* 要素が重なる場合のレイヤーはz-indexで制御 */
}
</style>
</head>
<body>
<div class="container">
<div class="layer1"></div>
<div class="layer2"></div>
</div>
</body>
</html>
11、固定ポジショニング
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ドキュメント</title>
<style>
div{
height: 2000px;
}
button{
position: fixed;
right: 30px;
bottom: 30px;
}
</style>
</head>
<body>
<div>1</div>
<button>トップへ</button>
</body>
</html>
12、transformプロパティ
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ドキュメント</title>
<style>
*{
margin: 0;
padding: 0;
}
.box{
width: 200px;
height: 200px;
background-color: black;
/* 水平・垂直移動 */
/* 定番の面接問題：要素をページの中央に配置する方法 */
position: absolute;
top:50%;
left:50%;
transform: translate(-50%,-50%);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
13、シャドウ効果
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ドキュメント</title>
<style>
.box{
width: 100px;
height: 100px;
background-color: red;
/* 左右・上下のオフセット、ぼかし量、影の広がり、影の色 */
box-shadow: 5px 5px 5px 5px #333;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
14、フレックスボックスレイアウト
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ドキュメント</title>
<style>
/* フレックスボックスレイアウト */
/* コンテナ */
.container{
width: 460px;
height: 320px;
border: 1px solid #000;
margin:0 auto;
display: flex;
/* 折り返しの可否 */
flex-wrap: wrap;
/* 主軸の揃え方 space-around space-between space-evenly */
justify-content: space-evenly;
/* 交軸の揃え方 flex-start center flex-end */
align-items: center;
/* 主軸の方向設定 rowは水平、columnは垂直、デフォルトは水平 */
flex-direction: row;
}
/* アイテム */
.item{
width: 100px;
height: 100px;
border:1px solid #000;
background-color: red;
border-radius: 10px 10px 10px 10px;
/* アイテムの交軸での揃え方 flex-start center flex-end */
/* align-self: flex-start; */
}
.first{
/* 主軸幅の比率を指定 */
flex: 1;
}
.second{
flex: 2;
}
.third{
flex: 3;
}
</style>
</head>
<body>
<div class="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<!-- <div class="item first"></div>
<div class="item second"></div>
<div class="item third"></div> -->
</div>
</body>
</html>
15、フレックスボックス演習
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ドキュメント</title>
<style>
.box {
width: 400px;
height: 300px;
border: 1px solid #333;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
align-items: center;
}
.item {
width: 10px;
height: 10px;
background-color: red;
border-radius: 50%;
}
.target{
width: 100px;
height: 100px;
border: 1px solid #333;
position: relative;
}
.quarter1{
display: flex;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
justify-content: center;
align-content: center;
}
.quarter2{
display: flex;
position: absolute;
top: 25%;
left: 75%;
transform: translate(-50%,-50%);
justify-content: center;
align-content: center;
}
.quarter3{
display: flex;
position: absolute;
top: 75%;
left: 25%;
transform: translate(-50%,-50%);
justify-content: center;
align-content: center;
}
.quarter4{
display: flex;
position: absolute;
top: 25%;
left: 25%;
transform: translate(-50%,-50%);
justify-content: center;
align-content: center;
}
.quarter5{
display: flex;
position: absolute;
top: 75%;
left: 75%;
transform: translate(-50%,-50%);
justify-content: center;
align-content: center;
}
</style>
</head>
<body>
<div class="box">
<div class="target">
<div class="item quarter1"></div>
</div>
<div class="target">
<div class="item quarter2"></div>
<div class="item quarter3"></div>
</div>
<div class="target">
<div class="item quarter2"></div>
<div class="item quarter1"></div>
<div class="item quarter3"></div>
</div>
<div class="target">
<div class="item quarter4"></div>
<div class="item quarter2"></div>
<div class="item quarter3"></div>
<div class="item quarter5"></div>
</div>
<div class="target">
<div class="item quarter1"></div>
<div class="item quarter1"></div>
<div class="item quarter1"></div>
<div class="item quarter1"></div>
<div class="item quarter1"></div>
</div>
<div class="target">
<div class="item quarter1"></div>
<div class="item quarter1"></div>
<div class="item quarter1"></div>
<div class="item quarter1"></div>
<div class="item quarter1"></div>
<div class="item quarter1"></div>
</div>
</div>
</body>
</html>