2 divided flex overflow

• Top
• Locate1
• Locate2
• Locate3

	<style>
	ul.t {
		list-style-type: none;
		margin: 0;
		padding: 0;
		width: 200px;
		background-color: #f1f1f1;
		border: 1px solid #555;
	}
	li a.t {
		display: block;
		color: #000;
		padding: 8px 16px;
		text-decoration: none;
	}
	li.t { text-align: center;
			border-bottom: 1px solid #555;
		}
	li.t:last-child {
		border-bottom: none;
	}
	li a.ta {
		background-color: #4CAF50;
		color: white;
	}
	li a.t:hover:not(.ta) {
		background-color: #555;
		color: white;
	}
</style>
<div style="box-sizing: border-box;display: flex; max-height: 500px; position: relative; overflow-y: auto;">
<div style="width:30%; position: fixed; top:50px;right:20px; height: 100%; overflow: auto;">

<ul class="t" style="margin-left: 20px;">
	<li class="t"><a class="t ta" href="#top">Top</a></li>classを２つ
	<li class="t"><a class="t" href="#somewhere1">Locate1</a></li>
	<li class="t"><a class="t" href="#somewhere2">Locate2</a></li>
	<li class="t"><a class="t" href="#somewhere3">Locate3</a></li>
</ul>
<div style="width:70%;"><pre style="border-left: 4px solid lightgreen; background-color: lightgrey; overflow-x: auto;">
	<style>
	ul.t {
		list-style-type: none;
		margin: 0;
		~~~~~~~

overflow testing

listをoverflow: sticky; top: 220px; などとするとスクロールバーの限度がなくなってしまう。max-height: 500pxなども効かない。が全体の<div>でのmax-heightは効いたのと、一応、listを左右どちらかでposition:sticky; としたかったので、ここまでで良しとしておく。
出来れば左の高さだけに止めておきたいが。

Horizantal nav display: inline/float:left/right;

• Top
• Locate1
• Locate2
• Locate3
• Locate4

fixed position nav bar

Top fixed navibation bar
      ul {
      	  position: fixed;
      	  top: 0;
      	  width: 100%;
      	  }
      	

Bottom fixed navigation bar
	ul {
		position: fixed;
		bottom: 0;
		width: 100%;
		}

text-shadow: horizantal/vertical/blur-radius/color; text-shadow play it.

CSS shadow property tutorial

white text with black shadow style="text-shadow: 3px 3px 5px #000000; " with <b>:big
then added, " 0 0 9px green, 0 0 10px red; " / it's colors are mixed

This paragraph
direction:rtl(right to left)/ltr(default: left to right)
; and text-shadow: 0 0 10px #FF0000; which gives text red neon glow shadow effect.

color 不可算名詞であり、具体的な例がある場合には可算名詞。上の場合は3つのcolorsがあり可算名詞。
a movie in color / warm colors / full color 24-bit color/ true colors/ similar colors同系色/fluorescent colors蛍光色 mixed colors

under color of... ...を言い訳にして

Border around text!

h2 {
color: yellow;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}

1px づつずらして枠を作るイメージか？

Border around text different one.

Multi color shadow

CSS box shadow

box-shadow: horizantal/ vertical/ blur/ /spread/ color

box-shadow: 10px 10px 10px grey;

紙のカードやポラロイドカードのように見せるには、横horizantal 0 縦vertical に少し4~9辺りで2つ 異なるblurの値 rgba(0, 0, 0, 0.3) も異なる値を2つ 作ってやるとそれっぽく見える。
4つ目の値である spread を0以外にすると影がなくなってしまう。

23

Novenber 23

	div.card {
		width:300px;
		box-shadow: 0 6px 8px 0 rgba(0, 0, 0, 0.3), 0 9px 15px 0 rgba(0, 0, 0, 0.2);
		text-align:center;
	}
	div.phead {
		background-color: #4CAF50;
		color:white;
		padding: 15px;
		font-size: 35px;
	}
	div.container1 {
		padding: 8px;
	}
	<div class="card" style="margin-left: 50px;">
	<div class="phead">
		<h2>23</h2>