CSSで詰まったところ

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

■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タグだと機能する。

<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>


■カスタムデータ属性によって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()」疑似クラスの使い方 | コリス