web制作 Googleマップ活用
GoogleマップをHTMLに埋め込むのは簡単です。Googleマップの埋め込みGoogleマップへアクセスし、目的の住所を検索、表示された結果に共有ボタンがあると思いますので、それをクリックします。すると「リンクを送信する」と「地図を埋め...
レスポンシブ
web制作 CSS バラバラなサイズの画像を同じサイズにして表示する方法
サイズがバラバラな画像をスライダーなどにして同じサイズで表示させたいことがあったので、いろいろと検索してみました。実際は思った表示にはならないのですが、イメージに近い表示になりました。できるだけ同じようなサイズの画像でやることがベストですが...
web制作 クリッカブルマップ（イメージマップ）をレスポンシブ対応にする
あまり必要な場面はないかもしれませんが、今回必要になったので覚書として。まずはDreamweaverなどでも座標を簡単に作成することが出来ますが、サイトでも簡単に作成できます。私が利用しているのはこちらのサイト。他にも同じようなサイトはある...
web制作 YouTubeの埋め込み設定
iframeを使う方法簡単で手軽な方法です。YouTubeのプレイヤーのしたの共有ボタンを押すとリンクの共有の中に「埋め込み」という項目があります。こちらをクリックするとiframeのタグが表示されるので埋め込みたい部分にコピペすればOKで...
web制作 pxをvwに変換する計算方法
cssにはcalc機能がついているので、デザインから画像サイズ等々をvwに計算する計算方法を見つけたのでメモ。px÷画面サイズ×100＝vw上記で計算できるようです。いろんなサイトを見て、色んな方法があるようですが、こちらが簡単だったので。...
Bootstrap スマホのhover
最近はモバイルファーストでスマホ対応のサイトがほとんどです。スマホ用のサイトを作成する方法とレスポンシブサイトとしてスマートフォンもPCも同じページのレイアウトを変更して見せ方を変える方法とで対応してるサイトがあります。今回はBootstr...
レスポンシブ 固定したナビにスクロールをつける応急処置
ヘッダーを固定してハンバーガーメニューをつけると長いメニューの場合は下の方に記載されているメニューが表示されないということも、、、そこで作り方を変更したほうが良い時もありますが、時間がない場合はスクロールをつける方法。表示する子要素に高さを...
レスポンシブ SVG作成 アンドロイドで表示できない場合
pngファイルをsvgに変換する作業を行ったのですがサイト上からの変換だときれいなSVGが作成できずillustratorで作業しても、結局ベクター画像でないので綺麗に変換できず、Photoshopを利用してみたところ見た感じきれいだったの...