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