cssのプロパティaspect-ratioがsafariにも対応したということで、簡単にご紹介します。
aspect-ratioとは、aspect(側面、面)とratio(比率)とあるとおり、cssでボックスの推奨の縦横比を設定できるものです。
ボックスの縦横比を指定したい際にすごく便利なプロパティです。
例えば横16:縦9の割合のボックスを作る際に、これまではpadding-topを%で指定してあげる必要がありました。この場合だと、900÷16=56.25なので、
<div class="div"> <div class="div-inner"> 56.25% </div> </div>
.div{ position: relative; width: 100%; padding-top: 56.25%; } .div-inner{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
と、こういった感じの指定をする必要がありました。%を計算するのもいちいちめんどくさいとも思っていました。
aspect-ratioを使えばこういった場合、とても簡単に処理できます。
.div{ width:100%; aspect-ratio:16/9; }
aspect-ratioの詳しい仕様についてはこちらを参照ください。
aspect-ratioはとても優秀なプロパティですが、2021年途中までsafariに対応しておらず、それによりなかなか実装できなかったのですが、Safari 15でサポートされたのでこれにより全てのエバーグリーンブラウザにてサポートされました。(最近まで知りませんでした。)
参照:aspect-ratio – CSS: カスケーディングスタイルシート | MDN
これにより、美しく正確な比率を簡単に表現できるようになりました。
コーポレートサイトは企業の看板となるウェブサイトです。顧客とのファーストコンタクトになる場合が多いので、ブランディング視点で企業を魅力的に伝えるホームページを構築いたします。
ブランドサイトや集客サイトはお問い合わせなど、コンバージョンの獲得を強く意識したホームページになります。クライアントの事業内容によって、コーポレートサイトをそのまま集客の核とする場合と、別途ブランドサイトや集客サイトを作ってブランディングを行う場合があります。
採用サイトは、コーポレートサイトと同様、求職者の心に響くためのブランディング視点が必要になります。求職者の琴線に触れる非金銭的ポイントと貴社の強みや特徴をきちんと整理し、伝わるサイトを制作いたします。
検索ユーザーだけでなく、潜在ユーザーにも適切にアプローチできるFacebookやInstagramなどのSNS広告を運用します。
エリアや年齢性別など、細かくターゲットをセグメントし、適切なユーザーへアプローチします。
近年重要視されているMEO(Map Engine Optimization)
Googleマップでの検索結果において上位表示させる対策です。アルラボではGoogleマイビジネスの最適化のほか、サイテーション施策など、上位表示に必要なノウハウをご提供可能。
私たちは、お客様のビジネスを成長させ、
より前に進ませるためにともに考え、創るWeb制作会社です。
ホームページの新規・リニューアル制作から
ブランディング・広告運用・SEO対策などWeb集客導線を作ります。
ホームページ制作・広告運用・SEOなど
ご相談はお気軽にご相談ください。
お電話でのご相談も随時受け付けております。
お気軽にご連絡ください。
0952-20-1501(佐賀)
092-717-3446(福岡)
営業時間:9:00~17:00(休業日:土日祝)