カテゴリー: CSS

標題について結論から言えば、比較的新しいCSSプロパティの「aspect-ratio」を使うものです。以下、従来多く採用されていた手法から此処に至る状況などを記します。2024年版とは口幅ったいですが、環境の変化などから生じた比較的新しい手法を、備忘録的に書き残した時期が今年2024年ということでご容赦願いたく思います。

レスポンシブとは？

表示される縦横の寸法が定まっていれば、本来此の記事に記す如き厄介な手法を使う必要もありません。では、YouTubeなどをホームページに埋め込む際に、何故、標題に記す処のレスポンシブ対応などが必要になるのでしょうか。

近年のホームページに於いてはネットの雄Googleの後押しも有ってか、「レスポンシブ」なる手法が採用されるケースが多く見られます。「レスポンシブ」とは一々「レスポンシブWEBデザイン」と言うのが面倒で、最初の部分を取って称するもので、英語の「responsive」が反応する、とか、敏感な、とか言う意味の形容詞で有る如く、反応するWEBデザインです。では、何に反応するかと言えばブラウザの幅に反応するのであって、幅に応じて姿形を変えるデザインを意味しています。斯く言う本サイトもレスポンシブを採用しています。

以前、ホームページはパソコンで見るものと相場が決まっていた時期には此の様な面倒な処置も必要有りませんでしたが、世の中にスマホが普及するに連れ、一般にスマホでもホームページが多く閲覧される様になり、状況の移り変わる過渡期、端境期に於いてはWordPressにもPCとスマホで表示のテーマを分けるプラグインなども有りました。詰まり現在のホームページでは基本横長画面のPC用と縦長画面のスマホ用に最適化した、最低二つの表示様式を用意しなければならなくなりました。

仕上がりイメージは斯うです。

最終出力結果

先ずは最下層に背景画像があります。 上の例では神社の写真が其れに当たります。 其の上に帯がのり、其の上、左方に白のアイコン、右方に白のフォント文字が乗ります。 アイコンとフォント文字を包含した帯は元は紺色ですが、 乗算で其のまた背景画像に重ねられており、 唯に単色の不透過色の場合とは異なる深みを感じさせるイメージを醸し出しています。 此れを皆、CSSのみで実現したく試行錯誤しました。

初手

参考のために唯に単色の不透過の紺色の帯の場合を下に貼り置きましょう。 随分イメージが異なるのがはっきりします。

Webデザインとレスポンシブの現況

CSS3 から追加されたプロパティ Flexbox は其のレイアウトの柔軟さ故に現在主流の レスポンシブ （Webデザイン）と相性が良く、 行列のグリッド配置を扱わねばならない場合、 Floatプロパティに代わり頻繁に用いられるようになりました。 端末幅に応じて横5つ並びのアイテムが 4つ、3つと減じても見た目に違和感は抱かれない塩梅となっています。

処でレスポンシブに於いてはプロパティの値の単位に 百分率も頻繁に用いられる処です。 従来PCでの閲覧に限られて考えられていたデザインに於いては サイズは固定で主に単位としてピクセルが用いられていましたが、 閲覧者の環境に応じて多くのサイズが考えられるデバイスの 横幅にピタリと合わせる為には其れでは間に合わず パーセンテージの採用されるに至りました。

また主流の座からは滑り落ちたものの Microsoft社製のブラウザもまだまだ残念ながら健在です。 世の中のデファクトスタンダードにも総意とも言える標準にも従わぬ、 Windows独占時代の残滓の如き路線たるオレオレ詐欺ならぬオレオレ仕様から 忌み嫌われたブラウザはインターネットエクスプローラ（IE）から今では Edge（エッジ）へと装いを改められていますが、其の中身はどうでしょうか。

今回、Edgeに特有に発生するFlexboxプロパティで パーセンテージを単位に使った場合に問題が発生するのを端無くも発見しましたので 本記事に共有するものです。

商売上のホームページではヘッダーやフッター、及び必要コンテンツ内に 電話番号を表示するのは閲覧者に連絡を取って貰いたいならば欠かせません。 表示させるだけならばHTML上で記述すれば済む話です。 しかし最近ではスマートフォンが充分普及し個人個人が所有するようになり ホームページの閲覧も多くがスマートフォンからのものを配慮する必要があるようになりました。

スマートフォンは携帯電話ですから出来得るならば 電話番号の表示をタップしたと同時に通話発信して欲しいものであるのは言わずもがな、 此の事情を配慮して電話番号と思（おぼ）しきテキスト表示には スマートフォンに依っては自動でタップ即発信機能を持たせた機種も多くあります。

ところでデザイン上の配慮などで画像で電話番号を表示させたい要請も多くあります。 此の時画像をタップして通話発信させるには例えば以下のようなリンクを張る必要があります。

此のHTMLコードはもちろん スマホでもPC画面上でも適用されますので 機能して欲しくないPCに依る閲覧時にもクリックで電話発信しようとして 警告ダイアログを閲覧者に拝ませる羽目になります。 此の事態は出来るならば避けたいものです。

3D用にと誂えたWindows10機も仕事用に漸く侵食されつつあり 此れでMicrosoft社のオフィスでも導入しよう日が来ようものならば世の儚さを思わされ なかなか悲しいものがありますが此れもまた世の習いなれば致し方なし、 さてこそホームページの作成、編集に最早 Compass は欠かせないツールとなっておりますれば オフィスの導入に先立っての導入となりましたが CompassのインストールとCSS変換時に文字が消える問題の解決 の如く多少トラブルのも毎度のこと、 観念して対応作業を実践した顛末が本記事と相なります。

CSSフレームワーク Compass には其のインストールに先立って拠って立つ処の Sass 、そして Sass を導入するための RubyGem 、 そして又 RubyGem を動かすための言語 Ruby の導入が必須となりますが Compass 利用者には既知のこととて改めて述べる迄もないでしょうが老婆心ながら下に軽く手順を記し置きます。

Twitterのつぶやきをブログ内に表示させることが 本ブログ2011年4月6日の記事 jQuery.ajaxメソッドでTwitterのつぶやきを取得する方法 で上手く行くことが分かり、 またユーザー情報を抽出して纏め表示させることも5月1日の記事 目的要素の直前に挿入するｊQeryメソッドbefore() に書いたようにどうやら上手く行きました。

其処でプロフィール表示部分に纏めた情報は以下

1. ユーザーアイコンのURL情報：user.profile_image_url
2. ユーザー名：user.name
3. ユーザープロフィール：user.description

の三つでしたが、今回これに更に　Twitter API が与えてくれている

1. ユーザーID：user.screen_name
2. ユーザーのサイトURL情報：user.url

の二つを追加することにしました。 両者共にURL情報を有していますから該当ページへリンクを貼ることも出来ます。

処でこの時、表示情報が増えれば表示面積も必然的に増え、 溢れた文字情報はプロフィールアイコンの下へ回り込みます。 回り込みがデザイン的に旨くない影響を及ぼす場合を考慮した、 その対策として…

phpspot開発日誌 の2008年8月13日の記事 CSSでテキストにグランジ効果を与えるサンプル で紹介されているテクニックがWEB制作の際、 実に有用であると思えれば、当ブログにてもご紹介は、 Janko Jovanovic氏の手になるブログ記事 Add grunge effect to text using simple CSS のタイトルにも謳われる如く、シンプルな手法の CSS にて 汚し を施し、実に所謂 クール なフォントを表現できるテクニックです。 上記紹介記事にはチュートリアルも用意されていますので、 ご自分のサイト及びブログに採用されたい方は、 ご一読いただければと思います。

Tsukamotch on Grunge!

---2008年8月20日追記---
閲覧ブラウザがIE7の際にはベースライン問題が発生し、 IE6ではPNGファイルに対応していない為閲覧自体が不可能となります。

檜山氏が「檜山正幸のキマイラ飼育記」の2006年5月30日に ルビ（ふりがな）タグの話 をエントリしているのはルビタグにはIEでは想定通りの表示も Firefoxでは儘ならずしてクロスブラウザ問題の深く影を落とすらしく、 とW3Cの"Ruby Annotation"勧告では不必要に思われる <rp> タグを使用するのも其の為である旨、記述されているのですが、 それにしても説明の為の例文

いい話はなしだ。

は秀逸な登用ですので、一度ご覧いただければと思います。

此れを受け小飼弾氏が自ブログで利用している記事が2006年5月31日 css - ルビもCSSで で問題解決を提示しておられ、 其の解決法として採用されているのが北村曉氏のサイトで 曉に死す のブログ 徒書 でCSSのinline-table属性を用いたルビ表示の考案がなされている2001年10月11日付の記事 Mozillaでルビ表示3 での手法です。

当ブログでは 2008年5月29日の パズルの一枚の画像に依るブログ上自動生成 でも参照させていただいた ホームページを作る人のネタ帳 の運営者Yamada氏が他にも運営されている海外発情報発信の為のブログ ITquality の2008年5月1日の記事 ハイパーリンクの拡張子に応じてCSSでアイコン追加のチュートリアル での紹介は Ask The CSS Guy の2006年12月20日と紹介記事にも言及される少し許り以前なるも、 其の有用な内容から長い期間ランクインするようなロングヒット歌謡が如き記事、 Showing Hyperlink Cues with CSS で、当記事中にて紹介されているのが、 リンクの拡張子で判断してアイコン画像を付加する CSS は、当設定を一度施してしまえば EXCELファイルならばEXCELアイコン、 WORDファイルならばWORDアイコン という具合にリンク先が当該ファイルであるならば意識せずともアイコンが付加され、 シンプル乍、実効性が高い為の高評価で、繰り返しネット上の話柄に昇るのでしょう。