Q&Aの見出しをCCSで装飾(邪道?)

[ccs]
#qa dt .q {
padding:2px 5px 2px 5px;
background-color:orangered;
color:#fff;
margin-right:5px;
}
#qa dd .a {
padding:2px 5px 2px 5px;
background-color:orangered;
color:#fff;
margin-right:5px;
}
[/ccs]

邪道かな。やっぱimgでやるべきか。。

Specifying multiple elements in CCS

Specify CCS by separating element name + class name with comma.
The same style can be applied by separating element name + class name with comma.
[ccs]
#right-contents input[type=”text”], #right-contents input[type=”email”], #right-contents [type=”number”] {
width: 45%;
height: 3.5%;
border-radius: 5px;
background-color: #a9a9a9;
color: #f5f5f5;
padding-left: 3%;
font-size: 15px;
}
[/ccs]

なるほど~

delete part of table td border:border-right-style: hidden

<table border="1">
		<tr id="title">
			<td colspan="3">検索条件</td>
		</tr>
		<tr>
			<td>hoge</td>
			<td></td>
			<td style="border-right-style: hidden;border-bottom-style: hidden;"></td>
		</tr>
		<tr>
			<td>hoge</td>
			<td>姓 名</td>
		</tr>
		<tr>
			<td>hoge</td>
			<td></td>
		</tr>
		<tr>
			<td>hoge</td>
			<td> </td>
		</tr>
		<tr>
			<td>hoge</td>
			<td> </td>
		</tr>
		<tr>
			<td>hoge</td>
			<td> </td>
		</tr>
	</table>

芸がこまけー

create menu with dl, dt, dd

html

<body>
	<hr>
    <div class="container">
    <div class="menu">
    	<dl>
    		<dt>機能</dt>
    		<dd><a href="">管理<a></dd>
    		<dd><a href="">管理<a></dd>
    		<dd><a href="">管理<a></dd>
    	</dl>
    	<dl>
    		<dt>機能</dt>
    		<dd><a href="">管理<a></dd>
    		<dd><a href="">管理<a></dd>
    		<dd><a href="">管理<a></dd>
    	</dl>
    	<dl>
    		<dt>パスワード変更</dt>
    		<dd><a href="">パスワード変更</a></dd>
    	</dl>
    	<dl>
    		<dt>機能</dt>
    		<dd><a href="">管理<a></dd>
    		<dd><a href="">管理<a></dd>
    		<dd><a href="">管理<a></dd>
    	</dl>
    </div>
    <div class="main">
	<p>テキストが入ります</p>
    </div>
	</div>
</body>

css

.menu dt {
	border-bottom:1px solid gray;
	border-left:1px solid gray;
	padding-left: 10px;
	margin-bottom:5px;
}
.menu dd {
	font-size:14px;
}

view

quite better than expected

make login form css

coding a form appropriately

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>ログイン|入稿管理支援システム</title>
	<link rel="stylesheet" type="text/css" href="asset/css/styles.css" />
</head>
<header>
	<p><a href="index.html">Hpscript</a></p>
	<nav>
		<p>入稿管理支援システム</p>
	</nav>
</header>
<body>
    <div id="content">
	<h1>ログイン</h1>
	<form action="cgi-bin/hoge.cgi" method="post">
		<p>
		    ユーザーID:<input type="text" name="login_id" size="20">
		</p>
		<p>
		    パスワード:<input type="text" name="password" size="20">
		</p>
		<p>
		    <input type="submit" value="ログイン">
		</p>
	</form>
	</div>
</body>
</html>

In a sense this is already fine, but i want to it center.

#content {
	margin-top:100px;
	text-align:center;
}
#content h1{
	font-size: 16px;
	margin-bottom:40px;
}

well, finally reaching the point.

css: left logo and right menu

start with making parts first.

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>ログイン|入稿管理支援システム</title>
	<link rel="stylesheet" type="text/css" href="asset/css/styles.css" />
</head>
<header>
	<p><a href="index.html">Hpscript</a></p>
	<nav>
		<p>入稿管理支援システム</p>
	</nav>
</header>
<body>
	<h1>ログイン</h1>
	<form>
		<p>ユーザーID</p><br>
		<p>パスワード</p><br>
		<p>ログイン</p><br>
	</form>
</body>
</html>

fix log and menu position with “position absolute”
styles.css

header {
	text-align: right;
}

header p a {
	position: absolute;
	font-size: 1.25em;
	left: 20px;
	top: 20px;
}
header nav p {
	margin-top: 30px;
	margin-right: 40px;
}

Could i write down a line with css?

header {
	text-align: right;
}
header p a {
	position: absolute;
	font-size: 1.25em;
	left: 20px;
	top: 20px;
}
header nav p {
	position: absolute;
	top: 15px;
	right: 20px;
	width:220px;
	border-bottom: 1px solid;
}
#content {
	margin-top:80px;
}

fixed, it took 40 minutes to adjust this header layout, lol.

ヘッダー(header)を最前面に表示するz-index

プルダウン式のheaderを作っていたのですが、
おいおいおい、なんだこれは、ヘッダーよりもstepのボックスの方が全面に表示されているじゃないか。
ピッツバーグ美術館に飾られているモダンアートみたいになってるぞ。

ヘッダーのプルダウンを最前面に表示したいとき。

cssでz-indexを指定する

mozillaを見てみましょう。
Z-index
The z-index CSS property sets the z-order of a positioned element and its descendants or flex items. Overlapping elements with a larger z-index cover those with a smaller one.

z-indexの値が大きい方が全面に表示されます。下記例だとgoldが最前面です。

では実際にやってみましょう。
stepの該当箇所 z-indexの値を0にします。

.step {
  list-style-type: none;
  display:table;
  width:100%;
  height:50px;
  padding: 0;
  margin: 0;
  overflow:hidden;
  z-index: 0;
}

navigationのcss, z-indexを1にします。

#gNav {
	position: absolute;
	margin-top: 40px;
	float: left;
	width: 100%;
	height:45px;
	background-color: #6a5acd;
	z-index: 1;
}

おいおい、沖縄みたいに浮いてるぞ。

stepを全てz-index:0に変えます。

li.is-current{
	z-index:0;
}

上手く表示されるようになりました。

アラートメッセージのCSS

バリデーションメッセージのフォントカラーを変えたい。
まず、参考サイトとして、netflixのソースコードを見てみます。

<div id="" class="inputError">有&#65279;効&#65279;なメ&#65279;ー&#65279;ルア&#65279;ド&#65279;レ&#65279;スま&#65279;た&#65279;は電&#65279;話番&#65279;号&#65279;を入&#65279;力し&#65279;てく&#65279;ださ&#65279;い&#65279;。</div>

div.class で inputErrorとしてますね。なるほど。

laravelのbladeに inputErrorを追加します。

<table id="tbl">
        @csrf        
        <tr>
          <th>会社名</th><td><input type="text" name="company_name" size="40"  value="{{ old('company_name') }}"><div class="inputError">{{$errors->first('company_name')}}</div></td>
        </tr>
        <tr>
          <th>代理店</th><td><input type="text" name="agent_name" size="40"  value="{{ old('agent_name') }}"><div class="inputError">{{$errors->first('agent_name')}}</div></td>
        </tr>
      </table>

cssにinputErrorを追加します。
main.css

.inputError {
	color:red;
}

バリデーションメッセージのフォントカラーが変わりました。割と普通だ。