テスト医院

このサイトについて

小規模〜中規模な病院をイメージしてページを作成しています。メニューを左側に置くことにより、内容が不足してもバランスが崩れません。

基本メニューはテキストで作られています。特設ページは、画像つきで、下に来るイメージで作っております。

案内やカレンダーなどは左側に常時表示することも可能ですが、このデザインであれば埋め込まないほうが見栄えが良いかな？と考えております。

外部にblogなどがある場合、比較的デザインが寄せやすいのではないかと思っております。

メニューとスマホ対応について

スマホ対応としては、レスポンシブになっており、このままの構成で対応します。トップページにあったスタッフ紹介などは、項目数を調整するようにデザインされております。また、特設ページの画像メニューは基本的にはメニューに含まれないようになっています。例外対応も可能で、「このページについて」「管理ページ」はスマホメニューにも表示されるように設定してあります。

この技術を転用すると、メニューのすべてを画像メニューにすることも可能です。シンプルさが失われるため、デザインは難しくなります。

配色について

インターネットエクスプローラーでは動作しませんが、CSSの変数を利用して色を指定しています。そのため、デザインの配色変更が簡単に対応できます。依頼のあった方の好みを聞いて色を整え、決定したら変数ではなく直接カラー指定することで、作業時間を短縮しながらデザインを追い込むことが可能となっています。

サンプルとして青系ではなく、茶色・オレンジ色に設定してみました。こちらのバージョンをご確認ください。

ブラウザ上から指定できる画面について

トップページのカレンダーのニュースはブラウザから登録することが可能です。左メニューのカレンダー等管理ページをクリックしてご確認ください。

サンプルタグについて

以下、サンプルタグになります。

h2タグ

h3タグ

h4タグ

h5タグ

h6タグ

強調（em） より強い強調（strong） 追加（ins） ~~削除（del）~~ テキストアンカー

引用部分です。引用部分です。引用部分です。引用部分です。引用部分です。引用部分です。引用部分です。引用部分です。引用部分です。引用部分です。引用部分です。引用部分です。

定義リスト1: 定義した用語の説明
定義リスト2: 定義した用語の説明
定義リスト3: 定義した用語の説明
dd要素の中はブロックレベルのタグを使用することが出来ます。例えば、<p>タグも記述することが出来ます。しかし、dt要素にはインライン要素しか記述することができません。

テーブル

見出し1	見出し2	見出し3	見出し4	見出し5
セル1	セル2	セル3	セル4	セル5
セル1	セル2	セル3	セル4	セル5
セル1	セル2	セル3	セル4	セル5

見出し1	セル1	セル2	セル3	セル4	セル5
見出し2	セル1	セル2	セル3	セル4	セル5
見出し3	セル1	セル2	セル3	セル4	セル5
見出し4	セル1	セル2	セル3	セル4	セル5
見出し5	セル1	セル2	セル3	セル4	セル5