【HTML/CSS】CSSで斜線ストライプ背景、liner-gradient()をマスター。完全解説。
【Google Map】API無しでサイトへGoogleマップを埋め込む方法
多くの方がご愛用の「Googleマップ」。
お店のサイトなど、直接足を運んでもらうような集客が必要なサイトでは是非アクセス案内として掲載しておきたいですよね。
このGoogleマップの埋め込みについては非常に簡単な方法と、Googleの提供している「Google Maps API」を使った少し手順のかかる方法の2種類があります。
後者のGoogle Maps APIを使用する方法だと、デザインをサイトに合わせて編集出来たり、複数の場所を一度にマーカー表示させたり、様々なカスタマイズが可能ですが、こういったAPIの利用に慣れていない方には少し手もかかり難易度が高くなります。
今回は前者のシンプルなGoogleマップの埋め込み方法について解説したいと思います。
続きを読む【CSS】2020年版ベンダープレフィックスの必要・不要&自動付与の方法
2020年現在、Web制作においてCSSでベンダープレフィックスを何につければいいのか質問を受けたので、少し調査してみました。
ベンダープレフィックスとはCSSの比較的新しいプロパティに各ブラウザを対応させる記述です。
- 「vendor」ベンダー…各ブラウザの提供者のこと。
- 「prefix」プレフィックス…頭につける定型文のようなもので「接頭辞」などと訳されます。
個人的にはほぼBootstrapを利用するのでベンダープレフィックスについてあまり気にせずコーディングして、最終段階でクロスブラウザチェックの際におかしい部分があれば対応するという流れにしていて、特に近年問題はありませんでした。
多くの問題はIE10以前に抱えていたものがほとんどなので、流石にその辺りは切り捨ててよい時代になったということでしょう。
色々と調べてみると現在のブラウザのCSS3対応状況で、今後ベンダープレフィックスをどう記述するべきかわかってきたので、今回簡単に述べたいと思います。
続きを読む【HTML】リンクから件名や定型文を入れてメールソフト起動する方法
「Webシステム内からクリック一つで、顧客宛にメールソフトを起動してほしい」という要望がありました。
通常、サイトの表側ではフォームを用意する事が多いかと思いますが、今回はサイトの管理画面側のお話。
最近はメールアプリもクラウドが充実して、Outlookなどのメーラーを使用する方がめっきり減った印象ですよね。
ただ顧客によってはそういった、昔から慣れ親しんだメールソフトで問い合わせ対応などの連絡をしたいというようなご要望も健在です。
実装自体はaタグだけで簡単なもので済みます。
ですが今回は少し一捻りとして、定型のテンプレート文が入った状態でのメーラー起動という仕様で実装しましたので、解説していきたいと思います。
続きを読む【HTML/CSS】爆速コーディング、簡単なEmmetのススメ
コーディングに用いられるエディタの定番といえばVScode/Brackets/Dreamweaver/ATOMなどでしょうか。
今回はどのエディタでも使えるコーディングが爆速に捗る省略記法、
「Emmet」
を紹介したいと思います。
映画のTENNETに似た感じでエメットと読みます。
TENNETより断然わかり易く、時間を逆行は出来ませんが、コーディングにかかる時間を劇的に短縮できる記述法です。
まだ使ってない方は是非ご参考ください。
続きを読む
