ようこそ! 株式会社アイビー・ウィー 2024/12/04 02:30 JST

コンテンツの記述方法-基礎編

Geeklogサイトに限らず、フロントエンドフレームワークを活用したコンテンツを記述する場合の注意事項です。

1. URLの付け方

URLの理想的な付け方は、複数のワードで構成する場合は_ ではなく、- で区切ることです。
クローラーも、-はワードの区切りとして認識します。

2. 文字の修飾

文字の修飾は、<strong>以外は原則使いません。
<strong>は、アドバンストエディタの「b」で指定できます。
<big><small>など非推奨タグも使いません。
エクセルからのはりつけは、貼り付け　のコマンドを使って、不要なタグを自動的に消して貼り付けてください。

参考: http://getuikit.com/docs/text.html

3. Tableタグのレスポンシブレイアウトの対応

スマホなどのデバイスで、テーブルがオーバーフローするとサイト全体が スクロールバーでレイアウトがおかしくなるのを、テーブルだけスクロールさせる 方法は以下です。
テーブルの幅は固定にしないでください。

<div class="uk-overflow-container">
<table class="uk-table" ...>
...
</table>
</div>

4. Tableタグ

テーブル組で、ヘッダ部のセルは　<td>ではなく<th>を使ってください。罫線を表示する場合は、border="2"　をtableタグの属性に加えてください。

<div class="uk-overflow-container">
	<table border="2" class="uk-table">
	<thead>
	<tr>
	....
	</tr>
	</thead>
	<tbody>
	<tr>
	...
	</tr>
	</tbody>
	</table>
</div>

参考: http://getuikit.com/docs/table.html

これが基本になります。

5. description list推奨

description listを標準的に活用してください。

会場

○○○○○

住所

○○○○○

<dl class="uk-description-list-horizontal">
<dt>会場</dt>
<dd>○○○○○</dd>
<dt>住所</dt>
<dd>○○○○○</dd>
</dl>

横並びにせず経て並びのままにするならuk-description-list-horizontalをuk-description-listにします。

参考: http://getuikit.com/docs/description-list.html

6. スペーシングについて

スペースで、右寄せしないでください。
文章の途中で改行コードが入っていましたので、改行コードを削除しています。
改行はブラウザの幅によって自動的に改行されます。

7. リスト表示の場合

・○○○○○
・○○○○○
という表記は<ul>タグで記述してください。<ol>タグは連番表記の場合に使います。

• ○○○○○
• ○○○○○
• ○○○○○

<ul>
<li>○○○○○</li>
<li>○○○○○</li>
<li>○○○○○</li>
</ol>

8. 文字の折り返しについて

改行したくない場合は、

class="uk-text-nowrap"

を追加します。

参考: http://getuikit.com/docs/text.html
ページの一番下をご覧ください。

9. 数値の記述方法

全角数字ではなく、WEBでは　半角で記述する方法が一般的です。
Yahoo JapanはURLも全角で記述していますが、それを除いて、半角が良くつかわれます。
また、サイト全体で、半角で統一します。
混在しないことが最も重要です。

10. 漢字、かな、句読点、改行

漢字の表記や句読点にも注意が必要です。不要な改行タグは削除します。

出来る　⇒　できる
下さい　⇒　ください

最終更新日:: 2015/09/07 22:11 JST| 表示回数: 5,705