update calendarsuck, personalsite and webdesign

このコミットが含まれているのは:
たかし 2023-07-14 01:17:33 +00:00
コミット 93f22992b2
3個のファイルの変更32行の追加22行の削除

ファイルの表示

@ -4,12 +4,15 @@
<ul>
<li>2023-01-25 たかし</li>
<li>最終更新日: 2023-07-14 (陰暦05月27日)</li>
</ul>
<p>以前、わたしの親がウェブ上で誕生日を入力しました。この時、誕生日を撰ぶ爲のカレンダーが表示されました。カレンダーのデフォルトが「今年」だつたから、數十年分、「前へ」をクリックする必要がありました。キー入力も反應しなくて、カレンダーから撰ぶしかありませんでした。ひどい話です</p>
<p>以前、筆者の親がウェブ上で誕生日を入力した時に、カレンダー形式の日附入力欄が表示されました。カレンダーの初期表示が「今年」だつたから、數十年分、「前へ」をクリックする必要がありました。キー入力も反應しなくて、カレンダーから撰ぶしかありませんでした。</p>
<p>そもそも日附は數字だからキーボードでもタッチパネルでも簡單に入力できます。カレンダーから撰ぶまでもありません。ただの INPUT 要素の横に「例:20230125」みたいに表示するか、INPUT 要素を3つ用意して年・月・日に分ければ良いと思ひます。なぜさうしないのか……</p>
<p>そもそも日附は數字だからキーボードでもタッチパネルでも簡單に入力できます。カレンダーを表示する必要はありません。單なる INPUT 要素の横に「例:20230125」みたいに表示するか、INPUT 要素を3つ用意して年・月・日に分ければ充分です。なぜさうしないのでせうか。</p>
<p>多分、開發者(またはその上司)が「型」に囚はれてゐます。「誕生日は Date 型だ」「Date 型ならカレンダーで入力させる物だ」と云ふわけです。しかも、カレンダー形式だとユーザーが不正な日附を入力できないから、エラーチェックを手拔きできる。カレンダーにする理由は、自分たちの爲か、固定概念か、お節介です。</p>
<p>多分、開發者またはその上司は「型」に囚はれてゐます。「誕生日は Date 型だ」「Date 型ならカレンダーで入力させる物だ」といふわけです。更に、カレンダー形式だとユーザーが不正な日附を入力できないから、エラーチェックを手拔きできす。</p>
<p>ユーザーが不正な日附を入力するのを防ぎたいなら、お得意の JavaScript 日附の形式をチェックできるし、全角/半角とか区切文字とかの表記ぶれは自動で變換できる筈です。<strong>豫約サイトなどを除いて</strong>、日附をカレンダーで入力させる必要は殆ど無いと思ひます。</p>
<p>ユーザーが不正な日附を入力するのを防ぎたければ、補助的に JS で日附形式をチェックできます。全角/半角や區切り文字の表記搖れはサーバー側で變換できます。日附をカレンダーで入力させる必要は殆ど無いと思ひます。</p>
<p>勿論、豫約サイトでカレンダーから空き枠を撰ぶのは良い UI です。この記事で問題としてゐるのは、テキストボックスへの入力方法に獨自のカレンダーを採用する事です。</p>

ファイルの表示

@ -4,24 +4,25 @@
<ul>
<li>2022-12-24 たかし</li>
<li>最終更新日: 2023-07-14 (陰暦07月27日)</li>
</ul>
<h2>1</h2>
<p>わたしは個人サイトを読むのが好きです。個人サイトを読む事で筆者の一面に触れられるからです。会つた事のない人について、その人の意見を読み、自分の意見と比較できます。また、その人の個性や感情にも触れられます。わたしは口で会話する事が苦手だから、直接会つて話すよりもサイトを読んだ方が意見を交換できます。それは本やSNSでも同じかもしれませんが、個人サイトにも良さを感じます。</p>
<p>わたしは個人サイトを読むのが好きです。個人サイトを読めば著者の意見と自分の意見とを比較できます。また、著者の個性や感情にも触れられます。わたしは口会話が苦手だから、直接会つて話すよりも文章を読む方が得意です。それは本や SNS でも同じかもしれませんが、個人サイトが最高です。</p>
<h2>2</h2>
<p>本を読めば著者の意見を読み、知識を得られますが、本は商品だから著者の感情は和らぎます。また、大抵、本の著者は何かの専門家です。専門家の意見は勉強になりますが、わたしは、専門家以外も含めた<strong>「その辺に居る、ランダムな誰か」</strong>の意見や感情にも関心があります。だから、わたしは本と個人サイトとの両方を読みます。</p>
<p>本を読めば著者の意見を読んで知識を得られますが、著者の生の感情には触れられません。また、本の著者は専門家や著名人である事が多いです。専門家の意見は勉強になりますが、わたしは「その辺に居る普通の人」の意見も知りたいから、本と個人サイトとの両方を読みます。</p>
<h2>3</h2>
<p>SNSでも人の意見を読めますが、SNSでは最新の投稿が優先されて、昔の投稿を読むのが難しいです。大抵の<strong>個人サイトには目次があるから</strong>文書を探し易いです。また、日付を見れば簡単に最新の文書を探せます。また、SNSのと投稿は独り言に近く、個人サイトや「ブログ」の文章は、読む為に書かれた物だと感じます。だから読みやすいです。</p>
<p>SNSでも人の意見を読めますが、SNS では最新の投稿が優先されて、昔の投稿が読みづらいです。一方、大抵の個人サイトには目次があるから文書を探し易く、記事に日付があれば最新の文書もわかります。また、SNSの投稿は独り言に近く、個人サイトや「ブログ」の文章は、他人に向けた読みやすい文章です。</p>
<h2>4</h2>
<p>ここで「ブログ」に触れました。ここではアメーバブログやFC2ブログ等の事を指します。ブログは個人サイトと同じく読み易いですが、大抵は目次がありません。記事を探すには「前へ」「次へ」のアンカーを辿るか、カテゴリーごとの一覧から探すか、検索を使用するしかありません。だからブログより個人サイトが好きです。</p>
<p>アメーバ、FC2、hatena 等の「ブログ」への意見は次の通りです。ブログの文章は個人サイトと同じく読み易いですが、大抵は目次ページが無く、記事を探す方法は「前へ」「次へ」のアンカーや、カテゴリーごとの一覧や、検索しかありません。だからブログより個人サイトが好きです。</p>
<h2>以上</h2>
<p>他にも「note」「qiita」「pixiv」などの投稿サイトがありますが、投稿サイトについては、また別の文書で触れる事にします。</p>
<p>他にも「note」「qiita」「pixiv」などの投稿サイトがありますが、投稿サイトについては、また別の機会に触れるつもりです。</p>

ファイルの表示

@ -4,42 +4,48 @@
<ul>
<li>2022-12-27 たかし</li>
<li>最終更新日: 2023-03-04</li>
<li>最終更新日: 2023-07-14 (陰暦05月27日)</li>
</ul>
<p>このサイトの設計方針です。わたしは W3M の愛用者だから、テキストブラウザを贔屓します。方針が変化したら、この記事の内容も更新します。</p>
<p>このサイトの設計方針です。筆者は W3M を愛用するから、テキストブラウザーを贔屓します。方針が変化したら、この記事の内容も更新します。</p>
<h2>1. 文章を優先</h2>
<p>わたしは HTML や CSS よりも文章を重要視します。ウェブサイトの本質は文章だからです。文章の書き方で問題を解決できるなら文章を直します。具体的には、記事を読み辛いと感じたら文章を直し、見た目が物足りないと感じたら文章を書き足します。</p>
<p>筆者は、ウェブサイトの本質は文章であり、その次に HTML や CSS が来ると信じます。サイトを改善する一番の方法は文章を工夫する事です。</p>
<p>例をあげると、読み辛いなら文節の並びを調節する、見た目のバランスが悪いなら段落の区切りを調節する、などです。</p>
<h2>2. 見出しを活用</h2>
<p>わたしは段落のまとまりを見出しで区切るのが好きです。文章の途中に見出しを置くと、適度な余白ができて、目に優しいと感じます。また、見出しに番号を振ると、紙の本のページ数と同じく、どこまで読んだかが分かり易くなります。だから、時には数字だけの見出しも使用します。</p>
<p>筆者は、段落のまとまりを見出しで区切る事が好きです。見出しは文章に適度な余白を生み、文章を読みやすくします。</p>
<p>見出しに番号を振ると、紙の本のページ数と同じく、どこまで読んだか分かり易くなります。「1」「2」の様な番号だけの見出しも有用です。</p>
<h2>3. ナビゲーションは最小</h2>
<p>このサイトにはヘッダーが無く、フッターも最小限です。各文書に共通のヘッダー・フッターを付けると、HTML が大きくなるからです。</p>
<p>また、ヘッダーが無ければ本文が最初に来るから、上部に「本文へ」のリンクを付けなくても済みます。</p>
<p>また、ヘッダーが無ければ本文が最初に来るから「本文へ」のリンクが不要になります。</p>
<h2>4. CSS について</h2>
<p>このサイトの CSS の特徴は次の通りです。</p>
<p>このサイトの CSS の特徴です。</p>
<ul>
<li>見出しを沢山置くから、見出しのフォントや前後の余白は小さくしました。</li>
<li>読み易い様に、配色は暗めの背景色、白い文字色にしました。</li>
<li>リンクが分かり易い様に、普通の文字は白、リンクだけ黄色にしました。</li>
<li>色々な画面幅で読める様に、ページの横幅は可変にしました。</li>
<li>ブラウザーの設定で好きなフォントを指定できる様に、フォント名・フォントサイズはデフォルトにしました。</li>
<li>省スペース、少ない色数を目指した。</li>
<li>見出しのフォントや前後の余白を小さ目にした。 -- 見出しを沢山置くため。</li>
<li>暗めの背景色、白い文字色を採用した。 -- 眼に優しくするため。</li>
<li>黄色をリンク文字専用の色にした。</li>
<li>緑色をコンピューター関連専用の色にした。</li>
<li>BODY の横幅は可変にした。 -- 様々な画面幅に対応するため。</li>
<li>フォント名・フォントサイズはデフォルトのままにした。 -- ブラウザーの設定で変更可能にするため。</li>
</ul>
<h2>以上</h2>
<p>たまに自分のサイトのデザインの方針を書く人が居て、わたしはそれを読むのが好きだから、この記事を書きました。全くの無価値ではない筈……</p>
<p>たまに自分のサイトの設計方針を書く人が居ます。筆者はそれらを読む事が好きで、この記事を書きました。</p>
<h2>關聯</h2>
<h2>関連</h2>
<ol>
<li>ウェブサイトの設計方針</li>