1. 千貫りこ
コーディングがラクになる!?
“自分仕様”のさくさくコーディング法
2014.10.29 GAT/COLLEGE

2. 千貫（せんがん）りこ
1997年からWebサイト制作の仕事を
スタート
2005年からフリーランスに
制作、講師、執筆

3. 今日やること
“がんばりどころ”を考える
MarkdownとSass
便利なツールいろいろ

4. “がんばりどころ”
を考える

5. “がんばりどころ”を考える
覚えなきゃいけないこと、たくさん！
ホントに必要？

6. “がんばりどころ”を考える
ツールやテクニックは一過性のものが多く、いざ使おうと思ったタイミ
ングになったときには、古いアプローチという場合がよくあります
（中略）
実践するときは、もう一度検索したり確認することになるので、ツール
やテクニックは流し見程度。それより中長期にわたって使える知識やア
プローチを「何が必要なのか」「なぜ必要なのか」を意識して吸収する
ようにしています。
http://www.yasuhisa.com/could/article/what-you-need-to-know/

7. 押さえておきたいポイント
1.自動化
2.黒い画面と仲よくする
3.道具を使い分ける
“がんばりどころ”を考える

8. 自動化
“がんばりどころ”を考える

9. “がんばりどころ”を考える
• ライブリロード
• ファイルの結合
• CSSプロパティの並び順整理
• 構文チェック
• コードのminify
• CSSスプライト生成
• 画像最適化
• FTPアップロード

10. “がんばりどころ”を考える
http://gruntjs.com/ http://gulpjs.com/

11. 黒い画面と仲よくする
“がんばりどころ”を考える

12. “がんばりどころ”を考える
アプリケーション＞ユーティリティ＞ターミナル.app

13. Ruby
https://www.ruby-lang.org/ja/
http://nodejs.jp/
Node.js
gem
npm
“がんばりどころ”を考える

14. 道具を使い分ける
“がんばりどころ”を考える

15. “がんばりどころ”を考える
Dreamweaver Edge Code Sublime Text Coda

16. http://getkirby.com/
“がんばりどころ”を考える
http://www.mamp.info/

17. Markdown

18. Markdownって？
Markdown
Markdown（マークダウン）は、文書を記述す
るための軽量マークアップ言語のひとつである。
もともとは読みやすいプレーンテキスト形式の文
書をHTML化するために開発された…（後略）
Wikipediaより

19. Markdown
http://daringfireball.net/projects/markdown/

20. Markdown
なぜMarkdown？
• 専門的な知識がなくても編集できる
• 文脈を意識したコーディングが可能
• Webサイト制作以外の場面でも使える
• ツールに含まれていることがある

21. Markdown
Markdownエディタ
http://25.io/mou/ http://pad.haroopress.com/

22. 具体的に見てみよう
Markdown

23. Markdown
見出し
<h1>大見出し</h1>
<h2>中見出し</h2>
<h3>#小見出し</h3>
#大見出し
##中見出し
####小見出し

24. Markdown
段落
Markdown（マークダウン）は、文書を記述するための軽量マークアップ
言語のひとつである。 ⏎
もともとは読みやすいプレーンテキスト形式の文書をHTML化するために
開発された。⏎
⏎
**Wikipedia**より
<p>Markdown（マークダウン）は、文書を記述するための軽量マーク
アップ言語のひとつである。<br>もともとは読みやすいプレーンテキス
ト形式の文書をHTML化するために開発された。</p>
<p><strong>Wikipedia</strong>より</p>

25. - リスト項目1
- リスト項目2
- リスト項目2-1
- リスト項目2-2
- リスト項目3
箇条書き
<ul>あ
<li>リスト項目1</li>
<li>リスト項目2
<ul>あ
Markdown
<li>リスト項目2-1</li>
<li>リスト項目2-2</li>
</ul>あ
</li>あ
<li>リスト項目3</li>
</ul>

26. |header1|header2|header3|
|-------|------:|:-----:|
|data1|data2|data3|
表組
Markdown
<table>
<thead>
<tr>
<th>header1</th>
<th align="right">header2</th>
<th align="center">header3</th>
</tr>
</thead>
<tbody>
<tr>
<td>data1</td>
<td align="right">data2</td>
<td align="center">data3</td>
</tr>
</tbody>
</table>

27. Markdown
リンク
[Google](http://www.google.co.jp/)
<a href=“http://www.google.co.jp/”>Google</a>

28. Markdown
画像
<img src=“img/cat.jpg” alt=“ねこ”>

29. Markdown
リンク画像
[](http://www.google.co.jp/)
<a href="http://www.google.co.jp/">
<img src="img/cat.jpg" alt="ねこ" /></a>

30. Markdown
罫線
- - -
<hr>

31. # Webクリエイターに足りない本当のSEOスキル
## 前提
* 生き残るクライアントと取引しないと共倒れになる
* 集客にコストを割くのは当然
* インタビューサイトで人脈、人柄、ライティング能力をアピール
## 間違いだらけのSEO
### SEOとは
* 検索エンジンからの動線を最適化する
* 検索者の意図に沿った情報発信で、情報を探している人々の来訪を促進する
* 情報提供によって潜在客にリーチすると同時に、見込み客へと育成する試み
* コンテンツや被リンクなど集客のための無形資産を形成する試み
* 広告は出稿をやめたらそこでおしまいだが、蓄積されたコンテンツにはトラフィックを生む力になる
* ずっと続いていく投資のようなもの
### 検索の目的
* 調べもの（ダントツ）
* 検索エンジンは、本来売り込み（セリング）を意図していない
* 分からないことを分かるようにするのが効果的
* 商用ワードやセリングページは、楽天メソッド的LPを最適化してリスティング広告で集客が効率的
* 競合がリスティング広告を出している＝もうかっている
* 目的のサイトへの移動
* 買い物
Markdown

32. Sass

33. Sassって？
「CSSプリプロセッサ」と呼ばれるCSSメタ言
語のひとつ。他に、less、Stylusなどがある。
Sass

34. なぜSass（CSSプリプロセッサ）？
Sass
• 何度も登場するスタイル（コード）に名前を付けて登録、
呼び出して利用 →ソースが簡潔に、見やすい
• ボックスのサイズなどを、プログラム処理で自動的に算出
• 複数のファイルを結合したり、改行やインデントを削除し
たり…… →表示高速化に貢献？
• ツールに含まれていることがある

35. Sass
http://sass-lang.com/

36. 1. Macなら「ターミナル」
Windowsなら「コマンドプロンプト」を起動
2. gem install sass
管理者権限が無い場合は、先頭にsudoを付加（sudo gem install sass）
3. 「sass -v」コマンドでSassのバージョンが確認でき
たら、インストール成功！
Sass
Sassのインストール

37. 具体的に見てみよう
Sass

38. ul {
margin-top: 10px;
li {
font-size: 12px;
a { text-decoration: none;
&:hover { color: red; }
}
Nested Rules
}
} ul {
Sass
margin-top: 10px;
}
ul li {
font-size: 12px;
}
ul li a {
text-decoration: none;
}
ul li a:hover {
color: red;
}

39. $green: #4D926F;
#header {
color: $green;
}
h2 {
color: $green;
}
Sass
#header {
color: #4D926F;
}
h2 {
color: #4D926F;
}
変数名は
日本語でもOK！
Variables

40. @mixin kadomaru {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
border-radius: 5px;
}
#header {
@include kadomaru;
}
#footer {
@include kadomaru;
}
Sass
Mixin
#header {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
border-radius: 5px;
}
#footer {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
border-radius: 5px;
}

41. @mixin kadomaru($radius: 5px) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
-ms-border-radius: $radius;
border-radius: $radius;
}
#header {
@include kadomaru;
}
#footer {
@include kadomaru(10px);
}
Sass
Mixin（引数）
#header {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
border-radius: 5px;
}
#footer {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
border-radius: 10px;
}

42. コンパイル
sass input.scss:output.css
Sass
sass input.scss:output.css --watch
sass scss:css --watch
監視を止めるには
Ctrl＋C
sass input.scss:output.css --watch --style compact

43. body {
color: #000; }
body h1{
margin:0 }
body {
color: #000;
}
body h1{
margin:0
}
body{color:#000}
body h1{margin:0}
body{color:#000}body h1{margin:0}
Sass
body {
color: #000;
h1{
margin:0;
}
}
expanded
nested
compressed
compact

44. 便利なツールいろいろ

45. CSSフレームワーク
便利なツールいろいろ
汎用性の高いスタイルがモジュール化されており、
ユーザーが自由に組み合わせることができる。

46. CSSフレームワーク
便利なツールいろいろ
http://foundation.zurb.com/ http://compass-style.org/

47. http://getbootstrap.com
便利なツールいろいろ

48. <div id="content" class="row">
<div class="col-md-3">
...
</div>
<div class="col-md-9">
...
</div>
</div>
便利なツールいろいろ

49. <img src="img/cake.jpg" alt=""
class="img-thumbnail">
<img src="img/living.jpg"
alt="" class="img-circle">
便利なツールいろいろ

50. 便利なツールいろいろ
<img src="img/living.jpg"
alt=“” class="img-responsive">

51. 便利なツールいろいろ
<h3><span class="glyphicon glyphicon-leaf"></
span>おいしいケーキでほっと一息</h3>

52. 便利なツールいろいろ
<ul class=“list-inline”>あ
<li><a href="index.html">ホーム</a></li>
<li><a href="menu.html">おすすめメニュー</a></li>
<li><a href="access.html">お店へのアクセス</a></li>
<li><a href="contact.html">お問い合わせ</a></li>
</ul>

53. index.html
便利なツールいろいろ
<li><a href="index.html" class="btn
btn-default">ホーム</a></li>
_bootstrap-variables.scss
$btn-default-color: #fff;
$btn-default-bg: #9c3;
$btn-default-border: #990;

54. Static Site Genarator
便利なツールいろいろ
静的（static）にWebサイトを生成するためのツール。
全ページ分のHTMLがあらかじめ生成されている。
動的（dynamic）：
要求（HTTPリクエスト）が来たとき
に、リアルタイムにHTMLを生成する。

55. Static Site Genarator
便利なツールいろいろ
http://middlemanapp.com/jp/ http://laktek.github.io/punch/

56. http://jekyllrb.com/
便利なツールいろいろ

57. http://jekyllthemes.org/
便利なツールいろいろ

58. まとめ

59. • 便利なツールやサービスは“黒い画面”と
セットになっていることが多い
→アレルギーをなくそう
• “ハブ”になる技術をマスターしよう
• まずは試してみよう！
まとめ

60. Thank you !
www.facebook.com/rico.sengan