本ウェブサイトは、全てのレイアウト、デザイン、機能(※1 特にJavaScriptを使わないでcssで動くものが基本)をブラッシュアップし、今日のウェブサイトのカタチが存在する。目指したものは、オリジナルのウェブサイトであり、フォントサイズ、ブレークポイントなどは、独自のフィロソフィーと論理性を基に構成してある。そんなウェブサイトを是非皆さんに使ってもらい満足していただきたい。
※1 JavaScriptを使って、あれもこれもと機能を追加した結果、プラグイン同士がコンフリクト(干渉)し合ってしまい、動かなくなってしまったり、後になってデザイン・レイアウトが壊れていることに気付くことがしばしばある。cssで動くものは、JavaScriptは不要だ。
2020年10月14日
ウェブサイトの制作でレスポンシブの隅々まで目が行き届くようになるには相当の時間を要する。
最低でも4つのブレークポイントが必要である。これは4種類のレイアウト構成が必要だということであり、このレスポンシブの骨格を深く吟味していないと、後で取り返しのつかないことになる。
判読可能なフォントサイズを使って、タブを横に並べてみる。それをモバイルのPortrait(縦方向)とLandscape(横方向)で確認する。普通にテキストを並べるだけでは、Portraitでは横幅が短いのでタブが溢れてしまう。そこで、タブをクリックするとスライドして次のタブを表示させることでこの問題点を解決した。
ページ展開で最適に機能するのは現時点ではスワイプが最適である。この機能はモバイルを片手だけで操作可能にする優れものだ。もし、貴方がページ下部に配置した「次へ」のリンクボタンで従来通りの対応を考えているとしたら、それはとても野暮ったいものだと気付くだろう。さて、ここまで作り込んだら、ページのデザイン・レイアウト・カラム・機能を導入して半分ほど完成したと言って良いだろう。
さて残りの半分につて、テキストやイメージに関連付けられた付加情報のデザインを行っていく。
サイト内リンクのリストはページ下のアコーディオンに閉じ込めてある。別の方法、例えばモーダルでも実現できるが、このタブメニュー方式で少数コンテンツでは不要になるかもしれない。
モーダルに於いてモバイルに特化したものへアップグレードした。また、PCでは動くがモバイルでは動かないという機能は用いない主義である。ここは優先的にモバイルファーストで行こう。
このページでは「AOS」のアニメーションを追加してみた。
尚、アコーディオン、モーダル、地図、引用については、上のタブをタップするか、ページをスワイプさせるとご覧いただける。
基本構造はJavaScriptを使用せずCSSのみで動いている。だから、モバイルが持つ本来の基本機能のピンチアウト(pinch out)・ピンチイン(pinch in)が当たり前に使える。また、拡張機能を追加するときのコンフリクトの心配がないことは重要だ。
© zycopower,Are U experienced?
2020年7月27日
アコーディオンの機能が便利なのは、必要なものだけを展開できること、必要の無いものは引き出しに仕舞うように閉じ込めることができる。煩雑なレイアウトをグルーピングし、スッキリ整理してくれるモジュールだ。そして、この機能を快適に仕上げるために、モーションを付ける、ここまで全てcssで実現できる。
全てのアコーディオンは最初から閉じておいてタイトルだけを表示して視認性を確保する、中身は普段のページと同等に様々なものを詰め込もう。タップして全てのアコーディオンを開いたまま維持することも可能だ。
2020年8月25日
高倉健は1963年に『人生劇場 飛車角』で準主役に抜擢された。本格的な大作の準主役は初の抜擢(ばってき)だった。高倉は本作で任侠映画のスターとしての足掛かりをつかむが、さらに翌1964年の『日本侠客伝』では降板した中村錦之助に代わり、高倉が主演し、寡黙な立ち姿と目力が任侠シリーズでその威力を発揮した。
これ以降、仁侠映画を中心に活躍、耐えに耐えた末、最後は自ら死地に赴くやくざ役を好演し、ストイックなイメージを確立した。本作を切っ掛けに、翌1964年から始まる『日本侠客伝シリーズ』、1965年から始まる『網走番外地』シリーズ、『昭和残侠伝シリーズ』などに主演し東映の看板スターとなる。
2020年7月27日
アイルランドのロック・バンドであり、1976年より活動。『グラミー賞』を22回受賞している優良バンド。一般的には、映画『バットマンフォレバー(1995年)』の『Hold Me, Thrill Me, Kiss Me, Kill Me』が馴染み深い(下記引用元参照のこと)。
バンドエイドやライブエイドなどの部外活動を経て、1987年に5作目となる代表アルバムとも言える「The Joshua Tree」をリリース。前作のサウンドやコンセプトを引き継いだこのアルバムは英米のチャートで1位を獲得。3曲の全米No.1シングルを放ち、その年のグラミー賞でも最優秀アルバムを獲得するなど、全世界のミュージックシーンを席巻した。
2020年7月27日
監督はリドリー・スコット、主演はラッセル・クロウ。第73回アカデミー賞および第58回ゴールデングローブ賞で作品賞を受賞した。ラッセル・クロウ扮するローマ軍将軍マキシマス・デシマス・メレディウスは皇帝アウレリウスと皇太子コモドゥスの確執に巻き込まれて家族を失い、自らも奴隷に身分を落とす。マキシマスはコモドゥスへの復讐を誓い、ローマ文化の象徴の一つである剣闘士(グラディエーター)として名を上げていく。
商業的成功だけでなく芸術的な評価という点でも『グラディエーター』は主演ラッセル・クロウのアカデミー主演男優賞受賞を初め、アカデミー、ゴールデングローブ、英国アカデミー賞などを独占して36個の賞を受賞する大成功を収めている[57]。ノミネートも含めると殆どの賞の部門に上げられており、その中でもホアキン・フェニックスのアカデミー助演男優賞ノミネート、リドリー・スコットのアカデミー監督賞ノミネートが特筆される。
2020年7月27日
監督はマーティン・スコセッシ。脚本はポール・シュレイダー。主演はロバート・デ・ニーロ。製作はマイケル・フィリップス、ジュリア・フィリップス。コロムビア映画配給。
鏡に向かいデ・ニーロが「You talkin' to me?」と呟きながら自分の鏡像に銃を向ける場面は、脚本には書かれておらず、監督とデ・ニーロが即興で練っていった。このセリフは、2005年にアメリカ映画協会が選出した「アメリカ映画の名セリフベスト100」で10位にランクインした。 終盤のデ・ニーロのモヒカンは、特殊メイクの巨匠ディック・スミスが作成したものである。ハーヴェイ・カイテルの長髪もかつらである。
機 能 | 詳 細 |
---|---|
基本構造 | TABにコンテンツを割り振り、タッチデバイスではスワイプでスライドしてページを展開する |
アコーディオン | タップによりコンテンツを表示・非表示する |
モーダル | 適切なサイズのウィンドウを開いてコンテンツを表示する |
地図 | Google mapとイメージを使って最適な案内を行う |
出典・引用 | 著作権法に則って、引用タグを用いて記載する |
© zycopower,Are U experienced?
2020年11月19日改訂
二種類の大小のモーダルを用意する。PC向けとモバイル向けの二種類をデバイスに応じてスイッチさせて表示する。これがレスポンシブでモーダルを開くときの解決策である。但し、作業は増える。
その理由は上の一つ目の画像をご覧いただければお分かりいただけるだろう。この画像がモバイルを横にしたときのモーダルサイズであり、このサイズにすると縦方向へ多くが溢れてしまう。
二つ目の画像はモバイル用のモーダルサイズを使った場合であり縦・横方向すべてが収まる。
三つ目の画像は、イメージのみを開きたい場合である。不要なものは一切排除して(特に画面が狭いモバイルを配慮して)、ボタンまでも排除したものも用意した。イメージの右上にFont Awesome の を表示させてピンチアウトができることを表示した。
四つ目の画像は、全てのデバイスでイメージのみを横幅いっぱいに開けるように設定。大きな動画を見るときにLandscape(横方向)で見るのと同様だ。ここでは閉じるボタンを画面右上に配置した。
実際のレスポンシブ対応のモーダルウィンドウの挙動はここでも多くの種類が確認できる。モバイルのPortrait(縦方向)やLandscape(横方向)でその対応の有無を吟味してみると、世の中にはモーダルが意図している機能を実現していないものを見かけることがある。何のために開かせるのかが問題だ。
このページを執筆中にBootstrapの新しいバージョンが出ていることを発見した。だから、ついでにバージョンアップさせて検証してみた。レイアウトが壊れている部分がある。モーダルに付属しているcss及び本サイトのcssのいくつかが「bootstrap.min.css」と競合していることが判明。「bootstrap.min.css」を外部ファイルに書き出して修正をかける必要があった。
© zycopower,Are U experienced?
2020年8月22日
グーグルマップに手段を「徒歩」でルートを指定しすると、経路(青●の連続)と徒歩の所要時間が表示される。それをレスポンシブに対応させる。重要なランドマークとなる「千代田線赤坂駅の7番出口」や「赤坂五丁目交番」などの表示は、ズームの「+」を数回押すと表示される。ランドマークとなるフォトには、進行方向を矢印で表示する。
千代田線赤坂駅(東京都)7番出口よりドトールを通り過ぎて赤坂通りを歩く
スギ薬局を通り過ぎ、赤坂五丁目交番(レンガ造りの三角屋根)を右折してすぐ
オースピス赤坂に到着したらエレベーターで8階へ
赤坂通りの赤坂五丁目交番を目指してお越しください。
曜日 | 診察 |
---|---|
平 日 | 診療時間 9時~12時 / 13時~16時 (予約制) |
土曜日 | ※予約検査のみ |
日祝日 | 休診日 |
特別休診日 | 8月: 11(火) ~ 17(月) 9月: 18(金)・19(土)・23(水) ~ 26(土) 10月: 5(月)・6(火)・24(土) 11月: 7(土)・9(月)・20(金)・21日(土) 12月: 4(金)・5(土)・28(月) ~ 1月4日(月) |
© zycopower,Are U experienced?
2020年7月27日
専門的な技術書や解説は引用が不可欠になるが、その場合引用タグを使って明示しなければならない。引用のデザインは定型を用意しておく。
端役で映画出演するようになるのが1957年。このうちマルク・アレグレ監督の『黙って抱いて』には、やはり無名時代のアラン・ドロンも出演していた。ジャン=リュック・ゴダール監督の短篇映画『シャルロットと彼女のジュール』(1958年)に出演。ちなみにこの映画撮影後ベルモンドが兵役に出てしまったので、ベルモンドの声はゴダール自身が吹き込んでいる。
パリに戻った1959年、ベルモンドはクロード・シャブロル監督『二重の鍵』に出演する。これまでのチョイ役に比べると重要な役で、その存在感を示したベルモンドは映画でも注目された。
ジャン=リュック・ゴダール監督の『勝手にしやがれ』に主演。ヌーヴェルヴァーグの代表作として大ヒットするとともに、ベルモンドを一躍映画スターの座に押し上げた。こうして、年に数本の映画に出演するようになる。それらはドラマ性の高いシリアスなものが多く、成功した作品ばかりではないが、ベルモンドは着実な演技力に支えられて、ヤクザから貴族に至るまでの幅広い役をこなした。
カトマンズの男(1965年)に出演するが、これで共演したウルスラ・アンドレスと恋に落ち、行動を共にするようになる。そして翌年にアンドレスが離婚したのを受けて、ベルモンドも9月19日に離婚する。同年再びゴダールの『気狂いピエロ』に主演する。しかし、ベルモンドはシナリオを使わないゴダールのやり方を批判し「二度とゴダールとは仕事をしない」と宣言した。一方のゴダールも、1970年に商業主義の映画を嫌うと宣言し、もっとも使いたくない俳優の筆頭にベルモンドを挙げている。ベルモンドは他に『暗くなるまでこの恋』にも出演し、カトリーヌ・ドヌーブとも共演した。
© zycopower,Are U experienced?