Category: CSS

table tdの中のlinkのcss

1.table tdのcssは

td {
  write something;
}

2. table td にclassを付けた場合
例

<td class="selected">hoge</td>

cssは、

td.selected {
   write something;
}

3.table tdの中にlink(aタグ)のcss

td a{
  write something;
}

4.table classを付けたtdの中のlink(aタグ)のcss

<td class="selected"><a href="?param=hoge">foo</a></td>

cssは

td.selected a{
  write something;
}

下のキャプチャのように、classをつけているtdの中のaタグのcolorを#fffにできました。

tableにスケジュールを入れていく

初期画面

<style>
#tbl-bdr table,#tbl-bdr td,#tbl-bdr th {
border-collapse: collapse;
border: 1px solid #000000;
}
table td{
	width:45px;
}
</style>
<br>
<div id="tbl-bdr">
<table>
<tr>
<td></td><td>9:00</td><td>9:30</td><td>10:00</td><td>10:30</td><td>11:00</td><td>11:30</td><td>12:00</td><td>13:00</td><td>13:30</td><td>14:00</td><td>14:30</td><td>15:00</td><td>15:30</td><td>16:00</td><td>16:30</td><td>17:00</td>
</tr>
<tr>
<td>松島</td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
</tr>
<tr>
<td>小野</td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
</tr>
<tr>
<td>草野</td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
</tr>
</table>
</div>

テーブルはできたんですが、ここからどうすればいいのでしょうか？

セル毎にデフォルトは〇、if文でその時間帯が開始時間と終了時間の間であれば×を計算でしょうか。
いや、予約が入っているところだけ、計算した方が速いような気がします。
なんか凄い難しいぞ。
あ、仮置きで、9:00->a 9:30->b, 10:00->c, 10:30->d .. として、aが〇か×か判定の判定をfor文で回せばいいのでしょうか？　いや、for文で回すと$iと$jを入れ子で回すので、担当者のid(テーブル)を作る必要がありそうです。

あ、こういうことですかね？

$timelist = array(540, 570, 600, 630, 660, 690, 780, 810, 840, 870, 900, 930, 960, 990, 1020);

for($i=0; $i < count($timelist); $i++){
	if($timelist&#91;$i&#93; >= $result[0]['time1'] and $timelist[$i] < $result&#91;0&#93;&#91;'time2'&#93;){
		echo "予約あり<br>";
	}else{
		echo "予約なし<br>";
	}
}

小野:10:00～11:00 (60分)
予約なし
予約なし
予約あり
予約あり
予約なし
予約なし
予約なし
予約なし
予約なし
予約なし
予約なし
予約なし
予約なし
予約なし
予約なし

修正します。

$timelist = array(540, 570, 600, 630, 660, 690, 780, 810, 840, 870, 900, 930, 960, 990, 1020);
$list = array("予約可","予約可","予約可","予約可","予約可","予約可","予約可","予約可","予約可","予約可","予約可","予約可","予約可","予約可","予約可","予約可");

foreach($result as $value){
	for($i=0; $i < count($timelist); $i++){
	if($timelist[$i] >= $value['time1'] and $timelist[$i] < $value['time2']){
		 $list[$i] = "×";
	}
 }
}

a little close?

更に修正

@mediaでレスポンシブルを設計する

まず初期画面

mobileの場合は、1カラムで表示させたい。

amazonトップページのソースからcssを見るとどうやら、768pxと979pxで切り分けているので、メディアクエリ@mediaはひとまず768pxしたいと思います。

https://www.amazon.co.jp

@media (max-width:767px){.a-visible-phone{display:inherit!important}.a-hidden-phone{display:none!important}.a-hidden-desktop{display:inherit!important}.a-visible-desktop{display:none!important}}@media (min-width:768px) and (max-width:979px){.a-visible-tablet{display:inherit!important}

max-width:767pxの時は、float:leftとfloat:rightを解除します。

@media screen and (min-width: 767px) {
	#content{
	width:800px;
	margin:10px auto;
	}
	fieldset{
		border:1px #C0C0C0 solid;
	}
	h1 {
		display:inline;
	}
	#img {
		height:28px;
	}
	.form1{
	    margin-top: 1em;
	    padding: .5em;
	    size:80;
	}
	.submit1{
	    margin-top: 1em;
	    padding: .3em;
	}
	#owner{
		width:52%;
		float:left;
	}
	#map{
		width: 45%;
		float:right;
		height: 200px;
	}
}

@media screen and (max-width: 767px) {
	#content{
	width:75%;
	margin:5px auto;
	}
	fieldset{
		border:1px #C0C0C0 solid;
	}
	h1 {
		display:inline;
		font-size:18px;
	}
	#img{
		height:18px;
	}
	.form1{
	    margin-top: 1em;
	    padding: .5em;
	    size:25;
	}
	.submit1{
	    margin-top: 1em;
	    padding: .3em;
	}
	#owner{
		width:99%;
	}
	#map{
		width: 99%;
		margin-top:5px;
		height: 200px;
	}
}

一応、レスポンシブルになりました。
min768px

max767px

入力フォームをスタイリング

戦後のスカイラインのデザインはかっこよかったが、やはり、デザインはその時の時代背景が出ますね。。

<style>
.submit1 {
	height:30px;
	margin-top:5px;
	padding-right:15px;
	padding-left:15px;
	background-color:#0099FF;
	color:#fff;
	border:0px;
}
.submit1:active {
    -ms-transform: translateY(2px);
    -webkit-transform: translateY(2px);
    transform: translateY(2px);
    border-bottom: none;
}
.form2{
	height:30px;
}
textarea{
	padding-top:5px;
}
</style>

<form action="?compose=done" method="post" enctype="multipart/form-data">
			<br>
			<input type="text" class="form2" name="to" size="80%" value="<?php echo $to; ?>" placeholder="　宛先　※必須"  required><br>
			<br>
			<input type="text" class="form2" name="subject" value="<?php echo $subject; ?>" placeholder="　件名" size="80%"><br>
			<br>
			<textarea placeholder="　メッセージを入力してください　※必須"　name="body" rows="12" cols="82%" required></textarea>
			</p>
			<input type="file" id="files" name="files&#91;&#93;" multiple />
			<div id="caution">
			※送信できるファイルの拡張子は"gif","jpg","jpeg","png"の何れかです。<br>
			※ファイル送信は最大2つまでです。3つ以上選択しても、3つ目以降は送れません。また、二つのファイルを送信する場合は、キーボードの"ctl"ボタンなどで二つ選択した状態で開いてください。</div>
			<output id="list"></output>
			<p>
			<input type="submit" class="submit1" value="送信">
			</form>

なんか、hrがしょぼいですな。。

あ、hrもcssでスタイリングできるんですね♪

hr{
	height: 2px;
	background-color: #F8F8FF;
	color: #F8F8FF;
}

割といい

メールボックスをスタイリング

headerをつくっていきます。

.header-wrap{
	background-color:#222222;
	margin-bottom:10px;
}
.title-wrap{
   display:inline-block;
   vertical-align: bottom;
}
.title-wrap h1 {
	font-size:23px;
	padding-top:0px;
	padding-left:15px;
	margin-bottom:0px;
	color:#fff;
}
.title-wrap h2 {
	font-size:14px;
	margin-top:0px;
	padding-left:15px;
	padding-bottom:5px;
	color:#fff;
}
.out {
	display:inline;
	vertical-align: bottom;
	font-size:12px;
	float:right;
	padding-top:15px;
	padding-right:15px;
	color:#fff;
}

もう少し細くします。

flex-1, flex-2にヘッダーをつけます。

.side{
	height:12px;
	background-color:#E6FFE9;
}
.main{
	height:12px;
	background-color:#F5FFFA;
}

ul, li要素のlist-styleをnoneにします。

ul{
	list-style:none;
}
li{
	margin:7px;
}

まぁまぁOK

ログアウト画面の表示

<?php 

require("auth.php");
$auth = new Auth();
$auth->logout();

?>
お待ちください...
<script>
setTimeout(function(){
	window.location.href = "login.php";
}, 600);
</script>

gmailと一緒で、特にスタイリングはなしでOKですね。settimeは600msくらいにしておきます。

さあ、次は、form周りでしょうか。

CSSをどこに置くか？

inlineでやりたいところですが、複数のHTMLファイルに対して共通のCSSを適用するため、外部にフォルダを作成し、そこに入れて読み込むことが一般的かと思います。

<link rel="stylesheet" type="text/css" href="asset/css/styles.css" />

多数の人間が制作に関わった場合などは、パーツによって、このclassはxxx.cssファイル、このidはyyy.cssファイルを読み込む、など、1つのページでも複数のcssファイルを読み込むことがあります。

問題は、大規模サイトで、CSSファイルを5～6個位読み込んでいて、後からチームにジョインした人が改修しようとした際に、それぞれ書き方も別々の為、なにがなんだかわからなくなる、ということがあります。

そこで、コーディングガイドラインを作成しようとなります。
では、Googleのコーディングガイドラインをみてみましょう。

– Not reccomended

<!DOCTYPE html>
<title>HTML sucks</title>
<link rel="stylesheet" href="base.css" media="screen">
<link rel="stylesheet" href="grid.css" media="screen">
<link rel="stylesheet" href="print.css" media="print">
<h1 style="font-size: 1em;">HTML sucks</h1>
<p>I’ve read about this on a few sites but now I’m sure:
  <u>HTML is stupid!!1</u>
<center>I can’t believe there’s no way to control the styling of
  my website without doing everything all over again!</center>

-recommended

<!-- Recommended -->
<!DOCTYPE html>
<title>My first CSS-only redesign</title>
<link rel="stylesheet" href="default.css">
<h1>My first CSS-only redesign</h1>
<p>I’ve read about this on a few sites but today I’m actually
  doing it: separating concerns and avoiding anything in the HTML of
  my website that is presentational.
<p>It’s awesome!

外部ファイルは一つにして、そこから読み込むことが推奨されています。その他も参考になります。
https://google.github.io/styleguide/htmlcssguide.html#CSS_Style_Rules

dl要素とdt要素

まず、スタイリングしていない状態です。

<body>
	<form action="/" name="search1" method="post">
		<dl class="search1">
			<dt><input type="text" name="search" value="" placeholder="Search"></dt>
			<dd><button>Search</button></dd>
		</dl>
</body>


	<style>
	dl.search {
		position:relative;
	}
	dl.search dt{
		margin-right:105px;
		padding:8px;
		background-color:#fff;
		border:1px solid #aaa;
	}
	dl.search dd{
		position:absolute;
		top:0;
		right:0;
	}
	dl.search dt input{
		width:100%;
		height:24px;
		line-heigh:24px;
		background:none;
		border:none;
	}
	dl.search dd {
		position:absolute;
		top:0;
		right:0;
	}
	dl.search dd button{
		display:block;
		width:100px;
		height:42px;
		color:#fff;
		line-height:40px;
		text-align:center;
		background-color:#f66;
		border:1px solid #c66;
	}
	</style>

css trigger

css trigger
https://csstriggers.com/

var isSetup = setupVariables(e);
if(isSetup){
	setInterval(captureFrame.bind(self), 4);
}
else {
	setTimeout(function(){
		setupVariables(e);

		setInterval(captureFrame.bind(self), 4);
	}, 100);
}

var captureFrame = function(){
	canvas.drawImage(cameraVideo, sx /scaleFactor, sy/scaleFactor, sWidth/scaleFactor,
		sHeight/scaleFactor, dx, dy, dWidth, dHeight);

		drawOverlay(dWidth, dHeight, scaleFactor);

		if(self.onframe) self.onframe();

		coordinatesHaveChanged = false;
};

gulp serve command

[vagrant@localhost qrcode]$ gulp serve
[21:54:17] Using gulpfile ~/webapp/app/qrcode/gulpfile.js
[21:54:17] Starting 'styles'...
[21:54:18] styles all files 26.07 kB
[21:54:18] Finished 'styles' after 1.46 s
[21:54:18] Starting 'serve'...
[21:54:19] Finished 'serve' after 505 ms
[WSK] Local URL: http://localhost:3000
[WSK] External URL: http://10.0.2.15:3000
[WSK] Serving files from: .tmp
[WSK] Serving files from: app

flex-box

<style tyle="text/css">
      .container {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
      }
      .box {width: 150px;}
 </style>

column drop, off canvas, layout shifter, mostly fluid

media query

<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" media="screen and (min-width:500px)" href="over500.css">

media query within a style sheet.

@media screen and (min-width: 500px){
	body { color: #F79420; }
}

@media screen and (min-width: 800px){
	body { background-color: blue; }
}

frequently used max-width and min-width

@media screen and (max-width: 500px){
	.yes {
		opacity: 1;
	}
	. no {
		opacity: 0;
	}
}

change background-color with width.

body {
	  	background-color: green;
	  }
  	  @media screen and (max-width: 400px) {
        body {
        background-color: red;
        }
      }
  	  @media screen and (min-width: 600px) {
        body {
        background-color: blue;
        }
      }

developer tool help you to decide media query
%e7%84%a1%e9%a1%8c