iPromenade

本来の画像を縮小表示しています。

何の画像でしょうか。

画像にマウスONすると画像名が表示され、クリックすると元のサイズで表示します。

2013年（平成25）にユネスコの世界文化遺産に登録された地域に隣接しています。

漢字を縦横10分割（100等分）してランダムに配置したものが表示されます。

何という漢字でしょうか。

ここをクリックすると漢字を表示

[ ヒント ]：　色名です。

画像を縦横10分割（100等分）してランダムに配置したものが表示されます。

どこで撮影した画像でしょうか。

ここをクリックするとスプリット画像を表示

本来の画像を縮小表示しています。

どこの画像でしょうか。

画像にマウスONすると画像名が表示され、クリックすると元のサイズで表示します。

1996年（平成8）にユネスコの世界文化遺産に登録されました。

本来の画像を縮小表示しています。

何の画像でしょうか。

画像にマウスONすると画像名が表示され、クリックすると元のサイズで表示します。

全長18kmの峡谷は国の名勝に指定されています。

本来の画像を縮小表示しています。

何の画像でしょうか。

画像にマウスONすると画像名が表示され、クリックすると元のサイズで表示します。

標高100mを超える山頂の公園内にある有名な美術館で、1980年に旧NHK放送局跡地に開館しました。

以前、CSS（Cascading Style Sheets）のフィルター機能の使用によって、カラー画像を種々変換できることを紹介し、下記（１）～（６）の実例を2回に分けて掲げました。

（１）blur（ぼかし）
（２）brightness（明度）
（３）contrast（コントラスト）
（４）drop-shadow（ドロップシャドウ）
（５）grayscale（グレースケール）
（６）hue-rotate（色相環）
（７）invert（階調の反転）
（８）opacity（不透明度）
（９）saturate（彩度）
（10）sepia（セピア）

今回は上記の（７）～（10）について紹介します。

今年、我が家の庭に咲いたひまわりの写真に対して、色々と変化を加えてみました。

（７）invert（階調の反転）
（８）opacity（不透明度）
（９）saturate（彩度）
（10）sepia（セピア）

ー＞ CSSでカラー画像に変化を（１～４）
ー＞ CSSでカラー画像に変化を（５～６）

浮出し迷路とは入口から出口に向かって、最短距離で通り抜け、通った道を塗潰すと絵が浮かび上がるものです。

下の例は2022年5月に朝日新聞に掲載された浮き出し迷路です。

現在、このような迷路の画像を元に自動的に答えを導き出す方法（アプリ）を検討中ですが、この例についてはうまくいったので紹介します。

今後、色々な迷路について更に確認を進めて、アプリの問題点を洗い出す予定です。

自動解法アプリでの処理結果です。

うまく処理できているように見えます。

以前、CSS（Cascading Style Sheets）のフィルター機能の使用によって、カラー画像を種々変換できることを紹介し、下記（１）～（４）の実例を掲げました。

（１）blur（ぼかし）
（２）brightness（明度）
（３）contrast（コントラスト）
（４）drop-shadow（ドロップシャドウ）
（５）grayscale（グレースケール）
（６）hue-rotate（色相環）
（７）invert（階調の反転）
（８）opacity（不透明度）
（９）saturate（彩度）
（10）sepia（セピア）

今回は上記の（５）～（６）について紹介します。

我が家の庭に今咲いているひまわりの写真に対して、色々と変化を加えてみました。

（５）grayscale（グレースケール ＝ 白黒画像）
（６）hue-rotate（色相環）

ー＞ CSSでカラー画像に変化を（１～４）

以前、CSS（Cascading Style Sheets）のフィルター機能の使用によって、カラー画像を白黒に変換する話題を紹介しました。

CSSのフィルター機能にはそれ以外にも種々のものがあります。

（１）blur（ぼかし）
（２）brightness（明度）
（３）contrast（コントラスト）
（４）drop-shadow（ドロップシャドウ）
（５）grayscale（グレースケール）・・・・・白黒にする
（６）hue-rotate（色相環）
（７）invert（階調の反転）
（８）opacity（不透明度）
（９）saturate（彩度）
（10）sepia（セピア）

上記の内、（１）～（４）について下記に実例を示しています。

（１）blur（ぼかし）
（２）brightness（明度）
（３）contrast（コントラスト）
（４）drop-shadow（ドロップシャドウ）

ー＞ CSSでカラー画像を白黒に