Top

レスポンシブ

ホームページ(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)

 

1
2
3
4
5
6
7
8
9
10
.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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
/* 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)に

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

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!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コードを記述。

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<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)を使っていたので、

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

 

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

 

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

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

再度検証するべし。

 

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

Comment(0) | Trackback(1)

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

新しい記事 »