Subscribed unsubscribe Subscribe Subscribe

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章「テキスト」でテキストアレンジャーというのものを作った。 で、章の終わりで完成したものをサンプルとして残しておくだけでも良かったんだけど、できたものを使っていると楽しくなってきたので、レイアウトを最…

Canvas でテキストの中央揃え

Dev

昨日から引き続き HTML5 Canvas 読んでて、今日は「3.1 基本的なテキストの描画」をやってる。 テキストの中央揃えには measureText() メソッド を使うみたい。 measureText() メソッド - Canvasリファレンス - HTML5.JP 以下のものでは Canvas 幅の半分の位…

Canvas での色とグラデーションの扱い方

Dev

オライリーから出ている「HTML5 Canvas」読んでる。 線形グラデーション 線形グラデーションは createLinearGradient() メソッドを使って描画される。引数ではグラデーションの開始点(x, y)と終了点(x2, y2)を指定する。 createLinearGradient(x, y, x2,…

HTML5、これからとかとか

Dev

第52回HTML5とか勉強会に参加してきた。 勉強会の様子は動画で観れる。 第52回 HTML5とか勉強会 | YouTube 矢倉さんのセッションだけそれなりにメモを取っていたので載せておく。 これもスライドの内容そのままというわけではなく、自分の解釈を途中に挟みな…

暖色の円をランダムに並べる

Dev

ドットインストールの「HTML5 Canvas入門」レッスンをやってる。 15回、16回でランダムな大きさ・色の円を透過させて並べるというのをやったけど、これの色を暖色に限定して並べるようにしてみた。 それがこちら: 暖色の円をランダムに並べる | jsdo.it 色の…

CHROMA, ソーシャルボタンのスタイル変更

Dev

はてなブログ、ソーシャルボタンのスタイルが変わったみたい。 PCでも、デフォルトのソーシャルボタンを大きく表示するようにしました - はてなブログ開発ブログ このブログでは、ソーシャルボタンのサイズを無理やり変更していたので見た目が崩れた。 なの…

なぜ Vim を使うのか

Dev

今日は Vim Conf 2014 に参加した。 LT のスライドは「 Reports - VimConf 2014 」にまとめられている。 正直に言うと Vim スクリプトのテストや Java のプラグインに関する話にはついて行けず、LT の内容は半分近くわからなかった。けど、しゃべりがユニー…

Illustrator のプロファイルディレクトリにお手軽に移動する

Dev

Illustrator 以外も含めて、Adobe アプリケーションは今 CS5.1 使ってる。だからディレクトリパスは Adobe Illustrator CS5.1 になってる。 Illustrator ファイルをビットマップに書き出すときとかに線がにじんだりするのが嫌で、今日は「IllustratorでWeb向…

Markdown 、インラインコードにバッククォートを含める

Dev

下の文章がなんか長くなったけど、結論は以下の 2つ。 エスケープしたいバッククォートよりも数が多いバッククォートでコードを囲むことで、インラインコードにバッククォートを含めることができる 先頭か末尾にバッククォートを含めたいときはコードを囲む…

Vim のスクロール

Dev

今までは CTRL-D と CTRL-U でページの上下スクロールをしていた。そのときの画面には見えていないけど、見たい場所がわりと近くにあるときはこれまで通りこれらのコマンドを使うと良いだろう。 コードリーディングのときなど、ファイルの中身を網羅的に見た…

Git のローカルリポジトリを更新して Homebrew を最新に

Dev

Vim でタグ機能を使おうと思って、ctags を Homebrew でインストールしようとすると次のエラーが出た。 $ brew install ctags /usr/local/bin/brew: /usr/local/Library/brew.rb: /System/Library/Frameworks/Ruby.framework/Versions/1.8/usr/bin/ruby: bad…

Vim で検索結果のハイライト

Dev

Vim でファイルを開いている状態で以下のコマンドを打つと検索結果がハイライトされる。 :set hlsearch ハイライトの指定を .vimrc に書いておくと便利。 set hlsearch 検索結果のハイライトは次に別の単語を検索するまでずっと光ってる。それが邪魔なときは…

Vim の検索、マーク

Dev

Vim の基礎コマンドを覚えるぞ!シリーズの続き。 昨日まではファイル内の特定の位置や、列や行内の特定の位置など、自分が行きたい場所が想定できている(目に見えている)ときに使いそうなコマンドが多かったように思う。 今日は行きたい場所が不明確なと…

Vim の移動関連、雑多な移動

Dev

昨日の「Vim の移動関連のコマンドで使えたら便利そうなもの」の続き。 雑多な移動 H, M, L で大雑把に画面の上下を移動して、k や j (または - や + )で細かな移動をすると良さそう。 H ... 画面上で最初の非空白文字の行に移動 M ... 画面上で真ん中の非…

Vim の移動関連のコマンドで使えたら便利そうなもの

Dev

Vim の基礎コマンドを覚えるぞ!シリーズの続き。 昨日まではファイル内の特定の位置や、列や行内の特定の位置など、自分が行きたい場所が想定できている(目に見えている)ときに使いそうなコマンドが多かったように思う。 今日は行きたい場所が不明確なと…

Git リポジトリの origin を書き換える

Dev

これを実行する場面としては、SSH で Git リポジトリを 落とすべきところを誤って HTTPS で落としてしまったときなど。 まずは現在の origin を確認( git pull, git push 先)。 $ git remote -v origin https://github.com/... origin https://github.com/…

影付きの吹き出しを CSS でどう作るか

Dev

影付きのボックスに矢印を付けるにはどうしたら良いんだろうか。 ひとまず次のようなものを書いてみた。いつも矢印にボーダーを付けるために使う擬似要素に filter プロパティを当て、背景をぼかして影を表現してる。 確認したのは Chrome と Safari、 そし…

overflow: hidden と clearfix

Dev

僕は昔から overflow: hidden 派 (?) だった。けど、最近 clearfix のアプローチも使うようになりだした。 clearfix のスタイル: .clearfix::after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } そもそもこういったもの…

グループ内のボックスのクラス名で悩む

Dev

上記のように左に一つのボックス、右に左のものよりも大きいボックスを置くようなグループの命名に困ってる。 ボックスをまとめるグループの名前はそのまま group としていて、その下の 2つのボックスの名前付けに頭抱えてる。 場所を表す名前をつけると... …

git push -u

Dev

リモートにローカルの変更をプッシュするとき、-u オプションをつけると便利っぽいです。 $ git push -u origin branch 最初に git push -u origin branch のようにすれば、次から git push だけで事済みます。origin branch の部分を毎回指定する必要はあり…

Google DevTools 、エミュレーションの切り替えが楽に

Dev

先日 Google DevTools について記事を書きましたが、今回のバージョンアップで早速変更がありましたね。 DevTools に Toggle Emulation ボタンが追加されたようです。相変わらず切り替えた後はリロードする必要がありますが、切り替えが容易になったことで使…