HTML

コーディングの基本

UIkitをベースに

原則として、UIkitのドキュメンテーションに従って、レイアウトを行ってください。

日本語では、https://t.ly/94UL がわかりやすいかもしれません。

 

 

 

バリデータによる検証

  • 文章構造を理解し、要素本来の意味に従ったコーディングをお願いします。
  • テンプレートごとに(ページごとは不要)バリデータを用いて検証し、“Error”判定の無いページを作成してください。

 

バリデータ

The W3C Markup Validation Serviceを利用してください。

 

例外

以下のErrorは例外とします。

  • UIkitの独自タグ
  • WordPressやプラグインの出力上やむを得ない場合
  • パフォーマンスが低下する場合

 

 

 

headタグの記述

  • 特に指示がない限りはHTML5/UTF-8を使用してください。
  • プラグインYoast SEOを使うため、keywords、description、ogタグの入力不要です。
  • is_mobileタグを利用してください。※参考: is_mobile

 

<!DOCTYPE html>
<html lang="ja">
<head>

<meta charset="utf-8">
<title><?php the_title(); ?> <?php bloginfo('name'); ?></title>

<?php if (!is_mobile()): //desktop-only ?>
<meta name="viewport" content="width=1200">
<meta name="format-detection" content="telephone=no">
<?php endif; ?>
<?php if (is_mobile()): //mobile-only ?>
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<?php endif; ?>

<?php wp_head(); ?>
</head>

 

 

 

bodyタグの記述

以下タグを追加して装飾に利用してください。

 

<body id="<?php echo esc_attr( $post->post_name ); ?>" <?php body_class(); ?>>

 

  • class:body_class();を追加。投稿タイプやテンプレート情報等が出力されます。
  • id:$post->post_nameを追加。設定したページスラッグ等が出力されます。

 

 

 

mainタグの入力(本文内)

デザインやお客様からの希望に応じて、ブロックエディタorクラシックエディタを指定する場合があります。

カスタムフィールド(Advanced Custom Field)を利用していただく場合もあります。

 

 

 

ID・Class

IDの命名ルール

  • アンカーリンクに使用する場合があるため、対象となるコンテンツ名を英訳したIDを付与してください。

 

Class

  • UIkitのルールを優先して命名してください。
  • その他、スタイルの反映など必要に応じてオリジナルのclassを付与してください。

 

 

ウェブアクセシビリティ

画像・動画

画像や動画には、代替情報(alt)を記述してください。

 

リンク

リンクに画像を用いる場合は、リンク先の内容が予測できるようにテキストなどの代替情報(title)を記述してください。

 

 

コメントタグ

第三者が見た際に理解できるようにするため、なるべく細かく入れてください。