ksk1015のブログ

html, css, javascript 等のウェブ制作の技術をブログしてきます。あばばばばば。

CSS expressions @ CSS昔話 Advent Calendar 2015

昔むかし、なななな、な、な、なんと、cssjavascriptを記述し実行できる魔法のブラウザがありました。
そのブラウザは哀井伊と呼ばれ、人々からたいそう嫌われていました。。。。

ということで、CSS昔話 Advent Calendar 2015の9日目では、cssjavascriptを記述できてしまうCSS expressionsを紹介します。

9日過ぎて10日になってしまいました。まだ書けてないです。ごめんなさい。執筆中です (;´∀`)

10日目はyoshiki katoさんです!

 

※一年越しに書きました。。。

jsdo.it

レスポンシブウェブデザインについての箇条書き

・ウェブサイトがPCからアクセスされるよりも、スマホからアクセスされる時代になった

・だからウェブサイトを作るなら、基本的にまずはスマホを想定したウェブサイトを作るべし
・ウェブ制作の現場は、当たり前だがPCが普及し日常的にPCを利用するため、またこれまではPCサイトを作ってきたことから、ユーザーよりも従来のPCサイトのサイズ感にしばられすぎてる
・例えば、広いスクリーンでのレイアウトの調整を一生懸命することより、表示速度のチューニングの方が大事かもしれない(謙遜したが絶対大事)
・とにかくウェブサイトがスマホからアクセスされるという現実を、ウェブサイト制作側では見えてないか見えているけどそれが制作に反映されてない、ように僕には見える

スマホサイトとPCサイトのデザインを分けて作ったものを、どう作るべきか

・対応デバイス・ブラウザは、レスポンシブならIEに関しては10以下は捨てていいと思う、Android2系も捨ててよし。捨てれない場合はできるだけシンプルなものを作りましょう。
・PC Windows7,8 IE11、Chrome最新、Firefox最新
・PC Mac Safari最新、Chrome最新、Firefox最新
タブレット iPad iOS最新 Safari
タブレット Nexus7,10等 Android最新 Chrome最新
スマホ iPhone5s iOS最新 Safari
スマホ iPhone6plus iOS最新 Safari
スマホ XperiaA Android4 標準ブラウザ
スマホ Nexus5,6等 Android5 Chrome最新

・一つのデザインをベースにして作るか、モバイル用と大きい用の二つのデザインをベースにして作るか
・二つのデザインをベースにしても、スマホなら320px〜768px、大きい768px〜を意識して作る

・イメージとテキストの組み合わせたもののバランスが難しい。イメージとテキストを別々にしてコントロールした方がいい。

・タッチデバイスに配慮する(リンク、ボタンを大きめに、hoverでしか情報が表示されない表現は避ける)
・アニメーションを多用したリッチなUIは昔ほどではないにせよ大変です。非力なスマホだと快適に動かなかったりバグが発生したり。端末やOSやブラウザによってはリッチな表現を切ることを想定して設計することが必要。
・スクロールに連動してアニメーションさせるとかはタブレットスマホは今でも難しいかな。
・fontawesome等のアイコンフォントは使い勝手がいいよ。
ベクターグラフィックはイラレファイルで、写真等は必要ならばモックとは別ファイルで高解像度のものを用意して欲しい。
・写真の角丸・マスキングはcss等で処理した方がいい場合がある。

・静的なモックに対しての検討だけでなく、コーディングしてブラウザで確認できる段階での検討改善のプロセスがより必要かな
・デザインを作る → 主要なページ・パーツのコーディングする → ディレクター・デザイナー・コーダーでレビューする → 修正する → 他のページのデザイン・コーディングする

・二つのデザインをベースにした場合、ワンソースかソースを分けて作るべきか
・激しくレイアウトが切り替わったり、特殊なリッチUIがあると、ソースがどんどん複雑になる。分けた方が無難。単ページとか期間限定のサイトとかなら大丈夫。
・ソースを分けてサーバーサイドで切り替えることは問題ない。一つのURLでスマホPC共に同じコンテンツを提供することが大事なポイント。

・二つのデザインをワンソースに落としこむことの大変さ
・パーツパーツによって、PCスマホ共用htmlにするか、PC用htmlとスマホ用htmlを分けるか、悩ましい
・htmlやcssが複雑になりがち
・jsが絡んでくるとさらに複雑になる
・悩まずに、PC用htmlとスマホ用htmlと完全に分けると、すっきりするが、ファイル容量約二倍(これするならソース分けた方がいいのでは。。。)

・レスポンシブサイトを作るなら、マルチなスクリーン環境に耐えうる拡張性のある一つのデザインを作ろうとして欲しい
・マルチスクリーンに耐えうるかどうかなんて、直感的な部分よりも、htmlとcssの理解度が大事な気もするので、結局コードを書けないとデザインできない気もする

・作るサイトが何が目的でどんなコンテンツをどのように提供するといいのか。結局それが大事。レスポンシブデザインは瑣末な問題。

バニラの歌

デイリーポータルZのギャルのコールでいいこと言うという記事があった。

渋谷や新宿を女性向け求人サイトの広告トラックが走っている。サイト名を女の子がコール風に歌っているのだ。実はあれが大好きである。

ということで、歌をいくつか作っていた。


コール「天は人の上に人を造らず人の下に人を造らず」 - YouTube


林コール - YouTube

僕も大好きである。いや何となく気になっていた程度だが、この記事によって大好きであること気付いた。

以下が記事の元ネタになってる歌である。


Singing truck in Tokyo - YouTube


高収入求人情報バニラ VANILLA - YouTube

( ・∀・)イイ!!

特定の要素以外で発生したイベントをキャッチする(jQuery Advent Calendar 2014 jQuery)

jQuery Advent Calendar 2014 の6日目の記事です。

空いていたので書きます。

特定の要素で発生したイベントで処理行う場合は

と書きます。普通ですね。

特定の要素以外で発生したイベントで処理行う場合は、こんなふうに書けます

解説

documentにイベントリスナー貼ると、どこでイベントが発生してもキャッチできます。
(バブリングするイベントの場合ですが。 イベントバブリングについて解説した記事

そしてイベントオブジェクトからイベント発生元の要素を取得できます。

その要素自体またはその要素が指定セレクタ内かどうかは、.closest()メソッドで簡単に判定できます。

ドロップダウンメニューみたいなUIの閉じる処理、それ以外がクリックされたときは閉じたいけど、操作不能にはしたくないときとかで使ったりします。

調べてみたらjQueryUIのSelectmenuも同じふうに閉じる処理書いてます。

以上です

ドラクエ2の復活の呪文をhtmlで再現した

vue.jsの練習も兼ねて。あましキレイに書けてないかな。

音が出るよ。IEだと上手く表示されんよ。

しご。。。

本州最北端に行ったよ

もう2ヶ月前のことだけと

f:id:ksk1015:20140905172034j:plain

もちろん恐山も!!

f:id:ksk1015:20140906083104j:plain

f:id:ksk1015:20140906085107j:plain

f:id:ksk1015:20140906085348j:plain

f:id:ksk1015:20140906092810j:plain

 

仕事のやる気がねぇ。。。

 

あんこパイ

なんとなんとマクドナルドであんこパイというホットアップルパイの中の餡があんこのバージョンが発売された。

f:id:ksk1015:20141001121255j:plain

なんとなんと一年前にこういうの食べたいってツイートしてた。念願叶ったり。

 仕事進捗まずいです。。。