「CSS」カテゴリーアーカイブ

Googleマップをスマホサイトに埋め込むとはみ出す時の対処法

レスポンシブのスマホサイトに Google map を埋め込むと、はみ出してしまう。

これをはみ出さないようにしたい。

共有から

iframeのタグをコピペする。

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d23796.650854092717!2d140.75646100404356!3d41.79423516221846!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x5f9ef46bcb8d5525%3A0xa9e4bd2d96c4d502!2z54m55Yil5Y-y6Leh5LqU56ic6YOt6Leh!5e0!3m2!1sja!2sjp!4v1460702096429" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>

HTMLをちょこっとだけ改造

<div class="gmap"><iframe...上のコピペソース.../iframe></div>

という感じで、 div でくくってやる。

そして普通にページに貼り付ける。

ちなみに class名の gmap は何でもOK。

CSSに追記

.gmap {
 position: relative;
 padding-bottom: 56.25%;
 padding-top: 30px;
 height: 0;
 overflow: hidden;
}

.gmap iframe,
.gmap object,
.gmap embed {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
}

これだけで、勝手にレスポンシブに対応してくれる。

コピペソースに　

width="600" height="450"

　などの記述があるが、レスポンシブ時にはこれは無視されるのでそのままでOK。

Ajax他, CSS, スマホ・パソコン・Web関連

「三」みたいなスマホ用jQueryメニューをホームページに導入する方法

2016/03/22 あすたまコメントする

スマホで「三」をタップ(クリック)すると、メニューがニュル～っと出てくるやつ

正式名称は、ハンバーガーメニューと言うらしいが、あまりこの呼称は浸透していない。

もちろんスマホもPCも対応。

とにかく、これを導入してみよう。

導入イメージはこんな感じ↓

デモページはこちら(デモページ右上にMENUがある。)

jQueryなどのメニューに必要なものを揃える

右クリックで「対象を保存」などでダウンロード可能。
・jquery.min.js
・jquery-ui.min.js
・menu3.js
・index.html
・menu3.css
・「三」と「X」の画像

これが最低限必要。

ちなみに、上記リンク先は全てテキストにしているので、ダウンロードして使う場合は、拡張子の.txtをそれぞれ、「.js」「.css」「.html」などに変更しておくこと。

3menu.zip
↑index.html、menu3.css、menu3.js、jquery.min.js、jquery-ui.min.js、MENUとXの画像2個を全てまとめて圧縮したもの(フォルダ階層あり)はこちら。

サーバー上に設置

cssフォルダ/menu3.css

imgフォルダ/menu.png、menu2.png

jsフォルダ/jquery.min.js、menu3.js、jquery-ui.min.js

index.html

と言う感じで設置する。

パーミッション等は変更必要ないので、そのままアップロードする。

メニューや色などの変更

・メニューの中身は index.html の中の menu1 menu2 menu3 などと書いている部分を修正。
URLも同様。

なお、同じように menu5 menu6 を追加すれば、メニューは自動的に増える。

・色は menu3.css の
.menu3 {
z-index: 1000000;
font-weight: bold;
font-size: 0.8em;
width: 100%;
background: #FFCC00;
position: fixed;
top: 20px;
right: 0;
text-align: center;
}
この辺りを修正。

画像等も適当に入れ替え可能。

ハンバーガーメニューの簡単な解説

HTMLファイル

↓下記コードの2行目の button の img/menu.png の部分を MENU などのテキストにする事も可能。
その場合はCSSでサイズなどを調整する必用がある。

※サンプルの menu.png は iOSのRetinaディスプレイ対応のため、画像サイズが陪になっている。

<div><!– humberger menu–>
<button class=”hamburger”><img src=”img/menu.png” width=”51px” height=”45px” /></button>
<button class=”cross”><img src=”img/menu2.png” /></button>
</div>
<div class=”menu3″>
<ul>
<a href=”index.html”><li>menu1</li></a>
<a href=”2.html”><li>menu2</li></a>
<a href=”3.html”><li>menu3</li></a>
<a href=”4.html”><li>menu4</li></a>
</ul>
</div>
<script src=’https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js’></script>
<script src=”js/menu3.js”></script>

menu3.js

スタイルシートなどに記述するクラス名などを変更したい場合はこちらを編集。

$(“.cross”).hide();
$(“.menu3”).hide();
$(“.hamburger”).click(function() {
$(“.menu3”).slideToggle(“slow”, function() {
$(“.hamburger”).hide();
$(“.cross”).show();
});
});

$(“.cross”).click(function() {
$(“.menu3”).slideToggle(“slow”, function() {
$(“.cross”).hide();
$(“.hamburger”).show();
});
});

CSS, スマホ・パソコン・Web関連

【All Animation CSS3】CSS3だけでアニメーションや3Dエフェクトを表現できる

2016/03/12 あすたまコメントする

CSSだけで簡単にクリックエフェクトなどをアニメ化する

All Animation CSS3 オール・アニメーションCSS3とは？

スタイルシートフレームワークで、簡単にクリックやタップエフェクトをアニメーション化する方法だ。

HTMLにclassをつけるだけで実装できるので簡単。プログラミングの知識がなくてもできるので嬉しい。

超簡単な導入方法を紹介しよう。

オールアニメーションCSS3の導入方法

1. CSSとjQueryをダウンロード

右クリックで保存しよう。
all-animation.cssは「通常版」と「ミニファイド版」の2種類あるが、どちらでもOK。

・all-animation.css←通常版
・all-animation.min.css←minified版(軽量版)

・position.css
↑画像のサイズや表示位置を変える時に編集する。

・jquery-1.11.1.min.js

・bootstrap.min.js

・main.js

なお、.jsファイルは「.txt」としているので、ダウンロードしたら拡張子を「.js」に変更しておこう。ファイル名も確認しておこう。

・アーカイブ版 .zip (導入サンプルまとめてダウンロード)
all-animation.zip

2. CSSとjsファイルの読み込み

<head> と </head> の間で、cssを読み込もう。

<link rel="stylesheet" type="text/css" href="css/position.css" /><!–- all animation css3 –->
<link rel="stylesheet" type="text/css" href="css/all-animation.min.css" /><!–- all animation css3 –->

次に、</body>の直前辺りで、js ファイルを読み込もう。

<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>

これで読み込みは完成。あとは画像にclassをつけたり、するだけでアニメーションエフェクトが実装できる。

3. 画像のアニメーションエフェクト

画像アニメーションのデモページはこちら

画像の<img>のタグを div で囲んで、class にエフェクトを記入すると、その画像にアニメーションエフェクトをつけることができる。

記述例：

使用可能クラス一覧(エフェクトのデモはデモページを参考に。)

エフェクト名	クラス名
ダンス	dance
回転(ジャーナル)	journal
鼓動(パルス)	pulse
ゆっくり鼓動	pulse-slow
ジャンプ	japm
4点	four-rock
上バウンド	enter-up-bounce
下バウンド	enter-down-bounce
右バウンド	enter-right-bounce
左バウンド	enter-left-bounce
背面バウンド	scale-bounce
ジャンプバウンド	jump-bounce
右フリップ	tree-flip-right
左フリップ	tree-flip
上フリップ	tree-flip-up
下フリップ	tree-flip-down
左めくり	flip-left-bounce
めくり	rotate-flip
右めくり	flip-right-bounce
上から登場	flip-top
左から登場	flip-left
右から登場	flip-right
下から登場	flip-bottom
縦めくり	rotate-flip-down
ぶら下がり落ち	rotate-down-bounce
回転消滅	rotate-out
点滅	flash-bang
吹き飛び	bomba
ぐるぐる	rotate-row
下へ網掛け	legend-down
上へ網掛け	legend-up
左から網掛け	legend-left
右から網掛け	legend-right
終幕	legend-flip
くっきり	portrait-before
ぼんやり	portrait-blur
そのまま	scale-before

4. ボタンのアニメーションエフェクト

ボタンのアニメーションのデモページはこちら

button に data-efect= として、エフェクトのクラス名を記入するだけで、画像にアニメーションをつけることができる。

button の下で、画像を読み込んでおく。

記述例：

使用可能クラス一覧は画像のアニメーションエフェクトと全く同じ。

5. メニューのアニメーションエフェクト

メニューのアニメーションのデモページはこちら

ulやdivにクラスを付けて、簡単にアコーデオンやタブを実装可能。

個別アコーデオン
<ul class="all-animation double-acordeon">

連動アコーデオン
<ul class="all-animation acordeon">

フェードタブ
<div class="all-animation tab-panel">

スライドタブ
<div class="all-animation tab-slide-panel">

記述方法(個別アコーデオンの場合)：

その他の記述方法は、メニューのアニメーションのデモページのソース、またはall-animation.zipを参照。

6. チェックボックスのアニメーションエフェクト

チェックボックスのアニメーションのデモページはこちら

div にクラス名を記入するだけで、チェックボックスやラジオボタンにエフェクトを付けて、トリガーボタンなどを作れる。

記述方法：
・トリガー
<div class="all-animation triggerOnOf">
<input id="check9" name="check9″ type="checkbox" />
<label for="check9"> トリガー黄緑</label>
</div>

・ラジオボタン
<div class="all-animation box-check">
<input id="radio1" name="radio1" type="radio" />
<label for="radio1"></label>
</div>
<div class="all-animation box-check">
<input id="radio2" name="radio1" type="radio" checked />
<label for="radio2"></label>
</div>

・チェックボックス
<div class="all-animation puft-in">
<input id="check1" type="checkbox" />
<label for="check1"></label>
</div>

その他のエフェクトはメニューのアニメーションのデモページのソース、またはアーカイブ版all-animation.zipを参照。

・アーカイブ版(導入サンプルまとめてダウンロード)
all-animation.zip

あすたまいず