【Google Map】API無しでサイトへGoogleマップを埋め込む方法

多くの方がご愛用の「Googleマップ」。 お店のサイトなど、直接足を運んでもらうような集客が必要なサイトでは是非アクセス案内として掲載しておきたいですよね。 このGoogleマップの埋め込みについては非常に簡単な方法と、Googleの提供している「Google Maps API」を使った少し手順のかかる方法の2種類があります。 後者のGoogle Maps APIを使用する方法だと、デザインをサイトに合わせて編集出来たり、複数の場所を一度にマーカー表示させたり、様々なカスタマイズが可能ですが、こういったAPIの利用に慣れていない方には少し手もかかり難易度が高くなります。 今回は前者のシンプル…

【CSS】2020年版ベンダープレフィックスの必要・不要&自動付与の方法

2020年現在、Web制作においてCSSでベンダープレフィックスを何につければいいのか質問を受けたので、少し調査してみました。 ベンダープレフィックスとはCSSの比較的新しいプロパティに各ブラウザを対応させる記述です。 「vendor」ベンダー…各ブラウザの提供者のこと。 「prefix」プレフィックス…頭につける定型文のようなもので「接頭辞」などと訳されます。 個人的にはほぼBootstrapを利用するのでベンダープレフィックスについてあまり気にせずコーディングして、最終段階でクロスブラウザチェックの際におかしい部分があれば対応するという流れにしていて、特に近年問題はありませんでした。 多く…

【HTML】リンクから件名や定型文を入れてメールソフト起動する方法

aタグのmailto属性を使って件名や本文定型文、CC、BCC入力済の状態でメールソフトを起動する方法を解説しています。WebサイトのリンクからOutlookなどOS標準メーラーが起動するようにできます。

Slick.jsやSwiper.js等が全く動かず小一時間無駄にした話

Slick.jsや、当ブログでも解説記事を書いたSwiper.jsなどの便利なスライダープラグイン。 ウェブのフロントエンド制作においては必須クラスに重宝すると思います。 今日も、とある案件作業でlaravelアプリケーションのフロントエンドでサクッと使用しようと思って導入していたら ｢あれ？動かない、、、｣ コンソールを見てちょいちょい出てるエラーに対処しても動かず。 表題の通り、小一時間必死に調べて無駄に過ごしました。。 解説記事とか書いていた手前でお恥ずかしい。 原因はあっけないものでしたが、今後もし誰かが同じように小一時間を無駄に過ごす事の無いよう、備忘録として記しておこうと思います。

【Laravel6】ColorfulBoxサーバーへ自力デプロイ

レンタルサーバーは安定した老舗も良いですが、このところはより高速な「LiteSpeed」採用やWordpress特化型など、新鋭のサーバーも人気になってきています。 例えばよく聞くクラウド型レンタルサーバーだと 老舗エックスサーバーから登場のWordPress専用クラウド型「wpX Speed」 月額880円からの高速LiteSpeed採用クラウド型「mixhost(ミックスホスト)」 そして今日の本題、「ColorfulBox（カラフルボックス）」 カラフルボックスはサーバー構成や料金プランはmixhostとかなり似ていますが、先のLiteSpeedによって高速なのはもちろん、機能も豊富でコ…

【HTML/CSS】爆速コーディング、簡単なEmmetのススメ

コーディングに用いられるエディタの定番といえばVScode/Brackets/Dreamweaver/ATOMなどでしょうか。 今回はどのエディタでも使えるコーディングが爆速に捗る省略記法、 「Emmet」 を紹介したいと思います。 映画のTENNETに似た感じでエメットと読みます。 TENNETより断然わかり易く、時間を逆行は出来ませんが、コーディングにかかる時間を劇的に短縮できる記述法です。 まだ使ってない方は是非ご参考ください。

【JavaScript】要素をコピーするボタンの作り方

たまに、ウェブ上で調べものをしてるとテキストをコピーするボタンってみかけますよね。 「これをコピペしてください。ボタンを押すとコピー出来ます」的な。 「 」こういうアイコンと一緒に表示されてたりもしますね。 通常コピーしたい部分を選択してCtr+Cのショートカットキーでコピーできますが、この動作が面倒だったり、あまり慣れていない方向けにボタンでコピー出来るようにこういった方法がとられてたりすると思います。 実装にはJavaScriptを使うので、JSに慣れない方向けに解説してみたいと思います。