AGN Web! - AGN Web! BLOG

とにかく簡単にグッズ作成！ SUZURIを使ってみました。

在庫リスクなし！オリジナルグッズを作って販売できるWebサービスまとめ

やることはグッズのデザインと値段を決めるだけ!
作成〜発送まで請け負ってくれるサービスのご紹介。

今回はSUZURIを実際に使ってみました。

SUZURI
https://suzuri.jp/

※ご利用の際はサイトの規約などをご確認ください。
※2015/09/30現在の情報です。

続きを読むとにかく簡単にグッズ作成！ SUZURIを使ってみました。

WordPressのテーマ選びに悩んだ時は!

ホームページ制作をしている方は、一度くらいは使った事がある……と思う
『WordPress』

今まで、触った事が無かった方だと
『どのテーマを使ったら良いのか』『どのテーマが目的のデザインに合っているのか』など
イロイロと悩む事があるかと思います。

そんな時には、一番シンプルで分かりやすいテーマを使って構築するのが一番ではないでしょうか。
理解できない機能満載のテーマでは、何かあった場合の問題点を探すのにも時間がかかってしまいます。

では、テーマは何を使うか？
私が一番オススメするテーマが

『WPMEMO basic』

『無料WordPressテーマ「WPMEMO basic」を公開しました。』

テーマの特徴
WordPress3.0以上対応
IE6,IE7, IE8, IE9 , Firefox, Chrome,Safariで動作確認済み（ただし、IE6はカスタムメニューのドロップダウンが動作しません）
カスタムメニューに対応
ウィジェットに対応
無料・商用利用可
※利用の際の注意点を必ずお読みください。

このテーマ、本当に必要最低限のファイルしかありません。
imageフォルダは有っても、中身は何も入っていません!!
今まで通常のHTMLサイトを移行するには”持ってこい”のテーマです。
そして、WordPressの構造を学んだり、オリジナルテーマを作る時の基礎にもなりえます。
レスポンシブなサイトを構築しようとした場合でも、好きな物を組み込みながら制作できますので
WordPressに慣れている方も、簡単に使う事ができると思います。

もし、テーマ探しで悩んでいるようならクセの少ないテーマを使って構築してみてはいかがでしょうか。

「CSSだけでマウスオーバーでアニメーションしてくるキャプション」をやってみた

こんにちは。yasaiです。

シルバーウィーク突入ですね！
みなさんはたくさん休めそうですか？

Ri-mode Rainbow様のブログで「画像にマウスを乗せると下からスライドして出てくるのをCSSだけで設置」というのがあったので、勉強がてら僕もやってみました。

Ri-mode Rainbowさんでは、マウスオーバーするエリアを設けてやっておられましたが、僕のは画像の親ボックスにマウスオーバーしたら画像がスライドしてくる仕掛けです。

sc20150919
【DEMO】

HTML

<div class="photo">
    <img src="your-image.jpg" alt="">
    <div class="caption">
        <div>
            <p>ここにキャプション</p>
            <p><a href="">ボタンとか</a></p>
        </div>
    </div>
</div>

<div>

<p>ここにキャプション</p>

<p><a href="">ボタンとか</a></p>

</div>

親要素を.photo、その中に画像と、キャプション用、キャプションというよりいろいろコンテンツを使えるように.captionでマークアップします。

CSS

※sassで書いてます。こちらの方が見通しが良い気がするので。

.photo{
    position: relative;
    overflow: hidden;
    text-align: center;
    img{
        max-width: 100%;
        height: auto;
    }
    .caption{
        position: absolute;
        top: 100%;
        left: 0;
        z-index: 1;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.7);
        transition: top 0.5s ease;
    }
    &:hover .caption{
        top: 0;
    }
}
.caption{
    &>div{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translateX(-50%) translateY(-50%);
        text-align: center;
        color: #fff;
    }
}

.photo{

position: relative;

overflow: hidden;

text-align: center;

img{

max-width: 100%;

height: auto;

}

.caption{

position: absolute;

top: 100%;

left: 0;

z-index: 1;

width: 100%;

height: 100%;

background-color: rgba(0, 0, 0, 0.7);

transition: top 0.5s ease;

}

&:hover .caption{

top: 0;

}

.caption{

&>div{

position: absolute;

top: 50%;

left: 50%;

transform: translateX(-50%) translateY(-50%);

text-align: center;

color: #fff;

}

大まかにレイアウトの部分を抜粋しました。

要点は、

親要素.photoを「overflow:hidden;」にして、表示エリア以外は非表示にする。
imgは親要素に対し100％にしたい。
これは、画像要素の大きさのキャプションを表示しているわけではなく、親要素に対してのキャプション部分の大きさとしているため。上のCSSだと親要素よりも画像が小さかった場合にキャプション部分が画像からはみ出してしまいますね(汗)
キャプション部分は絶対配置で配置し、「top:100%;」で親要素の表示エリアからはみ出させて非表示っぽく。

です。

動作部分としては、

.caption{
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    <span style="color: #ff6600;">transition: top 0.5s ease;</span>
}
&:hover .caption{
    <span style="color: #ff6600;">top: 0;</span>
}

.caption{

position: absolute;

top: 100%;

left: 0;

z-index: 1;

width: 100%;

height: 100%;

background-color: rgba(0, 0, 0, 0.7);

<span style="color: #ff6600;">transition: top 0.5s ease;</span>

}

&:hover .caption{

}

親要素はマウスオーバーされたときに、transitionを使ってtopの値を0までアニメーションさせています。

.captionのheightとhover時のtopの値を変更すれば、画像全体を覆わない高さのキャプション(帯っぽいやつ)など、応用はできそうです。

今回はちょっと軽めだけどこの辺で。こういうのやってるとCSSでいろいろ表現できるようになっていった覚えたてのころの気持ちが蘇りますね。CSS楽しいなぁ。

sassで書いてしまったので、CSSのリンクも載せておきますね。

150903image_caption

今回参考にさせていただいたRi-mode Rainbow様、ありがとうございました!!

バスケットボールスピリッツ電子書籍版販売開始

雑誌「バスケットボールスピリッツ」の電子書籍版がAmazon Kindleストアで販売されています。
ただ今発売記念キャンペーン実施中！

詳細は下記からご覧ください!!

合わせてこれまでのバックナンバーの内容を紹介するページもできてます。

ちなみに皆さんは何で電子書籍読みますか??

専用の端末？スマホ？タブレット？

【Play Back バスケットボールスピリッツ】明日18日ついに電子書籍版が発売される、「バスケットボールスピリッツ」。今回はこれまでに発売されたvol.1〜5までを振り返ってみましょう。…

Posted by バスケットボール・スピリッツ on 2015年9月16日

皆さまより熱い希望をいただいておりました「バスケットボールスピリッツ」電子書籍版がついに発売決定!!いつでも、読みたい所で、お手持ちの端末で！発売日は9/18(金)、Amazonにてお買い上げいただけるようになります！今回の発売を記念して、9/18(金)〜24(木)電子書籍発売記念キャンペーンを実施します!!http://www.bbspirits.com/news/ebookd_kindle/

Posted by バスケットボール・スピリッツ on 2015年9月14日

WordPressの高速化（初級編　EWWW Image Optimizer）

サイトの高速化に取り組む仕事があったついでに、自分たちのブログがどんな状況か、
googleのpage speed Insightsを見てみたところ、

0/100

驚異の0点。はじめて見ました。ひどい。

現状、このブログは素のWordPresst＋twenty fiftyの組合せで、きわめてプレーンな状態です。しかし、google様には問題だらけと言うことで、多くの指摘をうけました。

中でも、一番の心当たりとして、画像の最適化があります。メンバー皆が好きなように画像を貼りまくった記事をアップしていることから、かなり影響がありそうです。しかし、画像の最適化のために結構な枚数の画像をFTPでダウンロードしてから、処理の後、再度アップするのはかなり面倒です。

そこで今回はお手軽にプラグインを導入します。

導入したのは、EWWW Image Optimizerです。プラグインページから新規追加でカンタンに導入できます。導入後はサイドメニューのメディアからBulk Optimizeを開き、「Start optimizing」を押すだけです。画像の数によっては、かなり時間が掛かりますので、そこだけは覚悟して押して下さい。

最適化が終わって、PageSpeed Insightsに再チャレンジ。

とりあえず、一気に25までスコアアップしました！~~（元が悪いと上げるのもカンタンです。）~~
そこそこ画像がたまっている環境ですと、いっぺんに処理できて楽です。オススメです。

他にも記事にしようかと、色々試したのですが、致命的では無くとも細々とトラブルが起きました。
特にキャッシュ系は環境を選びます。素の状態で、ほぼ問題なかったのは上記プラグインのみでした。

今回は検証のみだったので、お手軽なものを使いましたが、プラグインに頼らず、キャッシュや、DBの最適化などに取り組み、地道に改善してみたいと思います。

つづく。

Xcode 7のインストールから実機テストまで

Xcode 7でiOSアプリの実機テストが無料でできるようになりました。
デバイス登録の必要なく簡単な作業で実機テストできます。
インストールから実機テストまで試したので、その方法をまとめます。

前提条件

Xcode 7をインストールするにはMacOS X バージョン10.10（Yosemite）が必要です。
OS X バージョン10.9（Mavericks）では、インストールできませんでした。
また、Apple IDが必要ですので、無い方は取得してください。

Xcode 7をダウンロード

Xcode 7 beta6をダウンロードします。
下記のURLからダウンロードしてください。
https://developer.apple.com/xcode/downloads/

ダウンロードファイルが4GB近くありますので、通信環境をご確認の上、
ダウンロードを開始してください。

※2015/09/09現在　Xcode 7 beta6です。

ダウンロードボタンをを押すと
Apple Developerのログイン画面が表示されます。

お手持ちのApple IDを入力しSign inを押してください。
Sign inが成功すると、ダウロードが始まります。

インストール

ダウロードが終了したら、Xcode_7_beta_6.dmgを開きます。
Xcode_betaをアプリケーションにインストールします。
データ容量が大きいので、マシンのスペックによっては時間が掛かります。
　　

インストールが終わりましたら、
Xcode_betaを開きます。
初回は、マシンのスペックによって起動まで時間が掛かる場合があります。

途中でライセンス同意のウィンドウが出たら、同意して進めていきます

無事に起動すると下記の画面が立ち上がります。

以上でインストールが完了です。

実機テストの為のプロジェクトの作成

実際にテストするために、テスト用のプロジェクトを作成します。
まず、Create a new Xcode projectをクリックします。

テンプレートを選ぶ画面になるので、iOSのApplicationから適当なテンプレートを選択します。

今回はテスト用でSingle View Applicationを使います。
選択したら、Nextボタンをクリックし次へ進みます。

プロジェクト情報入力する画面です。
テストなので、適当な文字を設定します。

Nextボタンをクリックしプロジェクトの保存先をしてします。

実機テスト

開発画面へ移ります。
テストですの最低限必要な項目を入力します。

①　読み込む端末のApple IDを入力します。
Apple Developerで使用したApple IDと違っても問題ありません。

②　アプリが対応するOSのバージョンを設定します。
端末がiOS7で設定が8.0にすると読み込みができません。
端末のiOS以下の数値を設定しましょう。

ここでPCとモバイル端末をUSBで接続して端末を読み込みを行います。
初回は、時間が掛かると思いますので、焦らず待まちます。

端末の読み込みが終わったら

③　お使いの端末が表示されますので、選択します。

④　再生を押すとビルドが開始され自動的にアプリが起動します。

端末にもアプリがインストールされて
しっかりアイコンが表示されています。

以上のように
Xcode_7に端末情報を読み込めば簡単に実機テストができます。

iOSアプリ実装前にXcode_7をインストールし、自分用アプリを製作して使うこともできます。
是非、参考にしてください。

制作事例　社会福祉法人わかば福祉会様

新発田市を中心に幼稚園と保育園を展開している法人様です。
入園者の父兄向けのサービスの向上のため、
ホームページのリニューアルを行いました。

公開　2015年9月1日
URL　http://www.wakaba-net.ed.jp/ai/
●制作内容
・デザインの刷新
・CMSの導入

オリジナルグッズを作成&販売! ClubTを試してみました

以前、在庫リスクなし！オリジナルグッズを作って販売できるWebサービスまとめで
作成販売サイトをいろいろご紹介しました。

その中でも、ひときわグッズのバリエーションがあった「ClubT」。
Tシャツはもちろん、マグカップから時計、果てはデコレーションカーまで
さまざまなグッズのデザインが可能とのこと。
今回はそんな「ClubT」にスポットを当ててご紹介します。
実際に登録から商品販売まで一通り試し、その中で作成のポイントをまとめてみました。

ClubT
https://clubt.jp/

※ご利用の際はサイトの規約などをご確認ください。
※2015/08/31現在の情報です。

続きを読むオリジナルグッズを作成&販売! ClubTを試してみました

CSSだけで実装するハンバーガーメニュー(暫定版…)

こんにちは。

野球とかインターハイとかインカレとか見てたらスポーツをしたくなったyasaiです。
もうすぐスポーツの秋ですが、今年もきっと食欲と読書と仕事の秋なんだろうなぁ。

さて今回は最近ハンバーガーメニューを使ったグローバルメニューの案件が多かったので、
何となく自分向けの備忘録です。

実装はHTMLとCSSだけ。Javascriptは使いません。

【DEMO】

HTML

<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>

<ul>

</ul>

</div>

</nav>

Javascriptを使わないので、メニューのオンオフの切り替えはcheckboxで行います。

Label要素の中に空のspan要素を配置したのは、span要素の疑似要素を使って3本線を表現するためです。

CSS

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;
                }
            }
        }
    }
}

100

101

102

103

104

105

106

107

108

109

110

.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;
    }
}

#hamburger__btn{

display: none;

& ~ .menu_content {

visibility: hidden;

}

&:checked ~ .menu_content {

visibility: visible;

}

checkbox自体は非表示にして、label要素のクリックでオンオフを切り替えます。

関節セレクタ~と:checked擬似クラスセレクタを使ってcheckbox以降の兄弟要素のスタイルを変えていきます。

②メニューがオンになったときのスタイル

メニューがオンになったときには、

メニューの内容がオーバーレイでページのセンターに表示される。
メニューボタンの3本線が×マークになる。

です。

1.メニューの内容がオーバーレイでページのセンターに表示

.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;
    }
}

.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疑似要素でオーバーレイ部分を作ります。オンになったら拡大するアニメーションにしました。

2.メニューボタンの3本線が×マークになる。

.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;
            }
        }
    }
}

.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へ切り出したファイルもリンクしておきますね。

hamburger.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/

探せば、結構イロイロと便利なサイトや、情報をまとめてくれているサイトが気付かないうちにあったりしますので日々のストック作業を行ってみてはいかがでしょう。