SWA(Sikakuien Website Architecture)のリリースノート
投稿日時：2024年6月
概要
SWA(Sikakuien Website Architecture)とは、このサイトのソースコードで共通する基本設計およびデザインです。
個人のHTMLサイトの設計なんてわざわざ名前つけるほどのものでもない、かもしれませんが、思いついちゃったものは仕方ないのです。
公開以前のバージョンはSWAの名前がない時代だったので、小生の思い出話になってしまいますが、ここにできあがるまでの道のりを記録しておきます。
SWA version1.0
紙に描いたスケッチでした。実際にHTMLへ落とし込む際にあちこち変更されましたが、デザインの大枠は大体同じです。
SWA version2.x
HTMLの骨組みを作りました。
version2.0
- head要素にタイトルなどを入れました。
version2.1
- body要素にheader要素・main要素・footer要素を配置し、ページ構造の原型の原型を作りました。
- 現在のトップページとなっている文書のブループリントを作成しました。
SWA version3.x
CSSを導入しました。ヘッダーを作成しました。
version3.0
- CSSを読み込めるようにしました。
version3.1
- ヘッダーにdisplayプロパティを使用し、要素を整列させました。
- ロゴマークの右にある３本の線を、空のdiv要素にサイズと色を指定することで表現しました。
version3.2
-
今月の記事・バックナンバー・ジャンル・索引・奥付の５つのリンクが含まれるli要素を整形しました。
- nav要素で囲みリンクのグループであることを示しました。
- displayプロパティで横一列に並ばせ、リストの点を消し、枠線で囲みました。
- 文字サイズ、フォントを変更しました。枠の中を２行で表示させるようにしました。
- タイトル文字の文字サイズ、フォント、インデント、余白などを調整しました。
version3.3
-
レスポンシブデザインの思想に則り、狭い画面サイズへの対応をはじめました。
- ブレークポイントをビューポート横幅640pxと1200pxにし、それぞれ別のCSSを読み込ませることにしました。
- version3.2までで作ったCSSはビューポート横幅1200px以上用としました。
version3.4
-
ビューポート横幅640px～1199pxに対応させました。
- ロゴマークと縦線を縮めました。
- タイトル文字のbr要素にdisplay: none;とすることで１行で表示させました。
- ５つのリンクをタイトル文字の左から下に移動させ、フォントサイズや枠線を細くしました。
version3.5
-
ビューポート横幅256px～639pxに対応させました。
- タイトル文字を小さくしました。
- ５つのリンクをタイトル文字の下に移動させ、フォントサイズや枠線をさらに細くし、枠の中を１行にさせ、さらに【】をつけて見やすくしました。
SWA version4.x
緑を基調とした配色にしました。
version4.0
- 背景色を落ち着いた緑にしました。
- 文字色をかなり明るい緑にしました。[1]
- a要素の文字色をクリームがかった青緑にしました。
version4.1
- 白だったヘッダーの背景色をかなり明るい緑[1]にしました。
- 黒だった部分をかなり濃い緑にしました。ロゴマークも同じ色です。
-
ヘッダーのロゴマークの右にあるストライプを、緑の３色に変更しました。
- これ以前は赤・緑・青の３色[2]でした。
- h2要素に濃い緑の背景色をつけました。
version4.2
- Adobe Color CCを利用し、配色の細かい調整を行いました。
- h3要素にやや濃い緑の背景色をつけました。
SWA version5.x
フッターを作りました。
version5.0
- フッターの内容として、３つの文とロゴマークを設置しました。
version5.1
- CSSグリッドレイアウトを使い、ロゴマークを右下に、文を縦並びにしました。
- 記事の終わりを表すため、フッターの上部分に「（記事のタイトル）■」を追加しました。
SWA version6.x
文章の形を整え、main要素の子要素を並べました。もくじや［↑ページトップ↑］ボタンを作りました。
version6.0
- 行間を調節しました。
- 段落のはじめをインデントしました。
- 要素のマージンを設けました。
- フォントサイズを設定しました。
version6.1
- もくじの項目と見出しをリンクさせました。
- スクロール位置に関係なく表示される［↑ページトップ↑］ボタンを設置しました。
version6.2
-
ビューポート横幅1200px以上のためのレイアウトを作りました。
- CSSグリッドレイアウトを使い、main要素を縦に３：１で分割しました。
- 本文を左に、もくじと脚注を左に配置しました。
version6.3
-
ビューポート横幅640px～1199pxのためのレイアウトを作りました。
- CSSグリッドレイアウトを使い、main要素を縦に１１：５で分割しました。
- 本文を左に、もくじと脚注を左に配置しました。
version6.4
-
ビューポート横幅256px～639pxのためのレイアウトを作りました。
- もくじ→本文→脚注の順で縦に並ぶようにしました。
SWA version7.x
ギャラリーや索引ページのためのセッティングをしました。
version7.0
-
ギャラリーページのためのレイアウトを作りました。
- アスペクト比を保って、画像の長辺の長さを、ビューポートの幅のうち短い方の96%にしました。
- 画像にグレーの縁取りをつけました。
- 横向きまたは正方形の画像は、説明を下に配置しました。
- 縦向きの画像は、ビューポート横幅が1200px以上で説明が横にくるようにしました。
version7.1
-
索引ページのためのレイアウトを作りました。
- h3,h4,h5要素のフォントを変更しました。
- h4要素を辞書の爪かけのような形にしました。
- h5要素を辞書の見出しのように、【】で囲みました。
- p要素のデザインを変更しました。
SWA version8.x
公開に向け、ディレクトリやファイルの構造を整理しました。
version8.0
- ビューポート横幅ごとに作っていたCSSファイルのうち、すべてに共通していたプロパティを抜き出し、別のファイルにまとめました。
- URLなどに英数字の長い文字列[3]が含まれているとレイアウトが崩れる不具合を修正しました。
version8.1
- robots.txtを設置しました。
version8.2
- body要素でフォントのサイズ指定（16px !important）していたのを廃止しました。
- 文字サイズを指定していたほかの要素について、pxからemやremでの指定に切り換えました。
version8.3
- CSSなどのリンクを、ローカルフォルダからウェブログのURLに変更しました。
SWA version9.x
基本設計の名前がSWA(Sikakuien Website Architecture)[4]に決まりました。
機能が出そろい正式版になりました。
version9.0
-
各ページのフッターにSWAのバージョン情報を書き加えました。
- バージョンが遅れているページは編集し忘れているということ。
- CSSファイルを入れたディレクトリの名前を「hannyoucss」から「swa」に変更しました。
version9.1
- HTMLソースに改行を増やし、インデントで入れ子構造を可視化し、見やすくしました。
- フッター部分のソースに修正を加えました。
version9.2
-
HTMLソースに改行を入れすぎたために、本文中に意図しない半角スペースが多数現れる不具合を修正しました。
- すべての要素に対して改行とインデントをしていたので、適宜減らしました。
- ヘッダーに、将来追加を予定しているページ【別冊】へのリンクを追加しました。
- 初となる公開版。
version9.3
-
レンズなどの諸元を表示するために、table要素を利用しました。
- 行間を調整しました。
- セルの間隔をなくし、枠線が重なるようにしました。
- 奇数番目のtr要素に、薄く背景色をつけました。
- th要素の上下に、明るめの枠線をつけました。
- td要素の上下に、控えめな枠線をつけました。
- td要素の左端に、太めな二重の枠線をつけました。
- ヘッダーのリンク部分を、文字以外の部分をクリックできるように改修しました。
- 脚注にblockquote要素を置いたときのデザインを整えました。
version9.4
-
表紙ページのキャッチコピー部分に、blockquote要素を利用できるようにしました。
- 幅をfit-contentとしました。
- 要素の中をフレックスボックスにしました。
- span要素をブロックレベルにし、blockquote要素の右下に表示されるようにしました。
-
オープニングの茶番ページのためのデザインを作りました。
- 目次と脚注のためのスペースをなくしました。
- 文を中央揃えで表示させるようにしました。
SWA version10.x
訪問者に操作してもらう双方向的な要素を取り入れました。
version10.0β
-
クロスワードパズルのためのデザインを作りました。
- 目次と脚注のためのスペースをなくしました。
- パズル部分をdiv要素で囲み、フレックスコンテナにして回答スペースとカギを横並びにさせました。
- 回答スペースをtable要素で再現し、枠線の表示と幅を調整しました。
- table要素に対してposition: stickyとして、スクロールしても全体が表示されるようにしました。
- 文字を入れるマスにはinput要素を使い、size="1" maxlength="1"とすることで一文字だけ入れられるようにしました。