LOGO G & N Green Necklace set

http://setf.jp/ Home > 誰でもWeb標準デザイン > LOGO G & N Green Necklace set

公開 。ヘッダーにもフッターにもサイドメニューにもなるWebパーツテンプレートLOGO G & N Green Necklace setのサンプルデモページです。cssで実装したロゴは、デフォルトのGNロゴの他に、N無しGロゴG無しNロゴがあります。

1 Green Necklace素材の歩み

» 目次へ

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

(*参照画:7)
画像サイズ横幅480px以上のスクリーンショット。タブレットからキャプチャ。
Web標準レスポンシブ Design・ロゴG & N グリーンネックレスset│横幅480px以上のデザイン
(*参照画:8)
画像サイズ横幅480px以下のスクリーンショット。スマートフォンからキャプチャ。
Web標準レスポンシブ Design・ロゴG & N グリーンネックレスset│横幅480px以下のデザイン

3種類のロゴ参照画(*9)(*10)(*11)があります。ロゴの変更はhtmlにてclass属性を、書き換えるだけ。

参照画9:ロゴGN
ロゴGN
参照画10:ロゴG
ロゴG
参照画11:ロゴN
ロゴN

簡単すぎるhtmlソースコードへ

» 目次へ

3 html・css ソースコード

前項、カスタマイズ用参照画 (*7) (*8)htmlソースコード
まず、htmlファイルのhead内に以下の黄色字を記述
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

次に、以下の<!--ココカラ-->から<!--ココマデ-->をコピーしてbodyに貼り付けます。
<!--ココカラ-->
<nav id="contents" class="logo-gn" title="Valid html5 & css3">
<h2><a href="./">Title・タイトル<sub>サブタイトル</sub></a></h2>
<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>
</ol>
<p><a href="#contents">&#xbb; Menu Top</a></p></nav>
<!--ココマデ-->
<!--ココカラ-->から<!--ココマデ-->をbodyにコピペ後は、コピペしたhtmlソースコード内の黄色字を編集します。

以降、黄色字編集の補足。

nav要素のclass属性でロゴの変更が可能。
デフォルトのclass属性logo-gnになっています。3種あるclass属性は以下を参照。
logo-gn
ロゴGN
logo-g
ロゴG
logo-n
ロゴN
nav要素のタイトル属性は画面右上部に表示されます。
デフォルトのタイトル属性Valid html5 & css3になっています。

デフォルトのテキストリンクは6個になっていますが、幾つでも追加・削除可能。html5はli要素の閉じタグが構成によっては省略可能です。本ソースコードはli要素の閉じタグを省略しています。
前項、カスタマイズ用参照画 (*7) (*8)cssソースコード

LOGO G & N Green Necklace setのcssソースコードを表示

cssソースコードのご利用は、既存のcssファイルにコピペするか、別途cssファイルを作成するかのどちらかになるでしょう。
いずれも、htmlファイルのhead内に以下を忘れずに記述しましょう。

<link rel="stylesheet" media="screen" href="該当cssファイルのアドレス" type="text/css" />

» 目次へ

4 スプライト対応素材の設置ナビとダウンロード

スプライト対応素材(前項参照画6)の設置ナビ
  • 以降、デフォルトサイズ(600px × 750px)実寸表示で設置時の基本情報(幅・高さ・x軸・y軸)です。基本情報を把握すれば多種多様なカスタマイズが可能です。
  • 以降、左上透過アイコン以外表示サイズは50%縮小しています。
  • 本素材を利用時に50%縮小表示する場合は、各基本情報(幅・高さ・x軸・y軸)を50%にすればよいだけです。当然ですが0に50%はございませんので0はそのままですね。
左上透過アイコン
  • 幅:150px
  • 高さ:30px
  • x軸:0
  • y軸:0
backgroundプロパティでサイズを縮小してリストに使用する場合の設置は、以下の公開提供css#contents li:beforeを参照。

LOGO G & N Green Necklace setのcssソースコードを表示

左上部鉢3個
  • 幅:480px
  • 高さ:360px
  • x軸:0
  • y軸:-30px
左下部グリーンネックレス
  • 幅:480px
  • 高さ:360px
  • x軸:0
  • y軸:-390px
右上部文字入り透過ツル
  • 幅:112px
  • 高さ:366px
  • x軸:-488px
  • y軸:0
右下部文字無し透過ツル
  • 幅:78px
  • 高さ:364px
  • x軸:-522px
  • y軸:-386px
スプライト素材のダウンロード
  • 素材には著作権表記がございます。公開提供cssでは著作権表記が見えないようにデザインに配慮しています。
  • 著作権表記を削除したり塗りつぶしたり等は、著作権侵害行為となります。
  • 上記、ご承知の上、ダウンロードをどうぞ。

    Down Load

» 目次へ

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

» 目次へ

6 前述の » html・cssソースコードで実装した本サイトのメニュー。実際は上下のシルバーラインは無。Sample Demo Start

Sample Demo End » 目次へ

7 本ページのhtml & css 正当度

» 目次へ