BEMとは

BEMとは
– フロントエンドの設計方法
– Block、Element、Modifier
– 厳格なclass名の命名ルール
https://en.bem.info/methodology/

背景
– スタイルの優先順位の指定が難しい
– !importantの多用
– パーツを別の場所に流用すると表示が崩れる
– 制作者本人しかわからないclass名

制作ボリュームが膨大になった時、全体像を誰も理解できないってのはよくありますね。
特に、長いサービスだと、前任者が全員退職して、知っている人がいないとか。

BEMではパーツをBlockと呼ぶ
Blockはid属性ではなく、classを使う
※idは1ページ1回、classは重複利用可能
Blockは入れ子にしない

ElementはBlockの構成要素
Elementのclass名はblockの構成要素名を入れる

.search
.search__input
.search__button
[css]

Modiferは既存のBlockやElementと似た物を作りたいとき
[css]
<ul class="list  list_type_disc">
  <li class="list__item"></li>
  <li class="list__item"></li>
  ...
</ul>
 
<ul class="list  list_type_check">
  <li class="list__item"></li>
  <li class="list__item"></li>
  ...
</ul>

BEMでは、block, element, modiferで一貫したセパレーター(_)を使う

modife: Block_key_value
単語はハイフン(-)もしくはキャメルケースなど

で、BEMはどれ位使われているかというと、50%くらい
50%といえば、かなりの割合ですなー

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;
}

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