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