Valid HTML5 & CSS3

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

夢の吊橋~Remember Mrs.Y set 1st Web標準レスポンシブ Design

公開
当ページはset Fileが提供する誰でもWeb標準デザイン夢の吊橋~Remember Mrs.Y set 1st のサンプルデモページです。

1 夢の吊橋~Remember Mrs.Y set 1st について

目次へ

2 Mrs.Y シリーズ 一覧

目次へ

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

以下、デフォルト (*6)はタブレットからキャプチャ。 デフォルト (*7) (*8)はスマートフォンからキャプチャ。
(*6) 画面サイズ横幅480px以上のスクリーンショット
Web標準レスポンシブ Design・夢の吊橋~Remember Mrs.Y set 1st-1│setf.jp
(*7) 画面サイズ横幅480px以下のスクリーンショット
Web標準レスポンシブ Design・夢の吊橋~Remember Mrs.Y set 1st-2│setf.jp
(*8) 画面サイズ横幅319px以下、ブラウザの表示倍率アップ時のスクリーンショット
Web標準レスポンシブ Design・夢の吊橋~Remember Mrs.Y set 1st-3│setf.jp

目次へ

4 html・css ソースコード

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

<!--以降、黄色字がbody内の編集箇所-->

<div class="background" title="http://example.com/">
<!--div要素のタイトル属性は画面左上に表示されるようにしています。-->

<nav id="menu">
<h2><mark>Site Menu</mark><time>2017-01-23</time></h2>
<p class="info">テキスト</p>
<dl id="contents">
<dt><a href="./">Home</a></dt><dd>
<ol><li><a href="#">テキストリンク</a></li>
<li><a href="#">テキストリンク</a></li>
<li><a href="#">テキストリンク</a></li>
<li><a href="#">テキストリンク</a></li>
<li><a href="#">テキストリンク</a></li>
<li><a href="#">テキストリンク</a></li></ol>
<p><a href="#menu">Menu Top</a></p>
</dd></dl></nav></div>

<!--リンクは幾つでも追加可能-->
前項、カスタマイズ用デフォルト (*6) (*7) (*8)cssソースコード

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

目次へ

5 画像のダウンロード

夢の吊橋~Remember Mrs.Y set1st2nd3rd画像 (*9)1枚だけ使用しています。と、違ったね、正確には2nd3rdBase64に変換した画像をプラス1使用していますが、Base64に変換した画像はダウンロードが不要なので、本ページでは1st2nd3rdで共通画像のダウンロードが可能。
(*9) 本ページで使用しているサンプル画像は元画像より画質を下げています。
サンプル画像
夢の吊橋~Remember Mrs.Y set の元画像のダウンロード

目次へ

HTML5 & CSS3検証