以前、在庫リスクなし！オリジナルグッズを作って販売できるWebサービスまとめで
作成販売サイトをいろいろご紹介しました。
その中でも、ひときわグッズのバリエーションがあった「ClubT」。
Tシャツはもちろん、マグカップから時計、果てはデコレーションカーまで
さまざまなグッズのデザインが可能とのこと。
今回はそんな「ClubT」にスポットを当ててご紹介します。
実際に登録から商品販売まで一通り試し、その中で作成のポイントをまとめてみました。
ClubT
https://clubt.jp/
※ご利用の際はサイトの規約などをご確認ください。
※2015/08/31現在の情報です。
続きを読む オリジナルグッズを作成&販売! ClubTを試してみました
こんにちは。
野球とかインターハイとかインカレとか見てたらスポーツをしたくなったyasaiです。
もうすぐスポーツの秋ですが、今年もきっと食欲と読書と仕事の秋なんだろうなぁ。
さて今回は最近ハンバーガーメニューを使ったグローバルメニューの案件が多かったので、
何となく自分向けの備忘録です。
実装はHTMLとCSSだけ。Javascriptは使いません。
<nav class="hamburger_menu"> <input type="checkbox" id="hamburger__btn"> <label for="hamburger__btn" class="hamburger__btn"><span></span></label> <div class="menu_content"> <ul> <li><a href="">menu01</a></li> <li><a href="">menu02</a></li> <li><a href="">menu03</a></li> <li><a href="">menu04</a></li> <li><a href="">menu05</a></li> <li><a href="">menu06</a></li> </ul> </div> </nav>
Javascriptを使わないので、メニューのオンオフの切り替えはcheckboxで行います。
Label要素の中に空のspan要素を配置したのは、span要素の疑似要素を使って3本線を表現するためです。
sassの記述はこうなりました。以下sassで記述します。
.hamburger_menu
#hamburger__btn{
display: none;
& ~ .menu_content {
visibility: hidden;
}
&:checked ~ .menu_content {
visibility: visible;
}
}
.hamburger__btn{
display: block;
width: 40px;
height: 40px;
border-radius: 0 0 5px 5px;
background-color: #ccc;
position: fixed;
top: 0;
right: 10%;
z-index: 100;
&:after {
content: '';
display: block;
width: 60%;
height: 2px;
background-color: #fff;
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
}
span {
width: 100%;
height: 100%;
display: block;
position: relative;
&:before,
&:after {
content: '';
display: block;
width: 60%;
height: 2px;
background-color: #fff;
position: absolute;
left: 50%;
transform: translateX(-50%) translateY(-50%);
}
&:before {
top: 25%;
}
&:after {
bottom: 25%;
}
}
}
.menu_content{
position: fixed;
top: 50%;
left: 50%;
z-index: 10;
transform: translateX(-50%) translateY(-50%);
&:after {
content: '';
position: fixed;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
z-index: -1;
width: 0;
height: 0;
background-color: rgba(0, 0, 0, 0.7);
border-radius: 50%;
transition: width 1s ease 0s, height 1s ease 0s, opacity 0s ease 0s;
}
a {
color: #fff;
text-decoration: none;
}
}
#hamburger__btn:checked{
& ~ .menu_content:after {
width: 200vw;
height: 200vh;
}
& ~ .hamburger__btn{
&:after {
content: none;
}
span{
&:before,
&:after{
left: 44%;
transform: translateX(-50%);
}
&:before{
top: 25%;
transform: rotate(-45deg) translateX(-50%);
transform-origin:center center;
}
&:after{
bottom: 25%;
transform: rotate(45deg) translateX(-50%);
transform-origin:center center;
}
}
}
}
}
ちょっと長くなりましたが、やってることは順序は前後しますが①メニューの切り替え、②メニューがオンになったときのスタイル、③メニューのページに対する絶対配置です。
#hamburger__btn{
display: none;
& ~ .menu_content {
visibility: hidden;
}
&:checked ~ .menu_content {
visibility: visible;
}
}
checkbox自体は非表示にして、label要素のクリックでオンオフを切り替えます。
関節セレクタ~と:checked擬似クラス セレクタを使ってcheckbox以降の兄弟要素のスタイルを変えていきます。
メニューがオンになったときには、
です。
.menu_content{
position: fixed;
top: 50%;
left: 50%;
z-index: 10;
transform: translateX(-50%) translateY(-50%);
&:after {
content: '';
position: fixed;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
z-index: -1;
width: 0;
height: 0;
background-color: rgba(0, 0, 0, 0.7);
border-radius: 50%;
transition: width 1s ease 0s, height 1s ease 0s, opacity 0s ease 0s;
}
a {
color: #fff;
text-decoration: none;
}
}
#hamburger__btn:checked{
& ~ .menu_content:after {
width: 200vw;
height: 200vh;
}
}
メニューの中身(ul要素)を画面中央にfixedし、そのafter疑似要素でオーバーレイ部分を作ります。オンになったら拡大するアニメーションにしました。
.hamburger__btn{
display: block;
width: 40px;
height: 40px;
border-radius: 0 0 5px 5px;
background-color: #ccc;
position: fixed;
top: 0;
right: 10%;
z-index: 100;
&:after {
content: '';
display: block;
width: 60%;
height: 2px;
background-color: #fff;
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
}
span {
width: 100%;
height: 100%;
display: block;
position: relative;
&:before,
&:after {
content: '';
display: block;
width: 60%;
height: 2px;
background-color: #fff;
position: absolute;
left: 50%;
transform: translateX(-50%) translateY(-50%);
}
&:before {
top: 25%;
}
&:after {
bottom: 25%;
}
}
}
#hamburger__btn:checked{
& ~ .hamburger__btn{
&:after {
content: none;
}
span{
&:before,
&:after{
left: 44%;
transform: translateX(-50%);
}
&:before{
top: 25%;
transform: rotate(-45deg) translateX(-50%);
transform-origin:center center;
}
&:after{
bottom: 25%;
transform: rotate(45deg) translateX(-50%);
transform-origin:center center;
}
}
}
}
3本線はlabel要素(.hamburger__btn)の疑似要素で中央に1本。その子要素spanの疑似要素で上下に引いています。
メニューがオンになったときは中央の線を非表示にして子要素spanの線を45度回転させました。
③メニューのページに対する絶対配置に関しては、そのままなので割愛します。
ただ、チェックボックスがオーバーレイの上に来ないと切替が出来なくなってしまうのでご注意を。
今回制作した案件はPCサイズでもハンバーガーメニューを使うデザインだったのですが、ハンバーガーメニューからしかページ遷移ができないページの場合に、ちょっと使い勝手が悪く感じました。
メニューの内容が見えているグローバルメニューと違って、1クリックしないとメニューの内容がわからない、移動できないっていうのは、使う側からするといささか不便なんだなぁと。
視線がページのコンテンツを読むために上から下に流れっていって、そこからページ遷移のためにハンバーガーメニューを探すっていうのがいかんのかも。
スマホの場合はコンテンツの終わりとハンバーガーメニューを同時に視界にとらえられるので、そこまで違和感ないんですけどね。
ハンバーガーメニュー使うときは、コンテンツの中からページ遷移させるためのテキストリンクやボタンが見てくれる人のために必要なんだなと感じたのでした。
最後にsassだけじゃなくてメニュー部分のCSSへ切り出したファイルもリンクしておきますね。
Pure CSS Fullscreen Navigation Menu
レスポンシブなサイト制作をした際に便利そうだったものをアレコレまとめてみました。
制作前 ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
今回は、フレームワークの利用を考えていて何を使うのが一番良いか迷っていました。
その時に便利だったのがコチラのサイト
[CSS Front-end Frameworks with comparison]
http://usablica.github.io/front-end-frameworks/compare.html
フレームワークが一覧表になっており、対応するブラウザ、LESSやSASSの利用可能状況、ライセンスやデバイスについてわかりやすくまとまっています。
制作中 ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
【小技】テキストの改行操作。
今更と言う方も多いかと思いますが…
テキストで見出しを設定した際に、思った所で改行を行いたかったため探しました。
改行したい所に改行タグをいれ、CSSで『display:none;』とし
メディアクエリで、今度は『display:block』とすれば改行されます。
もしくは、spanで要素を設定して、改行したい時に『display:block』を
設定すれば、改行となります。
【jQuery】Youtubeの動画を背景に設置。
使ってみたのは『jquery.mb.YTPlayer』。
jquery.mb.YTPlayer
http://pupunzi.com/
設置は簡単で、一通りのJS、CSSを読み込むのは他の物でも同じですが
設置場所のパラメーターがわかりやすくて良いんです。
”data-property”に値を設定するだけで良いのですが、以前からあるYoutubeのバラメータが使えます。
ただ、スマートフォンなどからアクセスした際には非表示になりますので、対応策が必要なのが玉にキズですが…
サイトの確認 ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
各デバイスのチェック。
今では、ブラウザで確認できる物が多いですが、
『RWD Bookmarklet』
http://responsive.victorcoulon.fr/
このサイトにある『RWD Bookmarklet』ボタンをブックマークにドレッグ＆ドロップし、チェックしたいページでブックマークをクリックすると、iPhone、iPadの確認ができます。
それだけではなく、キーボードを表示するとどうみえるか？をチェックする事ができます。
また、VIEWPORT RESIZERも同じようにブックマームをしてチェックを行うのですが
iPhoneからAndroid、カスタムサイズでのチェックを行う事ができます。
テストサーバーを使って、閲覧にパスワードが必要な場合などは
このやり方が便利でいた。
『VIEWPORT RESIZER』
http://lab.maltewassermann.com/viewport-resizer/
探せば、結構イロイロと便利なサイトや、情報をまとめてくれているサイトが気付かないうちにあったりしますので日々のストック作業を行ってみてはいかがでしょう。
前回サイト制作から2年が経過しリニューアル
レスポンシブ対応、コンテンツの充実を行いました。
公開 2015年8月12日
URL http://happitec.co.jp/
●制作内容
・デザインの刷新
・レスポンシブ対応
・トップページは垂直にダイナミックなスライドする画面スクロール、