CSSで詰まったところ

開発環境は、Windows 7 Professional(32bit)+Firefox 58.0.2(32bit)。

Flexで上下左右それぞれの中央揃えの方法
CSS

.menu{
	display:flex;
	justify-content:center; /* 左右の中央揃え */
	align-items:center; /* 上下の中央揃え */
}

.price{
	text-align:center;
}

.price + .price{
	margin-left:100px;
}

HTML側

<div class="menu">

<div class="price">
<img src="price.png">
<h1>スマイル0円!</h1>
<p>いつでもお申し付けください。</p>
</div>

<div class="price">
<img src="price.png">
<h1>スマイル0円!</h1>
<p>いつでもお申し付けください。</p>
</div>

</div>

実行結果
f:id:k01ken:20180715172758p:plain
参考リンク
flexboxで上下左右中央揃え
上下中央揃えのCSSまとめ。Flexboxがたった3行で最も手軽 - ICS MEDIA



■HTML全体の余白をなくしたい

以下をCSSに追加するだけ。

html,body{
	margin:0px;
}


■(Flexなどの)横並びの要素間にスペースを作りたい
以下のようなコードを書く。

<div style="display:flex;">
	<div class="tt" style="width:25%;border:solid 1px black;">item1</div>
	<div class="tt" style="width:25%;border:solid 1px black;">item2</div>
	<div class="tt" style="width:25%;border:solid 1px black;">item3</div>
	<div class="tt" style="width:25%;border:solid 1px black;">item4</div>
</div>

実行結果
f:id:k01ken:20180503143501p:plain
このように横並びの要素間が詰まってしまっている。これを、要素間だけ、スペースを
開けたい。その場合は、以下のようなCSSを追加する。

.tt + .tt{
	margin-left:5px;
}

実行結果
f:id:k01ken:20180503143642p:plain
margin-leftだが、一番、左端の要素には、5px分のスペースはできていなくて、要素間だけ5px分のスペースが作られている。
※margin-leftじゃなくて、margin:5px;と書いてしまうと、要素が以下のようにズレてしまうので注意。
実行結果
f:id:k01ken:20180503144051p:plain


■text-alignはspanタグでは機能しなくて、pタグやdivタグだと機能する。
・position:absolute;したものには機能しない。

<p style="text-align:right;">pタグ</p>
<span style="text-align:right;">spanタグ</span>
<div style="text-align:right;">divタグ</div>

実行結果
f:id:k01ken:20180410222553p:plain


■liタグで、style-typeをnoneにしたときに左端に空白ができるのを消したい
HTML部分

<!-- olタグでも構わない -->
<ul>
	<li>test1</li>
	<li>test2</li>
	<li>test3</li>
</ul>

CSS部分

ul{ list-style:none; }

実行結果
f:id:k01ken:20180426173128p:plain

左側にスペースができている。これをどうにか消したい。
そのためには、以下のように修正する。
HTML部分
変更なし。
CSS部分

ul{
	list-style:none;
	margin:0px; /* 加える */
	padding:0px; /* 加える */
}

実行結果
f:id:k01ken:20180426173258p:plain

参考リンク
リストの左余白の削除方法 -<li>リストを作成した再に表示されてしまう- HTML・CSS | 教えて!goo


■画像の上に画像を被せる
positon:relativeで囲ったブロック内に、背景用の画像とそこに上書きする画像を用意し、上書きする画像を、position:absolute;とする。あとは、right,left,top,bottomで位置を調節する。

<div style="position:relative;">
	<img src="background.jpg">
	<img src="overray.jpg" style="position:absolute;">
</div>

位置を調節するためにオーバーレイする部分に追加する
・中央に表示する - right:25%;left:25%;top:50%;
・右上に表示する - right:0px;top:0px;
・右下に表示する - right:0px;bottom:0px;


CSSプロパティが変化する時の速度を操作する
transition-propaty,transition-delay,transition-duration,transition-timing-functionなど細かく設定できますが、シンプルに、transition1つだけでOK。

/* 0.5秒で切り替わります */
transition:.5s;
/* 2秒で切り替わります */
transition:2s;

参考リンク
CSS transition の使用 - CSS: カスケーディングスタイルシート | MDN


■カスタムデータ属性によってCSSを振り分けたい
data-flugという属性があったとして、trueだった場合は文字の色を青に、falseだった場合は赤にしたい場合は以下のように表記する。

.btn[data-flug="true"] {
	color:blue;
}
.btn[data-flug="false"] {
	color:red;
}

参考リンク
HTML5の独自データ属性にCSSを効かせる方法。 - ONZE
CSS設計の類はもっとカスタムデータ属性を活用するべきでは
いまさら聞けない、HTML5カスタムデータ属性の基本と使いどころ - WPJ


■ウィンドウの幅によって、要素を表示したり、非表示したい
ウィンドウの幅が480px以下のなったら、testaと表示し、480pxより大きくなったら、testbと表示する。

HTML部分

<!-- headタグのmetaタグ部分に -->
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">

<!-- bodyタグ内に -->
<div class="testa">testa</div>
<div class="testb">testb</div>

CSS部分

	.testa{
		display:none;
	}

	.testb{
		display:block;
	}

@media screen and (max-width:480px){
	.testa{
		display:block;
	}

	.testb{
		display:none;
	}
}


■はみ出た部分をスクロールして表示させたい
CSS部分

#scroll{
	overflow:scroll;
	width:400px;
	height:300px;
}

HTML部分

<div id="scroll">
適当に文章を入力したいと思います。これで、
どうなるでしょうか?縦にスクロールされるでしょうか?
楽しみです。
適当に文章を入力したいと思います。これで、
どうなるでしょうか?縦にスクロールされるでしょうか?
楽しみです。
適当に文章を入力したいと思います。これで、
どうなるでしょうか?縦にスクロールされるでしょうか?
楽しみです。
適当に文章を入力したいと思います。これで、
どうなるでしょうか?縦にスクロールされるでしょうか?
楽しみです。
適当に文章を入力したいと思います。これで、
どうなるでしょうか?縦にスクロールされるでしょうか?
楽しみです。
</div>

実行結果
f:id:k01ken:20180512231714p:plain

参考リンク
スタイルシート[CSS]/ボックス/ボックスからはみ出た部分の表示方法を指定する - TAG index


CSSファイルの優先順位

タグにstyle属性で書いたCSS > 同じファイル内に書いたCSS > 外部ファイルのCSS

同じことを書いていても、優先順位の高いものが優先して適用されてしまい、外部ファイルを修正しているのに、全然、結果が更新されないということがあるので注意。


■横スクロールを消したい

overflow-x:hidden;

参考リンク
【HTML+CSS】横スクロールバーを消したい! | あかねいろ手帳


■formタグ内のinputタグのbutton属性を右寄せしたい
・ボタンをdivタグで囲って、そのstyle属性に、text-align:right;を入れる。

<form>
	<div style="text-align:right;">
		<input type="button" value="送信">
	</div>
</form>


■特定の番号(インデックス)の要素を変化させたい
・class属性のitemsの3番目の子要素のアイテム3だけ、font-sizeを30pxにする。

HTML側

<div class="items">
<div class="item">アイテム1</div>
<div class="item">アイテム2</div>
<div class="item">アイテム3</div>
<div class="item">アイテム4</div>
<div class="item">アイテム5</div>
<div class="item">アイテム6</div>
</div>

CSS

.items div:nth-child(3){
	font-size:30px;
}

.items .item:nth-child(3){ }でも良い。
もし、:nth-of-typeを使うならば、以下ののように書くと同様のことができる。

.items div:nth-of-type(3){
	font-size:30px;
}

実行結果
f:id:k01ken:20180522130553p:plain

・インデックスは複数指定することはできず、1つずつ書かないといけない。

参考リンク
CSS3の便利なセレクタをおさらい、「:nth-child()」と「:nth-of-type()」疑似クラスの使い方 | コリス


■簡単なモーダルを作る
ボタンをクリックすると、画面全体を薄暗くして、ボタンをクリックできない状態にします。もう1回背景をクリックすると、元に戻ります。
モーダル内はクリックしても消えることはありません。

HTML側

<!-- head部分にjQueryを -->
<script src="jquery-3.2.1.min.js"></script>

<!-- body部分に -->
<button id="s">ボタン</button>
<div id="overray">
	<div id="modal-window">モーダルです。</div>
</div>

CSS

/* headタグのstyleタグ内に */
#overray{
	display:none;
	top:0;
	bottom:0;
	left:0;
	right:0;
	position:absolute;
	background-color:rgba(0,0,0,0.5);
}

#modal-window{
	padding:40px;
	width:80%;
	border-radius:5px;
	background-color:white;
	text-align:center;
	margin:10% auto 20px; /* 左右をautoにすることで中央に寄る */
}

JavaScript
.show()は、display:none;を表示するようにする。

/* headタグのscriptタグ内に */
$(function(){
	$('#s').on('click',function(){
		$('#overray').show();
	});

	$('#overray').on('click',function(){
		$('#overray').hide();
	});

	$('#modal-window').on('click',function(e){
		e.stopPropagation();
	});
});

実行結果
f:id:k01ken:20180604193038p:plain

参考リンク
margin-スタイルシートリファレンス
jQuery のバブリング、preventDefault() や stopPropagation() の使用例 | Tips Note by TAM