Category: CSS

table tdの中のlinkのcss

1.table tdのcssは

1
2
3
td {
  write something;
}

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

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

cssは、

1
2
3
td.selected {
   write something;
}

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

1
2
3
td a{
  write something;
}

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

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

cssは

1
2
3
td.selected a{
  write something;
}

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

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

初期画面

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<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(テーブル)を作る必要がありそうです。

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

1
2
3
4
5
6
7
8
9
$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を解除します。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
@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

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<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でスタイリングできるんですね♪

1
2
3
4
5
hr{
    height: 2px;
    background-color: #F8F8FF;
    color: #F8F8FF;
}

割といい

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

headerをつくっていきます。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
.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にヘッダーをつけます。

1
2
3
4
5
6
7
8
.side{
    height:12px;
    background-color:#E6FFE9;
}
.main{
    height:12px;
    background-color:#F5FFFA;
}

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

1
2
3
4
5
6
ul{
    list-style:none;
}
li{
    margin:7px;
}

まぁまぁOK

ログアウト画面の表示

1
2
3
4
5
6
7
8
9
10
11
12
13
<?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を適用するため、外部にフォルダを作成し、そこに入れて読み込むことが一般的かと思います。

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

1
2
3
4
5
6
7
8
9
10
<!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

1
2
3
4
5
6
7
8
9
<!-- 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要素

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

1
2
3
4
5
6
7
<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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<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/

1
2
3
4
5
6
7
8
9
10
11
var isSetup = setupVariables(e);
if(isSetup){
    setInterval(captureFrame.bind(self), 4);
}
else {
    setTimeout(function(){
        setupVariables(e);
 
        setInterval(captureFrame.bind(self), 4);
    }, 100);
}
1
2
3
4
5
6
7
8
9
10
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

1
2
3
4
5
6
7
8
<style tyle="text/css">
      .container {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
      }
      .box {width: 150px;}
 </style>

column drop, off canvas, layout shifter, mostly fluid