CSSで詰まったところ

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

■画像を画面中央に表示させたい
■CSS側

#img_location{
  top:50%;
  right:50%;
  left:50%;
  bottom:50%;
  position:fixed;
  z-index:1001;
}

■HTML側

<img id="img_location" src="test.png">

↓下にテスト用の画像を置いておきます。
f:id:k01ken:20190114192332p:plain

■マウスカーソルを指の形に変更する
■CSS側

.test{
  cursor:pointer;
}

■HTML側

<!-- body部分にて -->
<div class="test">マウスカーソルが変わります</div>

参考リンク
【HTML/CSS】要素にマウスカーソルを重ねた時にカーソルの形を指マークにする - Qiita

■クリックしたらページ上部に戻る機能のCSS部分の作り方
■CSS側

#right-bottom-navi{
  position:fixed;
  bottom:5px;
  right:5px;
  width:35px;
  height:35px;
  border-radius:50px;
  background-color:blue;
  opacity:0.2;
}

■HTML側

<!-- bodyタグ内にて -->
<div id="right-bottom-navi"></div>

■実行結果
f:id:k01ken:20181224193722p:plain
・画面右下に上記のようなものが表示される。

■positionのdisplayとfixedの違い
displayは親要素を基準に絶対的な位置を決めて、fixedは、画面の特定に位置に常に固定すること。

参考リンク
CSSのpositionを総まとめ！absoluteやfixedの使い方は？

■border-radiusで四つの角の特定部分だけを丸くする
■CSS側

border-top-left-radius:5px; /* 左上だけ5px */
border-top-right-radius:5px; /* 右上だけ5px */
border-bottom-left-radius:5px; /* 左下だけ5px */
border-bottom-right-radius:5px; /* 右下だけ5px */

参考リンク
border-radius－CSS3リファレンス

■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で上下左右中央揃え - Qiita
上下中央揃えの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:0; /* 加える */
	padding:0; /* 加える */
}

実行結果
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など細かく設定できますが、シンプルに、transition１つだけでOK。

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

参考リンク
CSS トランジションの使用 | MDN

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

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

参考リンク
HTML5の独自データ属性にCSSを効かせる方法。 - ONZE
CSS設計の類はもっとカスタムデータ属性を活用するべきでは - Qiita
いまさら聞けない、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()」疑似クラスの使い方 | コリス

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

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;
/* absoluteにしていたが、縦長でスクロールする場合、下が切れてしまうので変更。 */
	position:fixed;
	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

k01ken’s b10g

He110 W0r1d!

CSSで詰まったところ