レスポンシブ
2015年3月1日
Categories | ホームページ
去年の秋ぐらいからレスポンシブwebデザインの勉強を始め、
試行錯誤し、何とか見れるようにまでなってきたので、
本日レスポンシブへと更新しました。
自分のスマホ（Android）では確認しましたが、iPhoneでは未確認。
なので何か不具合等がありましたらお知らせください。
また微調整が必要なところも数箇所発見したので、修正し次第
今度はほったらかしていた「HCZ TV」のリニューアルに着手予定。
2015年2月28日
Categories | ホームページ
スライドメニュー「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;
}
以上
※ 最後の最後になりましたが、スマホ（アンドロイド）で検証してみたら、
いけてないことに気付きました。
スライドメニューを表示させ閉じるボタンをすると、画面サイズが固定され、
縦で使っていたスマホを横にしてみると、縦のサイズが依存されてしまう。
再読み込みすると元に戻るけど、これってブラウザによって違いがあるみたいだ。
2014年11月19日
Categories | ホームページ
前回の（「Sidr」を実装 ）の続きです。
実装できたところで、今回はカスタマイズしました。
ボタンを変更し、右からメニューをスライドさせる。
ホームページの横幅が640px以上だと、Sidrのメニューボタンが消え、
横並びのメニューリストが出現する。参考ページ
■ メニューボタンオンで右からメニューがスライド。
■ 横幅が640以上だとメニューボタンが消え、横並びのメニューリストが出現。
<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>
/* PC用ナビゲーションバー */
#right-menu{ display:none;}
#navigation {
width:910px;
padding:8px 0 8px;
position:relative;
overflow:hidden;
font-family: "Times New Roman", 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;
}
}
※ だらだらとスタイルシートが長くなっちゃってますが、あくまでも当ホームページ使用
なので、参考にされる方はコピペ後、調整してください。
2014年11月17日
Categories | ホームページ
レスポンシブにするため、流行のスライドメニュー「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なんて入ってないんだけど。
調べてみても、そのことに触れているページを見つけることが出来ず。
自力で作ってみた。
まずjquery本家ダウンロードに行き、えっ！英語解らないけど、
大体新しいバージョンは数字が大きいものじゃなかろうかと、
Download the compressed, production jQuery 2.1.1をクリックした。
ダダダ～って、英語やら記号が表示されたものを全てコピーし、
始にダウンロードした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」が被っていないかを、
再度検証するべし。
