Category: CSS

背景のみopacityを設定するには

background-colorとopacityを設定すると、テキストまで透過してしまう。

1
2
3
4
5
6
7
8
9
10
#judge{
    margin-top:15px;
    opacity:0.5;
    background-color:#ff6347;
    width:100%;
    padding-top:5px;
    padding-bottom:5px;
    text-align:center;
    color:#fff;
}

rgbに変える。

1
2
3
4
5
6
7
8
9
#judge{
    margin-top:15px;
    background:rgb(255,99,71,0.5);
    width:100%;
    padding-top:5px;
    padding-bottom:5px;
    text-align:center;
    color:#fff;
}

ぬ、colorが#fffだから変更が目立たないorz

フォームでdatepickerを邪魔する自動補完を無効化

autocomplete=”off” とする。

1
2
3
<tr>
          <th>配信日</th><td><input type="text" name="login" size="40"  value="" autocomplete="off"　id="datepicker"></td>
        </tr>

datepickerと表示が被るのでレイヤーが上の自動補完が邪魔くさいな～と思っていましたが、autocompleteの指定で割と簡単に消せましたね。

stepバーを作ろう

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
68
69
70
71
72
<!Doctype html>
<html>
<head>
    <meta charset="UTF-8">
<style>
.step {
  list-style-type: none;
  display:table;
  width:100%;
  padding: 0;
  margin: 0;
  overflow:hidden;
}
.step li {
  display:table-cell;
  position: relative;
  background: #504944;
  padding: 1em 0.5em 1em 2em;
  color: #fff;
}
.step li:last-child {
  padding-right: 1em;
}
.step li:last-child:before,
.step li:last-child:after {
  display:none;
}
.step li:before,
.step li:after{
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  margin: auto;
}
.step li:before{
  top:-15px;
  right:-1em;
  border-style: solid;
  border-color:transparent transparent transparent #fff;
  border-width: 40px 0 40px 1em;
  z-index: 10;
}
.step li:after {
  top:-15px;
  right:-.8em;
  border-style: solid;
  border-color:transparent transparent transparent #504944;
  border-width: 40px 0 40px 1em;
  z-index: 10;
}
.step li.is-current {
  background: #9bbb30;
  font-weight: bold;
}
.step li.is-current:after{
  border-color: transparent transparent transparent #9bbb30;
}
 
</style>
 
</head>
<body>
    <div class="mermaid">
      <ol class="step">
        <li class="is-current">STEP1</li>
        <li>STEP2</li>
        <li>STEP3</li>
      </ol>
    </div>
</body>
</html>

OKOK ^^!

さあ、これを当てはめていきましょう♪

cssでページネーション

html

1
2
3
4
5
6
7
8
9
10
11
12
<!-- ページネーション -->
      <div class="pageNav">
        <ul class="pageNav01">
         <li><a href="">&laquo; 前</a></li>
          <li><span>1</span></li>
          <li><a href="">2</a></li>
          <li><a href="">3</a></li>
          <li><a href="">4</a></li>
         <li><a href="">次 &raquo;</a></li>
        </ul>
      </div>
      <!-- / ページネーション -->

css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
ul.pageNav01 {
    margin: 0 0 10px;
    padding: 10px 10px 5px;
    text-align: center;
}
ul.pageNav01 li{
    display: inline;
    margin: 0 2px;
    padding: 0;
}
ul.pageNav01 li span,
ul.pageNav01 li a{
    display: inline-block;
    margin-bottom:5px;
    padding: 1px 8px;
    background: #fff;
    border: 1px solid #aaa;
    text-decoration: none;
    vertical-align: middle;
}
ul.pageNav01 li a:hover{
    background: #eeeff7;
    border-color: #00f;
}

うーん、border solidはいらない気もするが、まーいいか。

cssでthのないtableをスタイリング

まずhtml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div id="content">
      <h2>プロフィール詳細</h2>
      <hr>
      <table id="tbl">
        <tr>
          <th>ログインID</th><td>user1</td>
        </tr>
        <tr>
          <th>ログインID</th><td>user1</td>
        </tr>
        <tr>
          <th>ログインID</th><td>user1</td>
        </tr>
      </table>
    </div>

css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
#content table#tbl{
    width:100%;
    margin: 20px 0;
    border-top: 1px solid #ccc;
    border-left: 1px solid #ccc;
    border-spacing: 0;
}
#content table#tbl tr th,
#content table#tbl tr td{
    border-bottom: 1px solid #ccc;
    border-right: 1px solid #ccc;
    border-spacing: 0.5em;
    padding: 5px;
}
#content table#tbl tr th {
    background: #e6eaff;
    width:20%;
}

あれ、おかしい、思ったより悪くない。。それはそれでなんかあかんな

とりあえずlaravelをイメージしながら仮データを入れていきます。

cssでパンくずを作成する

まずhtml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!-- パンくず -->
    <ul class="breadcrumb">
      <li itemscope="itemscope" itemtype="http://data-vocabulary.org/Breadcrumb" >
        <a href="/top" itemprop="url">
          <span itemprop="title">ホーム</span>
        </a>
      </li>
      <li itemscope="itemscope" itemtype="http://data-vocabulary.org/Breadcrumb" >
        <a href="/top" itemprop="url">
          <span itemprop="title">プロフィール詳細</span>
        </a>
      </li>
    </ul>
    <!-- / パンくず -->

続いてcss
:before、content:none なんて書き方あるんですな。ひょえーーーーーーーーー

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
ul.breadcrumb {
    margin-left:10px;
}
ul.breadcrumb li{
    display: inline;
    margin-left: 10px;
    font-size: 12px;
}
ul.breadcrumb li:before{
    margin-right: 10px;
    content:" > ";
}
ul.breadcrumb li:first-child:before{
    content: none;
}

view

cssは触らずhtmlだけ編集します。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!-- パンくず -->
    <ul class="breadcrumb">
      <li itemscope="itemscope" itemtype="http://data-vocabulary.org/Breadcrumb" >
        <a href="/top" itemprop="url">
          <span itemprop="title">ホーム</span>
        </a>
      </li>
      <li itemscope="itemscope" itemtype="http://data-vocabulary.org/Breadcrumb" >
        <a href="/top" itemprop="url">
          <span itemprop="title">プロフィール詳細</span>
        </a>
      </li>
      <li itemscope="itemscope" itemtype="http://data-vocabulary.org/Breadcrumb" >
        <a href="/top" itemprop="url">
          <span itemprop="title">山田太郎</span>
        </a>
      </li>
    </ul>
    <!-- / パンくず -->

ほーーーーーーーー

divタグを編集していこう

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
#content #top-main {
    margin-top: 80px;
    background-color: #e6e6fa;
    padding: 20px;
}
#content #top-main h2 {
    margin-bottom: 5px;
}
 
#news_h {
    margin-top: 20px;
    padding-left: 20px;
    padding-top: 2px;
    padding-bottom: 2px;
    background-color:#a9a9a9;
}
#news_t {
    margin-top: 20px;
    padding-left: 20px;
}


あら、topページできました。
続いて、詳細ページテンプレートを作っていきます。

cssの命名規則

CSSはハイフン(foo-bar)1、JavaScriptはCamel(fooBar)、Rubyはsnake(foo_bar)文化。

ということで、ハイフンで書いていきます。

1
2
3
4
5
6
<div id="content">
      <div id="top-main">
         <h2>Zeus</h2>
         <p>hogehoge。</p>
      </div> 
    </div>

normalize.cssのcdnを使おう

cdnのページからコピペします。
https://cdnjs.com/libraries/normalize

tpl.php

1
2
3
4
5
6
7
8
9
<head>
    <meta http-equiv="Content-Type" charset="utf-8">
    <title></title>
    <meta name="description" content="" />
    <link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.0/normalize.css" rel="stylesheet">
    <link rel="stylesheet" href="asset/css/style.css">
    <link rel="stylesheet" href="asset/css/main.css">
    <script src=""></script>
  </head>

うむ、なんか良いかも。

テンプレートを作ったら、あとは、body の div > content の中身を作っていきます。
なんだろう、この感じ。。ここにきてちょっとワクワクしてきたぞ。

その前に。。。font-awesomeを入れるか。

プルダウンのヘッダーcss

相当苦戦したが。。。

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
68
69
70
71
72
73
74
75
#header {
    position: relative;
    height: 45px;
    margin-bottom: 5px;
    font-size: 14px;
}
#header img {
    vertical-align:top;
}
#header h1 {
    float:left;
    font-size: 20px;
    width: 173px;
    margin-top:10px;
    margin-bottom:0px;
}
 
#header #helpNav {
    position:absolute;
    top:0;
    right:0;
    margin-right: 15px;
}
#header #helpNav li {
    display: inline;
    margin-left: 10px;
}
 
#gNav {
    margin-top: 0px;
    float: left;
    width: 100%;
    height:45px;
    background-color: #6a5acd;
}
#gNav li.menu__single {
    position: relative;
    display: inline;
    float: left;
    width: 105px;
    height: 45px;
    line-height: 45px;
    padding-left:15px;
    padding-right:15px;
    background-color:#6a5acd;
}
#gNav li.menu__single a {
    display: block;
    color:#fff;
}
#gNav li.menu__single a:hover {
    display: block;
    color:#999;
}
li.menu__single ul.second_level{
    display:none;
}
li.menu__single:hover ul.second_level{
    position: absolute;
    display: inline;
    top: 45px;
    width: 110px;
    padding-left:10px;
    padding-right:10px;
    background: #6a5acd;
    visibility: visible;
    opacity: 1;
    -webkit-transition: all .2s ease;
    transition: all .2s ease;
}
li.menu__single:hover ul.second_level li{
    display: inline;
    padding-left: 0px;
    font-size:12px;
}

大体やりたいことは実装できた模様♪

さーコンテンツ作っていきますよ！