CHROMA

世の中の "当たり前" を確認する

Dev

CSS アニメーションを勉強する

Dev

まずは。 学ぶ CSS Animation for Beginners いい感じのボリュームで、デモイメージなんかもありつつシンプルにまとまってる CSS アニメーション - CSS | MDN いつもの 動きをイメージする デモを見たり簡単な方法でアニメーションを動かしながら、作りたい…

CSS Element Queries

Dev

レスポンシブの常識が変わる!? 君はエレメントクエリーを知っているか? 気になった。メディアクエリーはビューポートを基準にスタイルを変化させるのに対し、エレメントクエリーは要素の幅や高さ、数に対してスタイルを変化させる。 パッと思いついた使いみ…

(未解決)CSS のカウンターを降順に並べる

Dev

CSS のカウンターで要素を降順にする方法調べてたけど良いのが見つからなかった。 ここの「Counting Backwards!」のような方法で counter-reset にリストの総数(これが開始番号になる)を指定して、counter-increment で 1づつ引いていけばもちろん降順に並…

コミットメッセージの文例を探す

Dev

commit-m: GitHubコミットメッセージの文例が検索できるサービス ちょっと前に Twitter に流れてきて、便利そうだと思って使い出してから 1週間くらいたった。そこそこの頻度で使っていて、Fix ~~ の代わりに Tweak ~~ をよく使うようになった。 少しだけ自…

「0」につける単位の有無で変わること

Dev

マウスオーバー時にアニメーションするリンクが、 iPhone ( iOS8 ) Safari で上手く動かないという問題に遭遇。 デモは携帯の iOS8 Safari で確認した(して)。 Demo | JSFiddle .link { &::after { width: 0; // <- transition: width 0.5s ease; } &:hove…

左から右方向に向けて下線を消す

Dev

まずは右から左 Demo | JSFiddle Hugo Doc で見かけたスタイル、アニメーションである。 .link { display: inline-block; } .link::after { content: ""; display: block; width: 100%; height: 1px; background-color: #000; } .link:hover::after { width:…

スクロールできる表の両端の装飾

Dev

スクロールできる表の作り方は http://hail2u.net/blog/webdesign/scrollable-table.html で知った。 ここでは横スクロールできる表の両端に装飾を施し、開始・終了でその装飾を打ち消すようなスタイルを表示するようにした。ただ、明日にはこのコードの仕組…

順序付きリスト先頭のアレの書体を変える

Dev

リスト項目の本文と連番のスタイルを分けたかったのでやった。書体っていうか、まぁ何にでも置き換えられると思う。 Demo: 変更前 Demo: 変更後 ここでは擬似要素と counter プロパティを用いて、リストの側に付いてるアレ(なんていうんだ)をセリフ体から…

make コマンドを一応叩いて一日を終える

Dev

今日は make・Makefile 入門みたいな記事を 2, 3 読んで、その後に make コマンドで Sass ファイルのコンパイルと autoprefixer でベンダープレフィックスを付けるというのをやった。半年後にこの設定ファイルを開いても中身がすぐわかるように小さく、単純…

サイトメニュー

Dev

HUGO. https://github.com/ucsbphil/philweb/blob/master/layouts/partials/nav.html を参考に、サイトメニューの表示と現在開いているページのメニューをアクティブ化、というのをしてる。 config.toml: [[menu.global]] name = "blog" identifier = "blog"…

タイトル情報の形式を分ける

Dev

Hugo. layouts/partials/meta.html とかにタイトル情報( <title></title> )を置いていて、特定のページだけタイトル情報の形式を違うものにしたいとき。 基本的には ページタイトル - サイト名 の形で title を出し、URL がサイトのルートディレクトリに当たる場合はサイ…

HUGO, 記事前後のページャー

Dev

前後の記事に移動するリンク、こんな感じで書いてる。MOL の pager を真似して 9割9分そのままなんだけど、 .PrevInSection とかで移動する先をセクションの中で行うようにしてる。content/blog 、content/work の中だけで記事を移動するように。 <div class="pager"> <div class="pager-prev"> {{ with </div></div>…

HUGO を触り始める

Dev

HUGO というものがあるらしいです。読み方は "ヒューゴ" です。間違ってフゴと読むのはとても恥ずかしいことなのでやめておきましょう。 このへん見て知りました。どれを最初に見たかは覚えていません: Jekyllが許されるのは小学生までだよね - MOL Middlema…

縦幅を揃えて一行に複数列を並べる

Dev

モバイルサイトのコーディングをしてる中で、display: table を使った一行に複数の列が並ぶリストを作った。縦幅が揃ってること、セパレーションボーダーの高さの調節が簡単にできるのが良いとこで、コンテンツが増減する可能性が少ない場所なんかで使えると…

Vim を閉じずにシェルでの操作を行う

Dev

シェルで Vim を開いてる時、Ctrl - z でシェルに戻り、fg で vim に戻るというのを人に教えてもらって覚えた。 これで Git の操作をするために Vim を閉じる手間と、操作が終わった後に再度ファイルを指定して開く手間が省ける。便利。 Ctrl - z でシェル上…

E:hover + E, E:hover ~ E

Dev

E:hover + E | JSFiddle E:hover ~ E | JSFiddle E:hover + E では、当たり前のことなんだけど 隣接セレクターは直後の要素にしかスタイルが適用されない ので .box2 にだけスタイルが適用されて、 .box3 の背景色は変わらない。E:hover ~ E では .box 以下…

Sharp Menu

Dev

細い文字に細い線、結構好みな感じ。SoundCloud のタブ ( .streamExploreTabs ) を見て真似した ( 見た目だけ ) 。 Demo | JSFiddle .menu { margin: 2em; padding-left: 0; height: 1.6em; border-bottom: 1px solid #eee; text-transform: uppercase; list…

アニメーションに残像をつける

Dev

昨日書いた左右に動く箱に残像をつけてみた。box-shadow を使ったものと linear-gradient を使ったものがあるけど、box-shadow を使ったほうが動き的にもコード的にも良い。 影で残像を表現したもの Demo - Shadow | JSFiddle 箱が端に到着した後、残像が遅…

CSS Animation はじめ

Dev

使う機会に恵まれなかったから... というのは嘘で、単にプロパティや使い方を覚えるのを面倒臭がってた。 そこで、手始めに色々簡単なものを作ってみた。まずは触って見るところからということで。 Flash | JSFiddle Bounce | JSFiddle Move | JSFiddle まだ…

Frontrend 、最初で最後 ( ? ) の参加

Dev

Frontrend Conference 行ってきた。Frontrend への参加は最初で最後になっちゃったな。 最初と最後のセッション以外は CSS のセッション側にずっといた。 簡単に一言で: 箱 @myakura 高レイヤーと低レイヤーそれぞれに必要性があるよ、"つらい" はできるだけ…

はてなブログ管理画面の更新数を抑えて表示

Dev

はてなブログ、今週月曜に管理画面に変更が加えられた。購読中のブログの更新数を表示するというものだけど、この管理画面のデザインにこの赤は色が強すぎて目がどうしてもそっちにいってしまう。 好きで購読した人のブログは読み逃したくないけど、自分の記…

ページ移動・離脱時のアラートメッセージ

Dev

利用者にとってフォームからの予期せぬ離脱を防ぐため、アラートメッセージを作った。 入力、確認、完了ページがあるフォームで、完了ページでは既にデータも送信されていて利用者が失うものが薄いと思ったので、ここではアラートを出さないようにした。配慮…

物体を円周や進行方向に従って動かす

Dev

JavaScript Advent Calendar 2014 の24日目。 デモとコード | JSFIDDLE デモ(フルスクリーン) | JSFIDDLE このデモでは、マウスを押している間は障害物を中心とした円周上を操作対象が回り、マウスを押していない間はその時の進行方向に向けて操作対象が直…

マークアップや文章の編集をちょっと楽にする

Dev

Vim Advent Calendar 2014 19日目。 初めに、僕は普段主に HTML と CSS、それとブログ記事などの文章を Markdown で書いてる。 今回はこれらのコードを Vim で編集する中で、今まで不満に思いながらも放置していたことを解消したいと思う。 また、問題の解決…

JavaScript を書くときの簡単な注意

Dev

書いたコードを人に見せると次のようなことを指摘されたので、これから JavaScript を書くときは注意していこうと思う。 関数は可能な限りネストしない グローバル変数は極力少なく グローバル変数は多少冗長でも意味が分かりやすい名前付けを (オブジェク…

下から上へ円が移動するアニメーション

Dev

Canvas 上の最下部から最上部に向けて、円が移動していくアニメーションを作った。 Demo function canvasApp() { var canvas = document.getElementById('stage'); var ctx = canvas.getContext('2d'); var x = canvas.width/2; var y = canvas.height; var …

スタイルは適度に小さく正確に

Dev

CSS Architecture Advent Calendar 2014 の12日目。 SMACSS や BEM など、去年のように新しい CSS の設計手法は今年学ぶ機会が作れなかった。その代わり、いくつかのサイトを作る中で気づいたことや、自分なりに気にかけたことがあるのでそれを書いておこう…

色付き画像に白色を上塗り

Dev

今日は filter: brightness() を使って色の付いてる画像を白色にしたりしてた。 .box__icon--invert { -webkit-filter: brightness(3); filter: brightness(3); } 明るい色の背景を暗い色に反転させたとき、背景に載ってるアイコンの色を白に変えたい時があ…

ぼかしテキスト

Dev

qnyp を開いたらネタバレを含む感想のテキストがぼかされて見えずらくしてあった。 あまり Web では見ない表現ではじめは驚いたけど、ネタバレ文章のように内容が読み解かれてはいけないけど文章量などの情報をなんとなく見せたいとき、ぼかしテキストはなか…

Canvas テキストのお試し

Dev

今週少しずつ進めている HTML5 Canvas、 3章「テキスト」でテキストアレンジャーというのものを作った。 で、章の終わりで完成したものをサンプルとして残しておくだけでも良かったんだけど、できたものを使っていると楽しくなってきたので、レイアウトを最…