Skip to content

Instantly share code, notes, and snippets.

@shimakyohsuke

shimakyohsuke/style.css

Created June 21, 2015 09:23
Show Gist options
  • Save shimakyohsuke/bbf8c290d52398f6a929 to your computer and use it in GitHub Desktop.
Save shimakyohsuke/bbf8c290d52398f6a929 to your computer and use it in GitHub Desktop.
Download ZIP
d2d.html
Raw
gistfile1.txt
<!DOCTYPE html>
<html lang="ja-JP">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="format-detection" content="telephone=no">
<meta name="viewport" content="width=1024">
<title>siteTitle XXX</title>
<link rel="shortcut icon" type="image/vnd.microsoft.icon" href="http://example.comimages/common/favicon.ico">
<link rel="stylesheet" href="/style.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://example.comjs/application.js"></script>
</head>
<body>
<!-- .l-wrap -->
<div class="l-wrap">
<!-- .l-centering__bef -->
<div class="l-centering__bef">
<!-- .l-centering__aft -->
<div class="l-centering__aft">
<div class="row">
<header>
<h1><img src="images/sitelogo.png" alt=""></h1>
<div class="mod_search">
<form action="" method="get" class="search-form">
<label for="s">
<input type="text" class="search-input" value="" name="s" id="s" />
<input type="submit" class="searchsubmit" value="検索" />
</label>
</form>
</div>
<!-- mod_search_end -->
</header>
</div>
<div class="row">
<h2>新規会員登録<span class="text-small">※必須項目です。</span></h2>
</div>
<div class="mod_form">
<form method="post" action="">
<h3>住所</h3>
<div class="mod_form_wrapper">
<dl class="first">
<dt>
<label for="postnum">郵便番号</label>&nbsp;<span class="ex_essential">※</span></dt>
<dd>
<input type="text" id="postnum" value="" autofocus aria-required="true" title="前の3桁"/>
ー
<input type="text" value="" aria-required="true" title="後ろの4桁"/>
</dd>
</dl>
<dl>
<dt>
<label for="address01">都道府県</label>
&nbsp;<span class="ex_essential">※</span></dt>
<dd>
<select id="address01" aria-required="true">
<option value="" selected="selected">--選択してください--</option>
<optgroup label="北海道・東北">
<option value="北海道">北海道</option>
<option value="青森県">青森県</option>
<option value="秋田県">秋田県</option>
<option value="岩手県">岩手県</option>
<option value="山形県">山形県</option>
<option value="宮城県">宮城県</option>
<option value="福島県">福島県</option>
</optgroup>
<optgroup label="甲信越・北陸">
<option value="山梨県">山梨県</option>
<option value="長野県">長野県</option>
<option value="新潟県">新潟県</option>
<option value="富山県">富山県</option>
<option value="石川県">石川県</option>
<option value="福井県">福井県</option>
</optgroup>
<optgroup label="関東">
<option value="茨城県">茨城県</option>
<option value="栃木県">栃木県</option>
<option value="群馬県">群馬県</option>
<option value="埼玉県">埼玉県</option>
<option value="千葉県">千葉県</option>
<option value="東京都">東京都</option>
<option value="神奈川県">神奈川県</option>
</optgroup>
<optgroup label="東海">
<option value="愛知県">愛知県</option>
<option value="静岡県">静岡県</option>
<option value="岐阜県">岐阜県</option>
<option value="三重県">三重県</option>
</optgroup>
<optgroup label="関西">
<option value="大阪府">大阪府</option>
<option value="兵庫県">兵庫県</option>
<option value="京都府">京都府</option>
<option value="滋賀県">滋賀県</option>
<option value="奈良県">奈良県</option>
<option value="和歌山県">和歌山県</option>
</optgroup>
<optgroup label="中国">
<option value="岡山県">岡山県</option>
<option value="広島県">広島県</option>
<option value="鳥取県">鳥取県</option>
<option value="島根県">島根県</option>
<option value="山口県">山口県</option>
</optgroup>
<optgroup label="四国">
<option value="徳島県">徳島県</option>
<option value="香川県">香川県</option>
<option value="愛媛県">愛媛県</option>
<option value="高知県">高知県</option>
</optgroup>
<optgroup label="九州・沖縄">
<option value="福岡県">福岡県</option>
<option value="佐賀県">佐賀県</option>
<option value="長崎県">長崎県</option>
<option value="熊本県">熊本県</option>
<option value="大分県">大分県</option>
<option value="宮崎県">宮崎県</option>
<option value="鹿児島県">鹿児島県</option>
<option value="沖縄県">沖縄県</option>
</optgroup>
</select>
</dd>
</dl>
<dl>
<dt>
<label for="address02">市区町村</label>
&nbsp;<span class="ex_essential">※</span></dt>
<dd>
<input type="text" id="address01" value="" aria-required="true"/>
</dd>
</dl>
<dl class="last">
<dt>
<label for="address03">番地・マンション名</label>
&nbsp;<span class="ex_essential">※</span></dt>
<dd>
<input type="text" id="address03" value="" aria-required="true"/>
</dd>
</dl>
</div>
<h3>お名前・性別</h3>
<div class="mod_form_wrapper">
<dl class="first">
<dt> 氏名
&nbsp;<span class="ex_essential">※</span></dt>
<dd>
<label for="name01">性</label>
<input type="text" id="name01"value="" aria-required="true"/>
<label for="name02">名</label>
<input type="text" id="name02"value="" aria-required="true"/>
</dd>
</dl>
<dl>
<dt id="kanalabel"> 氏名（ふりがな）
&nbsp;<span class="ex_essential">※</span></dt>
<dd>
<label for="kana01">性</label>
<input type="text" id="kana01"value="" aria-required="true"/>
<label for="kana02">名</label>
<input type="text" id="kana02"value="" aria-required="true"/>
<span aria-labelledby="kanalabel">ひらがなで入力してください。</span> </dd>
</dl>
<dl class="last">
<dt id="character"> 性別
&nbsp;<span class="ex_essential">※</span></dt>
<dd>
<input type="radio" class="checkitem" value="男性" id="character_m" aria-describedby="character"/>
<label for="character_m">男性</label>
&nbsp;
<input type="radio" class="checkitem" value="女性" id="character_w" aria-describedby="character"/>
<label for="character_w">女性</label>
</dd>
</dl>
</div>
<h3>連絡先</h3>
<div class="mod_form_wrapper">
<dl class="first">
<dt>
<label for="tel">電話番号</label>&nbsp;<span class="ex_essential">※</span>
</dt>
<dd>
<input type="text" id="tel" value="" aria-required="true" title=""/>
-
<input type="text" value="" aria-required="true" title=""/>
-
<input type="text" value="" aria-required="true" title="" />
</dd>
</dl>
<dl>
<dt>
<label for="mail">メールアドレス</label>&nbsp;<span class="ex_essential">※</span>
</dt>
<dd>
<input type="text" id="mail" value="" aria-required="true"/>メールアドレスは<br />半角6文字以上で入力してください<br />半角英数で入力してください。
</dd>
</dl>
<dl class="last">
<dt><label for="mail02">メールアドレス確認用</label>&nbsp;<span class="ex_essential">※</span></dt>
<dd>
<input type="text" id="mail02"value="" aria-required="true"/>確認のため再度入力してください</dd>
</dl>
</div>
<dl>
<p><input type="checkbox" id="privacy" name="" value="利用規約及びポリシーに同意します。" />利用規約及びポリシーに同意します。</p>
</dl>
<div class="mod_form_btn">
<p><input type="submit" class="submit" value="確認する" /></p>
<!--mod_form_btn_end-->
</div>
</form>
</div>
</div>
<!-- /.l-centering__aft -->
</div>
<!-- /.l-centering__bef -->
</div>
<!-- /.l-wrap -->
</body>
</html>
Raw
style.css
@charset "utf-8";
a,
abbr,
acronym,
address,
applet,
article,
aside,
audio,
b,
big,
blockquote,
body,
caption,
canvas,
center,
cite,
code,
dd,
del,
details,
dfn,
dialog,
div,
dl,
dt,
em,
embed,
fieldset,
figcaption,
figure,
form,
footer,
header,
hgroup,
h1,
h2,
h3,
h4,
h5,
h6,
html,
i,
iframe,
img,
ins,
input,
label,
legend,
li,
mark,
menu,
nav,
object,
ol,
output,
option,
p,
pre,
q,
ruby,
s,
samp,
section,
select,
small,
span,
strike,
strong,
sub,
summary,
tt,
table,
tbody,
textarea,
tfoot,
thead,
time,
tr,
th,
td,
u,
ul,
var,
video {
margin: 0;
padding: 0;
}
article,
aside,
canvas,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
summary {
display: block;
}
ol,
ul {
list-style: none;
}
blockquote,
q {
quotes: none;
}
:focus {
outline: 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
padding: 0;
}
address {
font-style: normal;
}
a {
outline: none;
-webkit-tap-highlight-color: rgba(0,0,0,0);
text-decoration: none;
}
a hover {
text-decoration: none;
}
a img {
outline: none;
}
img {
width: auto;
height: auto;
max-width: 100%;
margin: 0px;
vertical-align: top;
font-size: 0;
outline: none;
}
body {
font-family: 'ヒラギノ角ゴシック Pro W3', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, sans-serif;
font-size: 100%;
}
.l-wrap {
width: 100%;
height: auto;
float: left;
position: relative;
overflow: hidden;
}
.l-centering__bef,
.l-centering__aft {
width: 830px;
height: auto;
float: left;
position: relative;
top: 0;
}
.l-centering__bef {
left: 50%;
}
.l-centering__aft {
left: -50%;
}
.mod_search {
width: 50%;
margin-top: 30px;
float: right;
}
.search-input {
float: left;
width: 270px;
height: 28px;
margin: 0 5px 0 0;
padding: 0;
border: solid 1px #e6e6e6;
}
.searchsubmit {
float: left;
width: 38px;
height: 30px;
margin: 0;
padding: 0;
color: #fff;
text-align: center;
background-color: #d33382;
background-image: url("btn_search.png");
border: none;
cursor: pointer;
overflow: hidden;
text-indent: 100%;
white-space: nowrap;
}
.submit {
width: 272px;
height: 61px;
margin: 0;
padding: 0;
color: #fff;
text-align: center;
background-color: #d33382;
background-image: url("btn_submit_m.png");
border: none;
cursor: pointer;
overflow: hidden;
text-indent: 100%;
white-space: nowrap;
}
.submit:hover {
opacity: 0.7;
filter: alpha(opacity=70);
}
h1 {
width: 50%;
margin-top: 30px;
float: left;
}
h2 {
width: 395px;
font-size: 188%;
font-weight: 400;
line-height: 113.33333333333333%;
border-bottom: 5px solid #d33382;
margin-top: 45px;
}
h2 span.text-small {
font-size: 70%;
}
.row {
width: 100%;
height: auto;
float: left;
}
.mod_form h3 {
margin-top: 20px;
}
.mod_form select {
border-radius: 0;
background-color: #fff;
}
.mod_form option {
border-radius: 0;
}
.mod_form input[type=text],
.mod_form input[type=tel],
.mod_form input[type=email],
.mod_form select,
.mod_form textarea {
box-sizing: border-box;
box-shadow: none;
border: 1px #ccc solid;
}
.mod_form input[type=text],
.mod_form input[type=tel],
.mod_form input[type=email],
.mod_form textarea,
.mod_form select,
.mod_form button {
font-family: 'ヒラギノ角ゴシック Pro W3', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, sans-serif;
}
.mod_form input[type=text],
.mod_form input[type=tel],
.mod_form input[type=email],
.mod_form select {
min-height: 30px;
line-height: 53.333333333333336%;
}
input.w340 {
width: 340px !important;
height: auto;
float: left;
}
input.w186 {
width: 186px !important;
height: auto;
float: left;
}
.mod_form h3 {
font-size: 0.9em;
font-weight: normal;
margin-top: 20px;
margin-bottom: 20px;
}
.mod_form dl {
font-size: 0.9em;
}
.ex_essential {
color: #ac3c28;
}
.mod_form_wrapper {
width: 810px;
border: solid 2px #ccc;
border-radius: 10px;
}
.mod_form_wrapper dl {
display: table-row;
}
.mod_form_wrapper dl dt,
.mod_form_wrapper dl dd {
display: table-cell;
margin: 10px;
padding: 30px 30px;
text-align: left;
}
.mod_form_wrapper dl dt {
width: 200px;
background-color: #fafafa;
border-right: solid 1px #ccc;
border-top: solid 1px #ccc;
}
.mod_form_wrapper dl dd {
width: 610px;
border-top: solid 1px #ccc;
}
.mod_form_wrapper dl.first dt,
.mod_form_wrapper dl.first dd {
border-top: none;
}
.mod_form_wrapper dl.first dt {
border-top: none;
border-radius: 10px 0 0 0;
}
.mod_form_wrapper dl.last dt {
border-radius: 0 0 0 10px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment