サイト概要

サイト名: GoingOverCss
システム: オンライン上のサイトにGithubからCDN経由でCSSを上書きして遊ぶ。

言葉で上手に説明できないので、イメージ図をご覧ください。

作る側と見る側の利用者を想定しています。

作る側:

ターゲットにするWEBサイトを決めて、上書きするCSSをローカル環境で作成します。
作成したCSSファイルを自分のGithubリポジトリに上げます。
このサイトにGithubリポジトリのURLと、ターゲットにしたサイトのURLを登録します。

見る側:

サイトにアクセスして品定めします。
登録されたターゲットのサイトにアクセスし、開発者ツールを開いてGithubリポジトリのURLを</head>直前に書き入れるとCDNでCSSファイルが配布され、CSSの上書きが起こります。

上書きの例

今回、爆速で有名な阿部寛さんのホームページをターゲットにさせていただきました。
上書き用のCSSは私のGithubのリポジトリに置いているこちら(Github:kohjean)のソースです。

これを適用すると、これが

こう！

なります。

※スクーンショットを撮ったタイミングのずれで書かれている内容が少し違っていますが、変更を加えられるのはあくまでCSSのみです。

何が起きているのか

ある程度CSSについて勉強されている方には周知の事かと思いますが、CSSは「詳細度が高い方」, 「後に書かれた方」などの優先順位の決まり事に沿って適用されています。なので、上書きするCSSに、より優先順位が高くなるようにしてスタイルを定義すれば、スタイルを更新してサイトの見た目を変える事ができます。

詳細度についてここでは詳しくは書きませんので、気になる方はわかりやすく書かれたこちらの記事をご参考ください。

スタイルの優先順位－CSSの基本※外部サイトを開きます

## 難しかった事、勉強になった事今回の制作は、職業訓練の序盤に「へー。CSSは複数のファイルを当てられるんだ。ほー。後から書いたやつが優先されるんだ。」ということを知り、健康食品のデモサイトに毒々しい青色を配した**「魔改造.css」を作ってスピーチで発表したこと**が源流です。最終制作の設計が始まった時にその時のことを思い出して、あれを公開できるサービスに出来ないか。と考えました。この時点で**「自分が向き合うべきは阿部寛のホームページしかない」**と考えていたのですが、これが大変でした。阿部寛さんのホームページは全てインラインでスタイリングされているので`!important`を付ければ上書きできると考えていたのですが、何故か適用されず。いろいろ考えまくったけど原因がわからず、講師の先生に尋ねて判明。 **``で引っ張ってきている要素には呼び出し元のCSSが適用されない**ことがわかりました。HTML4.01で書かれていてもCSS3が使えることは調べがついていたのですが、そんな落とし穴があったとは、、。どうしてもわからない時は人に聞くことも必要ですね。

複数のページからなる様々な機能を備えた動的サイトを作ったのは今回が初めてだったので、ページ遷移や全体の設計をするとてもいい機会になりました。壁にぶつかりながらトライ&エラーを繰り返して、わからない所を調べまくる経験は中途半端で妥協したり、用意された教材に沿って勉強するだけでは決して得られなかったことだと思います。ぶつかった壁を超える度、迂回する度に新しいことを調べる必要があって、広い範囲の知識に触れることが出来ました。おかげで自分のレベルが一段上がったなと実感できています。
ですがまだまだ改良が必要なところがあるので就活の準備をしつつ、コードを書いていきたいと思います。

GoingOverというタイトルについて

'goingover'とgoogleで検索すると「うんと殴ること」のような和訳が出てきますが、誤解されたくないので説明しておきます。
Graffiti(トンネルとかにスプレーで書かれた落書き)カルチャーにおいて、既に書かれている絵の上から上書きすることを'GoingOver'といいます。今回作ったサイトのCSSを上書きする行為がこれに似ていると思ったので、言葉を拝借しました。
現実に絵を上書きすると元の絵は見えなくなってしまいますが、これはクライアント側で上書きしているだけなので元のサイトには何の影響もありません。想像力を含ませてくれるサイトには敬意を払っています。敬意を払いつつうんと遊ばせいただきます。

リンク

面白い魔改造募集しています。

goingover.net

※ 開発メニューを使うことが前提になっているので、スマホで見るとデザインが盛大に崩れます。