レスポンシブ

web制作

Googleマップ活用

GoogleマップをHTMLに埋め込むのは簡単です。 Googleマップの埋め込み Googleマップへアクセスし、目的の住所を検索、表示された結果に共有ボタンがあると思いますので、それをクリックします。すると「リンクを送信する」と「地図を...
CSS

バラバラなサイズの画像を同じサイズにして表示する方法

サイズがバラバラな画像をスライダーなどにして同じサイズで表示させたいことがあったので、いろいろと検索してみました。 実際は思った表示にはならないのですが、イメージに近い表示になりました。 できるだけ同じようなサイズの画像でやることがベストで...
web制作

クリッカブルマップ(イメージマップ)をレスポンシブ対応にする

あまり必要な場面はないかもしれませんが、今回必要になったので覚書として。 まずはDreamweaverなどでも座標を簡単に作成することが出来ますが、サイトでも簡単に作成できます。 私が利用しているのはこちらのサイト。 他にも同じようなサイト...
web制作

YouTubeの埋め込み設定

iframeを使う方法 簡単で手軽な方法です。YouTubeのプレイヤーのしたの共有ボタンを押すとリンクの共有の中に「埋め込み」という項目があります。こちらをクリックするとiframeのタグが表示されるので埋め込みたい部分にコピペすればOK...
web制作

pxをvwに変換する計算方法

cssにはcalc機能がついているので、デザインから画像サイズ等々をvwに計算する計算方法を見つけたのでメモ。 px÷画面サイズ×100=vw 上記で計算できるようです。いろんなサイトを見て、色んな方法があるようですが、こちらが簡単だったの...
Bootstrap

スマホのhover

最近はモバイルファーストでスマホ対応のサイトがほとんどです。 スマホ用のサイトを作成する方法とレスポンシブサイトとして スマートフォンもPCも同じページのレイアウトを変更して 見せ方を変える方法とで対応してるサイトがあります。 今回はBoo...
レスポンシブ

固定したナビにスクロールをつける応急処置

ヘッダーを固定してハンバーガーメニューをつけると 長いメニューの場合は下の方に記載されているメニューが 表示されないということも、、、 そこで作り方を変更したほうが良い時もありますが、 時間がない場合はスクロールをつける方法。 表示する子要...
レスポンシブ

SVG作成 アンドロイドで表示できない場合

pngファイルをsvgに変換する作業を行ったのですが サイト上からの変換だときれいなSVGが作成できず illustratorで作業しても、結局ベクター画像でないので 綺麗に変換できず、Photoshopを利用してみたところ 見た感じきれい...