高さを求めて32767px
CSS昔話 Advent Calendar 2015の3日目の記事です。 32767pxといえば、もうお気づきの方もいるかもしれません。 そう、32767pxといえば、2007年頃に広まった要素の高さをそろえるテクニック（？）の中に登場する数値ですね。 floatした要素の高さを揃えたい！例えば、幅が200pxの要素.boxが3つ横に並んでいるとします。それぞれの要素はfloat:left;と背景色が指定され、中身は要素ごとに異なります。 See the Pen bEbQZV by geckotang (@geckotang) on CodePen. HTMLとCSSを見てみます。まずはHTMLからです。これといって変わったことはしていません。 The quick brown fox jumps The quick brown fox jumps over the lazy dog. Th
コメントアウトと要素フエーテル
昔々、あるところにIE6という、たいそう元気なブラウザがおったそうな。 めでたしめでたし… ということで、CSS昔話 Advent Calendar 2015が始まりました。記念となる1日目では「コメントアウトと要素フエーテル」と題しまして、IE6で起きたバグを紹介します。 要素が増える要素フエーテルつまり要素が増えるバグなのですが、再現する条件は3つあります。 IE6floatプロパティにnone以外の値を使うfloatプロパティを使用した要素間でコメントアウトを使用するこれらを満たした時、画面上にはあるはずのない何かが表示されます。まずはHTMLから見ていきましょう。 バグを再現するまずはHTMLを以下のようにします。 floating element 1 floating element 2 floating element 3 floating element 4 .floatの閉
IE8でツイートボタン貼り付けるとエラーが出る件
2015年1月26日時点でのメモです。今後どうなっているかはわかりません。 先週くらい（2015年1月19日頃）からツイートボタンを貼り付けているページをIE8で見ると以下のエラーが出るようになった。 Script error widgets.js Code: 0 URI: https://platform.twitter.com/widget/js 相変わらず役に立たないエラーである。 発生しているページhttps://about.twitter.com/resources/buttons もはや公式の配布ページでエラー。 このまま貼り付けたり、jQueryプラグインとかでラップしているページでもエラーが出る。 発生してないページhttp://news.yahoo.co.jp/pickup/6147359 Yahoo!ニュースの記事ページのツイートボタンではエラーが出ていない。なぜかと思
noscript要素を使ったら中身がエスケープされた件 #CSS珍百景
もう2日も過ぎていますが、 CSS珍百景 Calendar 2014 17日目の記事です。 端的にまとめると、Chromeで設定からJSをオフにしたらnoscriptの中身がエスケープされて、そのまま文字列として表示されて、リロードしたらHTMLとして描画されたって話。 Demo JSをオフにした時、↓に赤いメッセージが表示される JaVaScRiPtがお麩です JSをオフにした時、↑に赤いメッセージが表示される /*css*/ div { color: red; font-weight: bold; } JSをオフにした時に、期待する結果は以下である。 しかし、Chrome v 39.0.2171.95 の設定からオフにした場合は（ 設定 > プライバシー > コンテンツの設定 > すべてのサイトに対して Javascript の実行を許可しない を選択）、以下のようになってしまう。 な
ワークフローをGitHubで公開する #alfred
12日ですが、 これはAlfred Advent Calendar 2014 11日目の記事です。 いろいろやり方に悩んでたんですが、良さそうな方法をメモしておきます。 まずAlfred.appでBlank Workflow作るWorkflowsの画面の左下にある + をクリックして Blank Workflowを選びます。必要項目を記入して、Createを押します。この時点で、 /Users/{ユーザ名}/Library/Application\ Support/Alfred\ 2/Alfred.alfredpreferences/workflows/user.workflow.{ユニークなID} というディレクトリが作成され、そのワークフローの情報を持った info.plist がそのディレクトリに作成されます。Gitで管理するつぎにそのディレクトリを開きます。開くときはWorkflo
Firefoxでボーダーのアンチエイリアスが消える #CSS珍百景
CSS珍百景 Calendar 2014 9日目の記事です。 Firefoxでボーダーのアンチエイリアスが消える CSSで、borderプロパティを使って、三角形を２個作って、ずらして重ねるようなのを作った。 こういうやつ。 特に問題のない？コードだけど、Firefoxで荒ぶってたのでメモを残す。 /*css*/ .t1:before, .t1:after { position: absolute; top: 0; left: 0; content: ""; width: 0; height: 0; border-top: 30px solid transparent; border-bottom: 30px solid transparent; } .t1:before { border-left: 30px solid #000; } .t1:after { left: -1px; b
僕が作ったワークフロー #alfred
Alfred Advent Calendar 2014 4日目の記事です。 日をまたいでしまいましたが、書きます。すいません。 今年？じゃないものも含まれる気がしますが、今までに作ったワークフローを一挙紹介します。 意外とたくさん作ったと思ってる。 dictithttps://github.com/geckotang/alfredworkflow/blob/master/dictit.alfredworkflow テキストを選択して、設定したホットキーを押すと、選択した単語を 辞書.app に投げて、sayコマンド で発音させるワークフロー。 英単語の発音調べたりするために作った。 HatebuListhttps://github.com/geckotang/alfred-hatebulist はてブの全文検索APIを叩いて自分のブックマークを検索できるワークフロー。 はてなのWSSE認証
Chrome/Safariではtrにbox-shadowが効かない #CSS珍百景
CSS珍百景 Calendar 2014 3日目の記事です。 日をまたいでしまいましたが、書きます。すいません。 今年の9月ごろにChromeとSafariで発現した珍百景です。 Chrome/Safariにおいて、tr要素に対し、box-shadowプロパティを指定した時、それが適用されないというものです。 ちなみに後述しますがFirefoxではちゃんと適用されます。 ということで再現してみた以下の様なHTMLとCSSでこの現象は再現できます。 The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. /*css*/ table { box-shadow: 0 0 10px black; padding: 10px; } tr { box-shadow: 0 0 10
MicroViewについてのいろいろ
Arduino Advent Calendar 2014 2日目の記事です。 会社の開発合宿で、MicroViewを扱った時に、いろいろ調べたので羅列しておきます。 MicroViewってなに単色の液晶付きの手のひらサイズのArduinoです。 Kickstarterで出資して手に入れたけど、今はSparkfun で購入することができます。 そのMicroViewのチュートリアルである MicroView Learning Kit を見れば、基本的なことがわかる。 このチュートリアルは配線もステップを踏んで確認しながら作業を進めることができる。 そして、チュートリアルをやっていく時、ブラウザでArduinoのプログラムを書き、Arduinoに転送できるようにするChrome拡張を提供している codebender を利用するととても捗る。 MicroViewのピンアウトhttp://kit
今年のネーミングルール #CSS設計
CSS Architecture Advent Calendar 2014 1日目の記事です。 CSSの設計をしていく上で大事なネーミングルール。 今年僕が関わったプロジェクトでのネーミングルールをゆるく紹介したいと思います。 こうやって名前をつけてました。基本となる設計思想はBEMです。 BEMについては、 CodeGrid を御覧ください。 ネーミングルールを決めるとき、区切り文字をハイフンかアンダースコアか、それとも混在か悩みましたが、とりあえず以下の様なルールでやっていくことにしました。 /*css*/ [Prefix] - [Block] - [Element] -- [[Modifier-Key] - [Modifiler-Value]] { /* Rule Set */ } 一つ一つ解説していきます。 Prefixまずは接頭辞です。 接頭辞としてプロジェクト名や世代などを付与
#CSS珍百景 Advent Calendar 2014
CSS珍百景 Advent Calendar 2014 1日目の記事です。 そもそもCSS珍百景って何要はバグです。 ブラウザでの表示がどう考えてもおかしかったり、いやいやこれはないだろ。みたいな、状況のこと。 別に100種類あるわけではないです。なんとなく語感が良かったから勝手に呼んでる。 では、1日目のCSS珍百景はこちらです。 input[type=radio]を拡大してみたスマホ向けのテクニックで「押しづらいinput[type="radio"]をtransform: scale(2);とかして大きくして押しやすくする」というテクニックがあります。 とまぁそれ自体は知っていたんですが、ChromeとSafariで見たらすごいことになってた。 検証用のデモはこちら 各ブラウザでの見た目を検証したデモの上から transform:scale(1.5);transform:scale(2
GitHubにおけるコードレビューを快適にするAlfred Workflowをつくった
July 18, 2014ということで、作りました。 題名と文章のフォーマットはGithubにおけるコードレビューを快適にするChrome拡張をつくった。 を真似てます。 使用方法GitHubのリポジトリ からダウンロードするAlfredで hrsと打つ、もしくはhrs 任意のキーワードを打つお好きな惚れさせ男子を選ぶEnterで画像のURLをクリップボードにコピー、Cmd+Enterで画像のURLをMarkdown形式でクリップボードにコピーCmd+Vで貼り付ける＿人人人人人＿ ＞ 楽しい ＜ ￣Y^Y^Y^Y￣ 謝辞このAlfred Workflowでは以下のリポジトリにあるjsonを使用させて頂いています。 惚れさせ男子データベース そして、素晴らしい名言をありがとうございます。 地獄のミサワの「女に惚れさす名言集」 最後に本当は候補のアイコンを、そのサムネイルにしたいのですが… ロ
CSS Variables 2014/05/22
2014年1月ごろにCodeGridで、CSS Variablesを使うという記事を書きました。 CSS Variablesは、CSSの中で独自のプロパティを定義し、その値を変数として使うことができるという仕様です。 ちなみに、今はその記事中にあるサンプルはどれも動きません。かなしいね。 間違いとか、ご意見ありましたら @GeckoTangまでどうぞ。 カスタムプロパティの接頭辞が変わった以前は以下の様に、varを接頭辞としてカスタムプロパティを定義し、値として利用する際は、 var関数の中で接頭辞を除いたカスタムプロパティ名を指定していました。 /*css*/ :root { /* 定義 */ var-fontsize: 20px; } .medium { /* 利用 */ font-size: var(fontsize); /* 20px */ } CodeGridの記事を書いてから、
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
3種類のTKG
今年読んだ漫画一覧
コメントアウトと要素フエーテル
IE7の隣接セレクタのバグ #CSS珍百景
brを非表示にした #CSS珍百景
Alfredの<icon>の画像を外部から取得したものに変更する #alfred
今年、私が買ったArduino関連のもの #Arduino