Home > TagScript > Style Guide

ベクトルドロー・レベルゼロ

Webデザインのスタイル・ガイド

新規作成日 2017-02-26
最終更新日

Style Guideとは、CSSのid属性やclass属性の命名規則やインディエントの取り方などのCSSの記述ルールをまとめたガイドラインをまとめたものが始まりです。現在では、見出しなどのスタイルのガイドライン、モジュール、グリッドシステムをまとめたものをStyle Guideと呼びます。

そのため、個人で作成する場合は、グローバルメニューやパンくずリストやレイアウトで使用するhtmlとcssのパターンの一覧になります。

インターネット上で紹介されているWebページで使えるモジュールの記述方法、ボタンのデザイン、アニメーション表現など使えるものを集めて整理しておきます。また、cssフレームワークからも活用できると判断した、表現パターンを抜き出して、構造を理解し、まとめておきます。

Webページで使用したい表現方法を探す手間が削減できるだけでなく、一貫した表現を使用することで、コードが読みやすく、また、早く作成できることが期待できます。

サイト上で見つかるスタイルガイド

Webページを構成する基本的な要素

テンプレートのhtmlフレームを作成する

いわゆる「空のhtmlページ」と呼ばれるものです。この空のページに、部品を追加してテンプレートを作成します。

グローバルメニューを作成する

グローバルメニューは、複数ページで構成されるWebサイトを作成する際に設置するカテゴリーへのリンクです。

グローバルメニューのデザインは、パソコンから閲覧する場合だけでなく、スマホなどの携帯端末から閲覧する場合を考えてデザインする必要があります。

フォトスライド

ホームページで画像が勝手にクルクル切替わるフォトスライドという機能は、jQueryで実現されています。 ホームページ内に動きを取り入れることができるので、視点を集めることができます。

テーブル(表組)

Webページで表組は、面倒で、理解しにくい表記の1つです。 流用しやすい定型の形を数種類作成しておいて、それを基に少しずつ改変していく方法が、現時点で私が、楽だと考えている方法です。

表で表すと、内容の比較や理解がしやすくなるので、積極的に利用したいスタイルです。

ソースコードのハイライト

サイト用のスクリプトを紹介するとき、プログラムのコードの説明をサイトに掲載する際、スクリプトやコードを色分けして見やすく表示するスクリプトです。

ソースコードの色分けが無いと、コードは読みにくいので、積極的に利用しましょう。

折りたたみ(アコーディオン)

文章や画像をページ内で表示したり、非表示にする機能は、PC表示では、使いにくいので意味はありませんが、 画面の小さいモバイルでの表示では、見やすくなる可能性があります。

項目ごとに折り畳むことができるので、モバイル端末に向けたサイトでは、上手く利用すると利用しやすいサイトにすることができるかもしれません。

カラム・レイアウトを導入する

表示するブラウザのウィンドウ幅に対応して表示を変えるレスポンシブWebデザインに対応したカラムデザインをhtml、css表記で、実現します。

記事を作成する際に役立つhtml、cssの知識

それぞれのWebページごとに異なる内容を記述する際に使用するhtml、css表現です。

このエントリーをはてなブックマークに追加

Home Editor Tools Operation TagScript HPSpace

Copyright (C) 2011-2018 Horio Kazuhiko(kukekko) All Rights Reserved.
kukekko@gmail.com
ご連絡の際は、お問い合わせページのURLの明記をお願いします。
「掲載内容は私自身の見解であり、所属する組織を代表するものではありません。」