http://setf.jp/ Home > 誰でもWeb標準デザイン >

夢の吊橋~Remember Mrs.Y set 2nd Web標準 Responsive Design

公開
当ページはset Fileが提供する誰でも Web 標準デザイン夢の吊橋~Remember Mrs.Y set 2nd のサンプルデモページです。サイト名の頭文字が Y のWebサイトにマッチしたデザインともいえます。

About 夢の吊橋~Remember Mrs.Y set

夢の吊橋~Remember Mrs.Y set 2nd について

Web標準 (*1)に準拠した正確なhtml・cssによる可変スタイルのレスポンシブWebデザイン。

1st (*2)に比べてポップな仕上がりです。制作者がお世話になったMrs.Yさん (*3)故郷の写真 (*4)と共に、お馴染みイニシャルYに特化したデザイン。

(*1) Web標準については以下を参照。
Web標準準拠の本サイトが実証したWeb標準化の利点
(*2) 1stのデモページのスクリーンショット
Web標準レスポンシブ Design・夢の吊橋~Remember Mrs.Y set 1st│setf.jp

1stのカスタマイズ用デフォルトのスクリーンショット一覧を観る

(*3) Mrs.Yさんの思い出やエピソードは制作者のアメブロに執筆予定。
アメブロ > 百変化│非定型歯痛・1日1食・Web素材
(*4) 写真はに家族旅行にて制作者の母が撮影し、制作者がスプライト対応画像に加工を施しました。
サンプル画像

元画像のダウンロードは1st

目次へ

Mrs.Y Series

Mrs.Y シリーズ 一覧

全4シリーズ

目次へ

Screen Shot

カスタマイズ用デフォルトの スクリーンショット

以下、デフォルト (*5)はタブレットからキャプチャ。 デフォルト (*6)はスマートフォンからキャプチャ。
(*5) 画像サイズ横幅480px以上のスクリーンショット
Web標準レスポンシブ Design・夢の吊橋~Remember Mrs.Y set 2nd-1│setf.jp
(*6) 画像サイズ横幅480px以下のスクリーンショット
Web標準レスポンシブ Design・夢の吊橋~Remember Mrs.Y set 2nd-2│setf.jp

目次へ

Source code

html・css ソースコード

前項、カスタマイズ用デフォルト (*5) (*6)htmlソースコード
<!--head内に以下を記述-->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<!--以降、黄色字がbody内の編集箇所-->
<nav id="contents">
<h2>Site Menu</h2>
<dl><dt>

<!--dt要素内のa要素のタイトル属性は文字列Home直下に表示されるようにしています。-->
<a href="./" title="http://example.com/">Home</a></dt>

<dd><ol>
<li><a href="#">テキストリンク</a>
<li><a href="#">テキストリンク</a>
<li><a href="#">テキストリンク</a>
<li><a href="#">テキストリンク</a>
<li><a href="#">テキストリンク</a>
<li><a href="#">テキストリンク</a>
<li><a href="#">テキストリンク</a>
</ol></dd></dl><p><a href="#contents">Menu Top</a></p></nav>

<!--リンクは幾つでも追加可能。html5はli要素の閉じタグが構成によっては省略可能です。本ソースコードはli要素の閉じタグを省略しています。-->
前項、カスタマイズ用デフォルト (*5) (*6)cssソースコード

夢の吊橋~Remember Mrs.Y set 2ndのcssソースコードを表示

目次へ

Web Font

本ページで使用しているWebフォント

2種類のWebフォントのダウンロード
  • 一部の英字とYCorabaelを使用。
  • 1~9 & aA~zZCuprumを使用。

目次へ

前述のhtml・cssソースコードで実装した本サイトのメニュー

Valid html5 css3

本ページのhtml & css 正当度

検証
  • html正当度検証。正当エラー有
  • css正当度検証。
    • エラーが無ければ

      おめでとうございます! エラーはありません。と、表示されます。

    • Valid CSS3 検証へ

目次へ