記事の書き方 20180319版

記事全体の構成について

記事全体はなるべく、以下の構成に基づいて書いてください。記事内容によっては他の構成でもかまわないケースがありますが、基本はこの構成になります。その他の構成に関しては、編集部までご相談ください。

はじめに

記事の主旨を書いてください。なるべく書いてください。

対象読者

記事を読む読者を想定してください。なるべく書いてください。

必要な環境

記事が環境に依存する場合は、必ず書いてください。

解説内容

記事を解説してください。

まとめ

記事の結論をまとめてください。まとめ、結論、最後に、などタイトルはなんでもかまいません。

参考資料

記事執筆に利用した参考資料を箇条書きで書いてください。番号付リストになります。書籍、雑誌、URL、すべてを列挙してください

すでに公開中の記事の構成も参考にしてください。

CodeZine用タグ（HTMLタグ）

CodeZineでは記事を統一的に整形するためにHTMLタグを指定していますので、これに従って記述するようにしてください。

またセキュリティの関係上、一部のタグは利用できませんので、利用できないタグがある場合は、編集部までご相談ください。

最終的には、レイアウトの具合を確かめながら編集部がタグをつけるため、投稿者は、タグを正確につける必要はありません。タグをつけていただくと編集作業が早くなるというような程度に考えておいてください。

記事を書く場合、最低以下の4つが書かれた記事をいただけると助かります。

記事全体の構成
見出しレベルの順序：h2→h3→h4→h5
ソースコード用のタグ：pre class="prettyprint"
ハイパーリンク用のタグ：a href

行要素関連タグ

1行を行要素として一度だけ置換します。行要素にインライン要素を含めることはできません。

見出し

通常の見出しは<h2>タグを指定してください。h3、h4、h5が使えます。

画像

figcaptionには、画像のキャプションを書きます。
大きい画像がある場合は、aタグに「rel="lightbox"」と記述してください。lightboxが利用できます。

リンク先画像は「/static/images/article/[記事ID]/」から絶対パスで指定してください。

<figure>
  <a href="a.gif" target="_blank" rel="lightbox"><img src="a_s.gif" alt="画像"></a>
  <figcaption>画像のキャプション</figcaption>
</figure>

ブロック要素関連タグ

ソースコード

ソース全体は、class="src_frame"をつけたdivタグで囲んでください。
preタグにclass="prettyprint"と記述することで、ソースコード内のキーワード（予約語）は自動的に色づけされます。google-code-prettifyについて。
一部正常に色づけされないソースもありますが、google-code-prettifyの仕様です。

キャプションは、class="caption"を、ソースの上に指定してください。

<div class="src_frame">
	<div class="caption">C++のソース</div>

<pre class="prettyprint">
int main(void)
{
    printf("hello world\n");
}
</pre>
</div>

1行は約半角80字くらいまでを標準的に考えてください。

テーブル

テーブルは、class="tbl"をtableタグに指定してください。
キャプションは、<caption>タグを利用してください。
テーブル幅は500px以内に収めてください。大きくなりすぎるときは編集部にご相談ください。

<table class="tbl">
<caption>表のキャプション</caption>
<tr>
	<th>列名１</th><th>列名２</th><th>列名３</th>
</tr>
<tr>
	<td>10</td><td>30</td><td>50</td>
</tr>
<tr>
	<td>20</td><td>40</td><td>60</td>
</tr>
</table>

コラム

コラムや補足説明を書きたいときに使用します。枠で囲まれます。
全体を<section class="columnSection">で囲んでください。

タイトルは<h4>タグを指定してください。

<section class="columnSection">
  <h4>コラムタイトル</h4>
  <p>コラムの内容</p>
</section>

コード部分

<code></code>で囲んでください。
本文中に現れるメソッド名や変数名等を修飾します。
```
<code>ToString()</code>メソッド
```

その他の記号（約物）

基本的に本文中の英数字は「半角」、本文中の記号は「全角」です。

GUI要素のコマンドや選択肢は全角［］で囲みます。
```
［ファイル］メニューを選択してください。
```
キーボードのキー名は全角［］で囲みます。
```
［Shift］キーを押します。
```
ファイル名、ディレクトリ名は全角「」で囲みます。
```
「Temp」フォルダを作成します。
```
丸括弧（）はなるべく全角を使用してください。
```
フォルダ（ディレクトリ）を開きます。
```

投稿の公開までの流れ

投稿後、公開までは以下のような流れです。

投稿者はWebまたはメールで投稿してください。
投稿された記事は、編集部でチェックします。
掲載の可否を投稿者に連絡します。
掲載可なら、編集部が編集して校正を作成します。
投稿者は校正をチェックします。
問題なければ編集部が最終チェックして公開します。

この文書は予告無く変更されます。