-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
112 lines (112 loc) · 7.74 KB
/
index.html
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
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="description" content="D2D公式サイト。ウェブのテクニカルな内容とデザイン的な内容を横断した、特定のプロダクトや技術に限定しない勉強会。">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>D2D(Dev&Design Draft)</title>
<link rel="stylesheet" href="style.css" media="all">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
// #で始まるアンカーをクリックした場合に処理
$('a[href^=#]').click(function() {
// スクロールの速度
var speed = 700; // ミリ秒
// アンカーの値取得
var href= $(this).attr("href");
// 移動先を取得
var target = $(href == "#" || href == "" ? 'html' : href);
// 移動先を数値で取得
var position = target.offset().top;
// スムーススクロール
$('body,html').animate({scrollTop:position}, speed, 'swing');
// return false;
});
});
</script>
</head>
<body>
<header role="banner">
<h1 id="logo"><img src="img/logo.png" alt="D2D(Dev&Design Draft)" width="394" height="97"></h1>
<nav role="navigation">
<ul><li><a href="#activity">活動紹介</a></li><li><a href="#about">D2Dとは</a></li><li class="nav_external"><a href="https://d2draft.doorkeeper.jp/events#upcoming-events">イベント一覧<img class="externallink" alt="D2DRAFTイベント一覧サイト" src="img/icon_external.png"></a></li><li><a href="#contact">お問合せ</a></li></ul>
</nav>
</header>
<figure>
<img src="img/mainvisual.jpg" alt="写真:勉強会の様子" width="1280" height="458">
<figcaption><p>気になること、本当に知りたいこと。</p><p>ここにあり<span aria-hidden="true">〼</span><span class="not_appeared">ます</span>。</p></figcaption>
</figure>
<main role="main">
<section id="activity" tabindex="0">
<div class="inner">
<h2>活動紹介</h2>
<div class="float_r">
<h3>第6回 D2D アクセシビリティ勉強会</h3>
<img src="img/img_d2dstudy.jpg" alt="写真:熱心に説明を聞く参加者の皆さん" width="301" height="234" class="photo_workshop">
<p>2015年6月21日 日曜日 13時30分 ~ 18時<br>会場:JUSO Coworking 405号
<p>「アクセシビリティ」を語るより実際にやってみよう!な勉強会第6弾!です。今回は、第5回で選ばれたデザインを元にフォームのマークアップをやります!勉強会の内容は続き物ではありません。初めての方でも、是非お気軽にご参加くださいませ。更に実践に役立つ?イジワル問題も作成しているので、それも一緒にマークアップしていきますw。</p>
<p class="more"><a href="https://d2draft.doorkeeper.jp/events/25495">詳細はこちら</a></p>
</div>
<p class="concretely"><a href="https://d2draft.doorkeeper.jp/events#past-events"><span>過去の活動はこちら</span></a></p>
<div class="centered">
<h3>関連記事</h3>
<dl>
<dt>2015年5月7日</dt>
<dd><a href="http://codingmania.net/blog/%E7%AC%AC5%E5%9B%9E-d2d-%E3%82%A2%E3%82%AF%E3%82%BB%E3%82%B7%E3%83%93%E3%83%AA%E3%83%86%E3%82%A3%E5%8B%89%E5%BC%B7%E4%BC%9A%E6%8C%AF%E3%82%8A%E8%BF%94%E3%82%8A">第5回 D2D アクセシビリティ勉強会振り返り<img class="externallink" alt="CodingManiaサイト" src="img/icon_external.png"></a></dd>
<dt>2015年5月21日</dt>
<dd><a href="http://www.pictron.net/2015/06/10/d2d-%E3%83%87%E3%82%A3%E3%83%AC%E3%82%AF%E3%82%B7%E3%83%A7%E3%83%B3-%E3%82%A2%E3%83%B3%E3%82%AB%E3%83%B3%E3%83%95%E3%82%A1%E3%83%AC%E3%83%B3%E3%82%B9-vol-1-%E3%83%92%E3%82%A2%E3%83%AA%E3%83%B3/">D2D ディレクション アンカンファレンス vol.1 ヒアリング<img class="externallink" alt="pictron web planningサイト" src="img/icon_external.png"></a></dd>
<dt>2015年6月26日</dt>
<dd><a href="http://white-stage.com/article.php/d2daccessibility6nd">第6回 D2D アクセシビリティ勉強会でアクセシブルなフォームを作成!<img class="externallink" alt="White Stageサイト" src="img/icon_external.png"></a></dd>
</dl>
</div>
</div>
</section>
<section id="about" tabindex="0">
<h2>D2Dとは</h2>
<h3>ウェブのテクニカルな内容とデザイン的な内容を横断した、<br>特定のプロダクトや技術に限定しない勉強会。</h3>
<p>D2Dとは、Dev & Design Draftの略。<br>"Draft"とは、草案、下書き状態の情報やアイディアを交換するところ。</p>
<p>特定の技術やプロダクトに限定せずに、Web制作者が今イチバン気になる情報を知ろうという領域横断型の勉強会シリーズ。関西エリアで開催している「語るより実際にやってみよう!」な勉強会。</p>
</section>
<section id="contact" tabindex="0">
<h2>お問合せ</h2>
<p>D2Dへのお問合せは以下の各項目へ、入力・選択してください。<br>必須 の付いている項目は必ずご記入ください。</p>
<form method="post" action="#">
<div>
<label for="name">お名前<span class="required">必須</span></label>
<input type="text" id="name" aria-required="true" name="#">
</div>
<div>
<label for="mail">メールアドレス<span class="required">必須</span></label>
<input type="text" id="mail" aria-required="true" name="#">
</div>
<div>
<label for="address">ご住所</label>
<input type="text" id="address" name="#">
</div>
<div>
<label for="call_number">電話番号</label>
<input type="tel" id="call_number" name="#">
</div>
<div>
<p id="contact_type">お問合せの種類</p>
<ul class="radio_btn"><li><input type="radio" id="about_a" aria-describedby="contact_type" name="#"><label for="about_a">勉強会について</label></li><li><input type="radio" id="about_b" aria-describedby="contact_type" name="#"><label for="about_b">運営組織について</label></li><li><input type="radio" id="about_c" aria-describedby="contact_type" name="#"><label for="about_c">その他</label></li></ul>
</div>
<div>
<label for="inauiry_content">お問合せ内容<span class="required">必須</span></label>
<textarea rows="6" cols="35" name="#" id="inauiry_content" aria-required="true"></textarea>
</div>
<input type="submit" value="確認画面へ">
</form>
</section>
</main>
<footer>
<ul>
<li class="fb"><a href="https://www.facebook.com/groups/192199647655920/"><img src="img/icon_facebook_f.png" alt="D2DのFacebookグループページ" class="rollover" width="38" height="39"></a></li>
<li class="tt"><a href="https://twitter.com/search?q=%23d2draft&src=typd&lang=ja"><img src="img/icon_twitter_f.png" alt="D2Dのtwitterでのツイート一覧" class="rollover" width="38" height="39"></a></li>
</ul>
<small>© D2DRAFT. All Rights Reserved.</small>
</footer>
</body>
</html>