レスポンシブ

ホームページ(HCZ.JP)をレスポンシブwebデザインに更新

Categories | ホームページ

去年の秋ぐらいからレスポンシブwebデザインの勉強を始め、

試行錯誤し、何とか見れるようにまでなってきたので、

本日レスポンシブへと更新しました。

01 400x330 ホームページ(HCZ.JP)をレスポンシブwebデザインに更新

自分のスマホ(Android)では確認しましたが、iPhoneでは未確認。

なので何か不具合等がありましたらお知らせください。

また微調整が必要なところも数箇所発見したので、修正し次第

今度はほったらかしていた「HCZ TV」のリニューアルに着手予定。

Comment(0) | Trackback(0)

TAGS: / / / / | 2015年3月1日 |

スライドメニュー「Sidr」にアイコンを追加 (レスポンシブ)

Categories | ホームページ

スライドメニュー「Sidr」の最終カスタマイズ。

closeにだけですが、アイコンを追加しました。

28 01 400x258 スライドメニュー「Sidr」にアイコンを追加 (レスポンシブ)

スライドメニューを開いた時、どのボタンで閉じるか戸惑いそうなので、

アイコン追加して目立たせた。どっかのサイトから貰っていたアイコンをSidr用に加工。

必要ならばコピペして使って下さい。

close スライドメニュー「Sidr」にアイコンを追加 (レスポンシブ)

 

参考まで(CSS)

 

.sidr-class-close a {
	background:url(../images/close.png) no-repeat;
	background-position:11px 15px;

}

.sidr-class-close a:hover {
	background: #00ffff url(../images/close.png) no-repeat;
	background-position:11px 16px;
}

 

以上

※ 最後の最後になりましたが、スマホ(アンドロイド)で検証してみたら、

いけてないことに気付きました。

スライドメニューを表示させ閉じるボタンをすると、画面サイズが固定され、

縦で使っていたスマホを横にしてみると、縦のサイズが依存されてしまう。

再読み込みすると元に戻るけど、これってブラウザによって違いがあるみたいだ。

Comment(0) | Trackback(0)

TAGS: / / / / / | 2015年2月28日 |

スライドメニュー「Sidr」をカスタマイズ 右からスライドさせレスポンシブに

Categories | ホームページ

前回の(「Sidr」を実装 )の続きです。

実装できたところで、今回はカスタマイズしました。

ボタンを変更し、右からメニューをスライドさせる。

ホームページの横幅が640px以上だと、Sidrのメニューボタンが消え、

横並びのメニューリストが出現する。参考ページ

 

1109 01 224x300 スライドメニュー「Sidr」をカスタマイズ 右からスライドさせレスポンシブに    1109 02 224x300 スライドメニュー「Sidr」をカスタマイズ 右からスライドさせレスポンシブに

■ メニューボタンオンで右からメニューがスライド。

 

1109 01 224x300 スライドメニュー「Sidr」をカスタマイズ 右からスライドさせレスポンシブに   1109 03 300x224 スライドメニュー「Sidr」をカスタマイズ 右からスライドさせレスポンシブに

■ 横幅が640以上だとメニューボタンが消え、横並びのメニューリストが出現。

 

HTML

 
<nav id="navigation">
  <ul>
    <li class="close"><a href="#" onClick="jQuery.sidr('close', 'right-sidr');">CLOSE</a></li>
    <li><a href="https://www.hcz.jp/" title="トップページ">MAIN</a></li>
    <li><a href="custom.html" title="カスタム">CUSTOM</a></li>
    <li><a href="kakaku.html" title="価格リスト">KAKAKU-LIST</a></li>
    <li><a href="spec.html" title="HCZスペック">HCZ-SPEC</a></li>
    <li><a href="enqu.html" title="リサーチ">RESARCH</a></li>
    <li><a href="oreno-k.html" title="オレのK">ORENO-K</a></li>
    <li><a href="download.html" title="ダウンロード">DOWNLOAD</a></li>
    <li><a href="hcz-tv.html" title="HCZ TV">HCZ TV</a></li>
    <li><a href="what.html" title="更新情報">WHAT'S</a></li>
    <li class="haji"><a href="https://www.hcz.jp/blog/" title="ブログ">BLOG</a></li>
  </ul>
</nav>

 

css

/* PC用ナビゲーションバー */

#right-menu{ display:none;}

#navigation {
	width:910px;
	padding:8px 0 8px; 
	position:relative;
	overflow:hidden;
	font-family: &quot;Times New Roman&quot;, serif;
	clear:both;
	margin: 0 auto 16px;
	box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.60);
    -moz-box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.60);
    -webkit-box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.60);
	background-color:#010066;
	}
	
#navigation ul {
	position:relative;
	margin: 0 0 0 40px;
}
#navigation li {
	letter-spacing:0.07em;
	margin: 0;
	list-style:none;	
	position:relative;
	float:left;
	font-weight:bold;
}
#navigation li a {
	color:#08DEE0;
	padding:0 10px;
	border-left: 1px solid #08DEE0;
	-webkit-transition: background-color .9s ease;
	-moz-transition: background-color .9s ease;
	-o-transition: background-color .9s ease;
	transition: background-color .9s ease;
}
#navigation li a:hover {
	color: #010066;
	background-color: #33F6F8;
}
#navigation li.haji a {
	border-right: 1px solid #08DEE0;
}
#navigation li.haji a:hover {
	border-right: 1px solid #08DEE0;
	}


/* モバイル用ナビゲーションバー */

@media screen and (max-width:640px){
	#right-menu{
	padding: 10px;
	text-decoration: none;
	font-weight:bold;
	color:#08DEE0;
	position:absolute;
	right: 5px;
	top: 20px;
	width:70px;
	border-radius: 5px;
	box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.60);
	-moz-box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.60);
	-webkit-box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.60);
	background-color:#010066;
	display: block;
}

#right-menu:hover{
background:#999;
}

#right-menu {
		display: block;
	}
	
#navigation{
		display: none;
	}
}

※ だらだらとスタイルシートが長くなっちゃってますが、あくまでも当ホームページ使用

なので、参考にされる方はコピペ後、調整してください。

 

 

Sidr 「sidr-package-1.2.1」と、アンドロイド(Android)は相性悪し 改善方法 につづく

Comment(0) | Trackback(1)

TAGS: / / / / / | 2014年11月19日 |

レスポンシブにするため、スライドメニュー「Sidr」を実装。注意点

Categories | ホームページ

レスポンシブにするため、流行のスライドメニュー「Sidr」を実装してみました。

でも、スライドメニューになりません・・・

何で??

色々検証して攻略しました。の備忘録です。

1117 01 400x400 レスポンシブにするため、スライドメニュー「Sidr」を実装。注意点

参考ページ:http://cosao.net/archives/4937

公式サイト:Sidr [ sidr-package-1.2.1 ]

 

まず公式サイトから必要ファイルをダウンロードし、htmlファイル(htlm5)に

こう記述した。(公式引用)

 

<!DOCTYPE html>
<html lang="ja">
<head>
<!-- Your stuff -->
 
<!-- Include Sidr bundled CSS theme -->
<link rel="stylesheet" href="javascripts/sidr/stylesheets/jquery.sidr.dark.css">
</head>
<body>
<!-- Your stuff -->
 
<!-- Include jQuery -->
<script src="javascripts/jquery.js"></script>
<!-- Include the Sidr JS -->
<script src="javascripts/sidr/jquery.sidr.min.js"></script>
</body>
</html>

 

あれ?ダウンロードしたものには、13行目にあるjquery.jsなんて入ってないんだけど。

調べてみても、そのことに触れているページを見つけることが出来ず。

自力で作ってみた。

1117 02 400x400 レスポンシブにするため、スライドメニュー「Sidr」を実装。注意点

まずjquery本家ダウンロードに行き、えっ!英語解らないけど、

大体新しいバージョンは数字が大きいものじゃなかろうかと、

Download the compressed, production jQuery 2.1.1をクリックした。

1117 03 400x400 レスポンシブにするため、スライドメニュー「Sidr」を実装。注意点

ダダダ~って、英語やら記号が表示されたものを全てコピーし、

始にダウンロードしたjquery.sidr.min.jsを、コピペしたファイル

(jquery.sidr.min – コピー.js)に全て貼り付け、ファイル名をjquery.jsにして保存。

 

次にhtmlコードを記述。

 

<a id="simple-menu" href="#sidr">Toggle menu</a>
 
<div id="sidr">
<!-- Your content -->
<ul>
<li><a href="#&">List 1</a></li>
<li class="active"><a href="#">List 2</a></li>
<li><a href="#">List 3</a></li>
</ul>
</div>
 
<script>
$(document).ready(function() {
$('#simple-menu').sidr();
});
</script>

 

以上で問題なく表示できるはず?、が、当ホムペではうまく表示されないのは何故?

かなり時間を費やしましたが、原因がやっと分かりました。

今までライトボックスでjquery(jquery-1.7.2.min.js)を使っていたので、

それと被っていたからでした。

 

<script type="text/javascript" src="lightbox/jquery-1.7.2.min.js"></script>

 

lightboxをやめたら(消したら)無事表示できました!

もしこの手がうまく動作しなかったら、類似した「javascript」が被っていないかを、

再度検証するべし。

 

右からスライドのレスポンシブにカスタマイズ に つづく

Comment(0) | Trackback(1)

TAGS: / / / / / / / | 2014年11月17日 |

新しい記事 »