Electron開発のサンプルコードとデモを見られる『Electron APIs』 - Macの手書き説明書

2016/06/18 102 users Electron開発 Electron デモ Mac CSS

カテゴリ：開発ツール辞書／辞典／その他 現在の価格： 無料 販売元： GitHub 対応OS：10.9.0以降 JavaScriptとHTMLとCSSというWeb開発技術でクロスプラットフォームで動くアプリを作れる、Electronを開発するための基本的なサンプルコードを掲載したアプリ。 Electron APIの基本的なところを押さえたチュートリアルで、「View Demo」ボタンを押すと、書か... 続きを読む

無限スクロール向け雑なローディング画像 - Weblog - Hail2u.net

2015/06/10 17 users 無限スクロール 実装 Weblog hail2u.net 挿入

無限スクロールはちょくちょく実装することはあるが、追加するコンテンツの読み込みや挿入はともかく、ローディング画像の処理で悩むことがある。その表示の切り替えには実装と処理のどちらにおいてもそこそこコストがかかるからだ。かなり前に色々考えるのが面倒になり、常に表示しておくという雑な手をよく使うようになった。 View Demo: Easy Loading Marker for Infinite Scr... 続きを読む

CSS Transitionを使ったスムーズにスクロールしてトップに戻る機能 - Weblog - Hail2u.net

2015/05/10 74 users マージン Weblog hail2u.net CSS 試行錯誤

前に作ったスクロールした時に位置固定のロゴをトップに戻る機能にすり替えるものを少し手直しして再導入した。今回はスムーズにスクロールさせようかと色々考えていたが、やはりJavaScriptでscrollTo()を制御するのはコストが高い。CSSならどうだと試行錯誤したところ、どうやらbody要素への負のマージンをCSS Transitionで滑らかに変化させれば良いようだ。 View Demo: S... 続きを読む

Chrome 42におけるフォント設定とlang属性 - Weblog - Hail2u.net

2015/04/17 30 users Weblog hail2u.net lang フォント設定

Chrome 42でこのウェブサイトの日本語部分が変わってしまった(かもしれない)。内部的な標準フォント設定が変わったことにもよるが、それだけではない。設定で指定したSans SerifフォントがCSSのsans-serif汎用ファミリーに反映されなくもなった。lang属性がある要素のみで再現する。 View Demo: lang="ja", font-family, and Chrome 42 ... 続きを読む

フルスクリーンでオーバーレイの検索ボックス - Weblog - Hail2u.net

2015/02/11 62 users Weblog hail2u.net トグル vmin CSS

増えてきたフルスクリーンでオーバーレイの検索ボックスだが、まだこれといった無難な実装方法はないように見える。今だとvw/vh/vmin/vmax単位を使ってレイアウト、:target擬似クラスを使ってトグルという形にすれば、ほぼCSSで実現できそうだ。 View Demo: Fullscreen Overlay Searchbox デモではShow Searchboxというリンクをクリックすると検... 続きを読む

二本線からバツ印へ - Weblog - Hail2u.net

2014/09/19 22 users Weblog hail2u.net バツ印 sandwich

Appleの新ウェブサイト(2014年9月)では狭い画面の時にグローバル・ナビゲーションを出す二本線のアイコンが表示される。それをタッチするとナビゲーションが表示されると同時に回転しながらバツ印に変化する。同じようなアニメーションをCSSでやってみると意外に面倒くさかった。 View Demo: Sandwich 二本線は以下のように擬似要素を2つ使って作った。コンテナーに対して幅を半分のサイズ、... 続きを読む

余白を割合で分割 - Weblog - Hail2u.net

2014/07/13 44 users Weblog hail2u.net 余白 Calc 割合

余白を特定の比率で分割したいなとちょっと考えていた。つまりmargin-leftとmargin-rightプロパティーの計算済みの値が3:2とかの比率で自動調節されるように、ということ。そのようなことをTwitterでちょっと書いたら、@o_tiがcalc()を使う方法を考えてくれた。 View Demo: Split margins 1 to 3 最初のデモの幅は320px、二つ目のデモの幅は4... 続きを読む

入力フォームのラベルをフワッと浮かせるパターンの別解 - Weblog - Hail2u.net

2014/06/06 37 users Weblog hail2u.net プレースホルダー ラベル

Float Label Patternはかっこよくて、単にラベルをプレースホルダーにするよりはマシなので使いたくなる。しかしラベルとプレースホルダーは別に提供してやりたい。機能も違うものなので、その方がきっと良いはずだ。そこで別解として、ラベルが斜めに動くものを考えた。もちろんCSSのみで実装している。 View Demo: Alternative Float Label Pattern 入力フォ... 続きを読む

CSSで画像を六角形にくり抜く - Weblog - Hail2u.net

2014/05/19 76 users Weblog hail2u.net SWARM CSS 六角形

Swarmで使われている六角形のプロフィール画像はちょっと流行りそう。CSSだけで行えるように考えておくとなんかの時に役に立つはず。難しく考えずに擬似要素で三角形を作るテクニックを反転させて重ねるだけでも良かったけど、CSSグラデーションで重ねた方がフレキシブルに作れた。 View Demo: CSS HEX Clip 切り抜きはCSSグラデーションを上に重ねて行うので、何らかの要素で括る必要があ... 続きを読む

code要素の直前・直後で自動折り返しを発動させる - Weblog - hail2u.net

2013/09/13 22 users Weblog hail2u.net CSS 挙動 ブラウザー

code要素の中身には途中で折返しされない長い文字列が入ることが多い。例えばinsertAdjacentHTML()であるとか。こういった文字列が行をまたぐ時、その手前にある文字(上記スクリーンショットでは「は」の文字)まで次の行に送られることがある。これはブラウザーにより挙動が違うが、CSSで大体のブラウザーで巻き込まないように調節することができる。 View Demo: Force Auto-... 続きを読む

快い図のキャプション - Weblog - hail2u.net

2011/12/19 15 users キャプション Weblog hail2u.net 斜体 文字列

画像に続けてfigcaptionをそのまま普通に表示するといまいちなことが多いです。それでも英語ならイタリック体にするとかでなんとなくその文字列がfigure要素に係っているものだということが表現できるような気がしますが、日本語の斜体はいろいろアレなので使いたくないです(よね！)。そこで画像にキャプションを綺麗に重ねる方法を模索してみました。 View Demo: Smooth Caption ま... 続きを読む

Google Web Fontsにあるお気に入りのフォント5つ - Weblog - hail2u.net

2011/12/06 60 users Weblog hail2u.net Typekit 参考 機能

Google Web Fontsのフォント登録数も随分増えてきてチェックするのが大変になってきました。一応絞り込みとかそういう機能もありますけど、Typekitのようにかゆいところに手が届く感じではありません。そこで…というわけではないですけど、なんかの参考にでもなればと私のお気に入りを5つだけ簡単な説明付きで紹介してみます。 View Demo: Five Favorite Google Web... 続きを読む

SVGのフィード・アイコン - Weblog - hail2u.net

2011/11/06 20 users SVG Weblog hail2u.net LGPL GPL

背景を完全に透明にして白い丸と円弧の部分だけのフィード・アイコンを作ってみました(上の画像は背景がオレンジ色になっていますが、CSSで背景色を指定しているだけです)。Wikimedia CommonsにあるSVGアイコンをエディタでいじっただけですけどね。SVGファイルのソースにコメントとして書いてあるように元ファイルと同じくMPL/GPL/LGPLのトリプル・ライセンスです。 View Demo... 続きを読む

CSSでモーダル・ウィンドウ - Weblog - hail2u.net

2011/10/22 159 users Weblog hail2u.net CSS None pure

pointer-eventsプロパティでnoneを指定すると最前面に置いた要素を無視して普通にページ操作が可能になります。なので、そういう風にしておいた要素をopacityプロパティで非表示にしておけば、普段は見えないけど特定の操作で最前面に飛び出すモーダル・ウィンドウとかも簡単に出来ます。pointer-eventsプロパティってこういう使い方するためにあるの？ View Demo: Pure ... 続きを読む

フレキシブルなボタン - Weblog - hail2u.net

2011/05/14 30 users Weblog hail2u.net RGBa ボタン CSS

ほぼ全てのCSSプロパティの値を相対値やrgba()カラーを利用して指定することによって、コピペしてフォント及び色の調整をするだけで使い回せる基本的なボタンを作ってみました。完成度は85%くらい。 View Demo: Flexible Button ベースとなるCSSは以下のようなシンプルなものです(もちろんベンダー拡張は省略していますが)。完全なコードはデモのページにあります。 button ... 続きを読む

CSSでアイコンをデザイン - Weblog - hail2u.net

2011/03/03 770 users グラデーション 万能 Weblog スクリーンショット 背景

ものすごく大雑把に言うと今まで画像編集ソフトでやっていた、角を丸くするとか背景をグラデーションにするなどという作業をCSSでやってしまおうというお話。もちろんCSSでできないことは多くあるので万能というわけではないが、できることに限って言えば数行のCSSコードでスクリーンショットのような効果を柔軟に適用することができる。View demo: Design icon with CSSul li a ... 続きを読む

hail2u.net - Weblog - iOSのホーム・アイコンをCSSでパクる

2011/02/03 18 users iOS Weblog hail2u.net エフェクト CSS

iOSはホーム・スクリーンにアプリケーションのアイコンを置く時、いくつかエフェクトをかけて配置する。そこら辺の話はiOS Human Interface Guidelinesに載っているので詳しくはそちらを参照。それぞれのエフェクトはCSS3ならできそうな感じのものだったので、パクっと。View Demo: iOS Home screen icon effect with CSSデモでは左から順に... 続きを読む