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も同じページのレイアウトを変更して 見せ方を変える方法とで対応してるサイトがあります。 今回はBoo...
レスポンシブ 固定したナビにスクロールをつける応急処置
ヘッダーを固定してハンバーガーメニューをつけると 長いメニューの場合は下の方に記載されているメニューが 表示されないということも、、、 そこで作り方を変更したほうが良い時もありますが、 時間がない場合はスクロールをつける方法。 表示する子要...
レスポンシブ SVG作成 アンドロイドで表示できない場合
pngファイルをsvgに変換する作業を行ったのですが サイト上からの変換だときれいなSVGが作成できず illustratorで作業しても、結局ベクター画像でないので 綺麗に変換できず、Photoshopを利用してみたところ 見た感じきれい...