Category: CSS

[CSS] cssでのvwとは？

cssの中でvwってよく見ますが、vwって何でしょう？
vw: viewport width -> 幅に対する割合、100がマックス
vh: viewport height -> 高さに対する割合

	<style>
		img {
			display: inline-block;
			margin:auto;
			width: 50vw;
		}
	</style>
	<div class="container">
		<img src="/img/test.jpg">
	</div>

フォルクスワーゲンの事じゃないのね。。
VW、cssまで進出して凄いと思ってたが、違った様だ。

[CSS] transitionとは

CSSトランジションとは、CSSプロパティが変化する際のアニメーション速度を操作する

	<style>
		.sample {
			border: 1px solid #ccc;
			border-radius: 5px;
			width: 150px;
			height: 60px;
			line-height: 60px;
			font-weight: bold;
			text-align: center;
			color: green;
			box-shadow: 20px 10px 2px #8D9EB8;
			transition: 0.5s;
		}
		.sample:hover {
			color: orange;
			box-shadow: -20px 10px 5px #8D9EB8;
		}
	</style>
	<div class="container">		
		<div class="sample">Sample</div>		
	</div>

transitionの値を2sとか0.5sとか変えると、動きも変わる。

なるほど、アニメーションの動きは、ここで制御しとるんか。

[CSS] 画像の上に文字を乗せる方法

ボタン画像の上に文字を乗せて表示したい。
-> 画像の上に文字を乗せる方法を理解する。

<div class="sample">
			<img src="img/sky.jpg">
			<p>SUNSET</p>
		</div>

position: relativeとする。

<style>
    	.sample {
    		position: relative;
    	}
    	.sample p {
    		position: absolute;
    		color: red;
    		top: 5px;
    		left: 5px;
    	}
    </style>

<div class="container">
		<div class="sample">
			<img src="img/sky.jpg">
			<p>SUNSET</p>
		</div><br>
		<div class="sample">
			<img src="img/sky.jpg">
			<p>SUNSET2</p>
		</div>
	</div>

画像の上に文字が乗りました。

なるほど、理解した。背景画像とは別に、こういうことができるんやな。

[CSS] CSSファイルが複数ある時のネーミング

CSSファイルの分割方法

default.css　リセットのCSS・基本スタイルとなるCSSを記述しています。
common.css　レイアウト・ページ独自のCSSまで全て記載
index.css　トップページのCSS
about.css　aboutディレクトリのCSS
product.css　productディレクトリのCSS
news.css　newsディレクトリのCSS

なるほど、ページ名でcssファイルを作るのね。
てっきりstyle1.css, style2.cssで行こうかと思ってた。。。
これは滅茶苦茶恥ずかしい。。

[CSS] position:stickyで固定表示したい時

    <style>
    	table {
            width: 100%;
        }
        th, td {
            height: 300px;
            vertical-align: middle;
            padding: 0 15px;
            border: 1px solid #ccc;
        }
        .fixed01 {
            position: sticky;
            top: 0;
            color: #FFF;
            background: #333;
            &:before{
                content: "";
                position: absolute;
                top: -1px;
                left: -1px;
                width: 100%;
                height: 100%;
                border: 1px solid #ccc;
            }
        }
    </style>
</head>
<body>
	<div class="container">
		<table>
            <tr>
                <th class="fixed01">見出し</th>
                <th class="fixed01">見出し</th>
                <th class="fixed01">見出し</th>
            </tr>
            <tr>
                <td>テキスト</td>
                <td>テキスト</td>
                <td>テキスト</td>
            </tr>
            <tr>
                <td>テキスト</td>
                <td>テキスト</td>
                <td>テキスト</td>
            </tr>
        </table>
	</div>

「position: sticky;」は「指定された場所までいくと固定」される仕様

なるほど。。

[font-family]OSのシステムフォントとfont-familyの設定

-Windows 8.1以降
Yu Gothic
Yu Gothic UI
Segoe UI

-Mac OS EI caption以降/ iOS
Hiragino Sans
Sanfrancisco

-Android
Noto Sans CJK JP
Roboto

<style>
    	body {
            font-family: "Arial", "メイリオ";
        }
    </style>


<style>
    	body {
            font-family: sans-serif, "Helvetica Neue";
        }
    </style>

Helvetica Neue
-> mac のみ

ゴシック系

font-family: "Hiragino Sans W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;

なんで、font-familyで書体を複数設定しているか全然わからなかったけど、それぞれのOSで書式がないときに厳密に指定するためなのね。

何年Webやってんだ、って感じだが、やっと理解できた。

[CSS Grid] グリッドレイアウトを使ってみる

CSS Gridを推奨されたので、試してみたい。

– コンテナ
display: grid; または display: inline-grid;を使うことでGrid Layoutのコンテナになる。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css"> -->
    <style>
    	.grid-container {
    		display:grid;
    		grid-template-rows: 100px 50px;
    		grid-template-columns: 150px 1fr;  /* frは残りの幅 */
    	}
    	#itemA {
			grid-row: 1 / 3;
			grid-column: 1 / 2;
			background: #f88;
    	}
    	#itemB {
			grid-row: 1 / 3;
			grid-column: 2 / 3;
			background: #8f8;
    	}
    	#itemC {
			grid-row: 2 / 3;
			grid-column: 2 / 3;
			background: #88f;
    	}
    	
    </style>
</head>
<body>
	<div class="grid-container">
		<div id="itemA">A</div>
		<div id="itemB">B</div>
		<div id="itemC">C</div>
	</div>
	<script>
	</script>
</body>
</html>

概念はわかった。次行こう。

[background-image] 背景画像を表示する

html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
    <style>
    	html {
    		height: 100%;
		}

		body {
		    height: 100%;
		    margin: 0;
		}
    	.container {
    		height: 100%;
    		background-image: url('img/sky.jpg');
    		background-color:rgba(255,255,255,0.8);
    		background-blend-mode:lighten;
    		background-repeat: no-repeat;
    		background-position: center 20px;
    	}
    	
    </style>
</head>
<body>
	<div class="container col-md-12">
		<h1 class="text-center">背景画像テスト</h1>
	    <p>テキストが入りますテキストが入ります</p>
	</div>
	<script>
	</script>
</body>
</html>

なるほど

[CSS] object-fitで画像のアスペクト比を変更せずに表示する

異なる画像サイズを一定サイズのカードで表示したい。元画像をそのまま指定したheight, widthで表示した場合、縦長、横長の画像は圧縮されてしまう。どうしたら良いか。

昔、先輩に教わったのだが、システムでは表示する際にデータを装飾することはあっても、基本的に元データそのものを加工・変更してはいけない。

ということで、表示を揃えるためにアップロードした画像をサーバーサイド側で切り抜くのは気が引けていた。
少し調べたら、CSSのobject-fitでアスペクト比を維持したまま処理できるらしい。

contain: アスペクト比を維持したままボックスに収まるよう拡大縮小
cover: アスペクト比を維持したまま、コンテンツボックスを埋めるよう拡大縮小

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		.contain img {
			width: 200px;
  			height: 150px;
  			object-fit: contain;
		}
		.cover img {
			width: 200px;
  			height: 150px;
  			object-fit: cover;
		}
		.fill img {
			width: 200px;
  			height: 150px;
  			object-fit: fill;
		}
	</style>
</head>
<body>
	<div class="contain">
		<img src="img/bridge1.jpg"><br>
		<img src="img/bridge2.jpg">
	</div>
	<br>
	<div class="cover">
		<img src="img/bridge1.jpg"><br>
		<img src="img/bridge2.jpg">
	</div>
	<br>
	<div class="fill">
		<img src="img/bridge1.jpg"><br>
		<img src="img/bridge2.jpg">
	</div>
	<script>
	</script>
</body>
</html>

coverだと、画像が切れる恐れがあるから、containが一番しっくり来るな。

[three-dots] spinnerを実装してみる

Github: https://github.com/nzbin/three-dots

$ npm install three-dots –save

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link href="/node_modules/three-dots/dist/three-dots.css" rel="stylesheet">
	<style>
		.spinner {
			margin: 50px;
		}
	</style>
</head>
<body>
	<div class="spinner">
		<div class="dot-elastic"></div>
	</div>
</body>
</html>

なるほど、CSSで表現できるのね。処理に時間がかかる時に使えそうですな。