You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
表計算ソフトのExcelでお絵描きする「Excelのミケランジェロ」のように、ソフトウェアの可能性を最大限に広げるアーティストが存在します。元Kickstarterの最高技術責任者アンディ・バイオ氏が、HTML/CSSの手書きコードだけで美しい絵を作り出す職人の作品をTwitterで紹介しています。 Diana Smith | Software Engineer | cyanharlow @ GitHub http://diana-adrianne.com/ バイオ氏がCSSで作られたというイラストをTwitterで紹介しました。 This stunning illustration by @cyanharlow is pure HTML/CSS. Every element was typed by hand, drawing with only a text editor and Ch
Project Quantumのことをお聞きになったことがあるでしょう。これはFirefoxを高速化するために、Firefoxの中身を大幅に書き換えたものです。実験的なブラウザ、Servoから部分的に交換を実施し、エンジンの他の部分の著しい改善を図っています。 このプロジェクトは、飛行中のジェット機でのジェットエンジンの取り替えに例えられます。現場でコンポーネントごとに変更を実施するので、各コンポーネントの準備が整い次第、Firefoxで効果を確認することができます。 また、Servoから採用した最初の重要なコンポーネントは、Quantum CSSと呼ばれる新しいCSSエンジン(以前の別名はStylo)で、現在はNightly版でテストすることが可能です。(編注:Firefox 57からはデフォルトで有効化されています) about:config に行き、 layout.css.servo
Mojikは、ウェブにおける和文の文字組みをコントロールするためのJavaScriptライブラリです。現在のところ、以下のパターンでの「アキ」の調整ができます。 連続する約物のアキ 行頭の始め括弧のアキ 和欧間のアキ デモ 「行頭の開き括弧や、『(連続した)括弧』」「句読点」、{中点・[コロンなど:(約物のアキをコントロール。);],}! 【こんなふうに】? 「行頭の開き括弧や、『(連続した)括弧』」「句読点」、{中点・[コロンなど:(約物のアキをコントロール。);],}! 【こんなふうに】? Windows 10(ウィンドウズ テン)は、マイクロソフトが開発およびリリースしている、Windowsシリーズに属するパーソナルコンピュータおよび8インチ以上のタブレット用のオペレーティングシステム(OS)である。コードネームは「Threshold(スレッショルド)」(ビルド10586まで)および
9つのおとぎ話 CSSは迷走しています。JavaScriptでドキュメントをスタイリングしているプロジェクトでは、多くの場合誤った理由からその方式を選択しています。本稿では、よくある誤解(神話)を列挙し、そうした問題に対するCSSソリューションを紹介します。 本稿は、特定のプロジェクトや人物への攻撃を意図するものではありません。ここでは、“CSS in JavaScript”(CSS in JS)を styled-components を使用することと定義します。これは、Reactのコンポーネントをスタイリングする最近のトレンドとなっています。 styled-components の作者である Max Stoiber と Glen Maddern 、また彼らに協力した人々は皆、卓越したアイデアと善意にあふれる優秀な人々です。 完全な透明性のために断っておくと、私は react-css-mo
CSSプロパティの1つである display は、CSSレイアウトに用いるプロパティの中でも極めて重要なものです。よく使われているのは、 block や inline 、 none あたりでしょう。 table や inline-block も、今ではかなり一般的になってきたと言えます。一方、 flex は新たに登場したものです。きっとユーザに気に入られるでしょう。これはレイアウト用に特別に作られたdisplayプロパティです。さらには、この先、 grid がまもなく私たちの秘密兵器となるでしょう(現在、盛んに取り組まれています)。これもまた、レイアウトに特化したプロパティです。 本記事は、当初予定していたよりもずっと長くなりました。ご希望に応じて、自由にサブセクションに飛んでお読みいただければと思います。もし、お時間を割いて全体を読んでいただけるのでしたら、大変嬉しく思います???? 目
最近書いているCSSがそもそも今サービスが推奨しているブラウザでサポートされているのかチェックするのだるいと思っていたら、doiuseという便利なツールを見つけた。 doiuseとは https://www.npmjs.com/package/doiuse CSSのブラウザサポートのチェックをしてくれるモジュール。caniuse のデータベースを利用して、ブラウザと自分が書いているCSSを指定して、サポートされていないCSSの書き方を見つけてくれる。 試す環境を用意する とりあえず試すための環境を用意する。適当なディレクトリを作って、必要なライブラリをインストールする。また、検証するためにbootstrapも入れておく。 $ mkdir try-doiuse $ cd try-doiuse $ npm install --save-dev doiuse $ npm install --sa
For new and experienced web developers alike, CSS isn’t always the easiest to deal with. Specificity and cascade order can be complex and it can be confusing to figure out what applies to each element on the page. To make matters worse, it isn’t always clear what each property does, or what its valid values are. Sure, you could type display: block into the Styles sidebar editor, but what does that
今話題の女子高生社長の椎木里佳さんが女の子向け究極の暇つぶしのiOSアプリ「ミルピク(milkpic)』をリリースされたらしいのですが、これにパクり疑惑。 というわけで、本当にパクリなのかどうか、ちょっと検証してみました。 「ミルピク(milkpic)』のcssが、はてな社のアプリ「Presso」のcssをパクっている? 疑惑の発端となったツイート twitterで、oqunoさんという方が、こんな発見をされていました。 女子高生社長を売りにしてる株式会社AMFが満を持してリリースしたアプリのサイト https://t.co/70B9KGnMwl がはてなのPressoのサイト https://t.co/w8bnIxpJUb からCSSとかパクってると俺の中で話題に — oquno (@oquno) 2016, 2月 9 cssとは? cssとはスタイルシートのことで、webページのデザイ
CSS variables, more accurately known as CSS custom properties, are landing in Chrome 49. They can be useful for reducing repetition in CSS, and also for powerful runtime effects like theme switching and potentially extending/polyfilling future CSS features. CSS clutter When designing an application it’s a common practice to set aside a set of brand colors that will be reused to keep the look of th
タイトルの通り、CSS のカバレッジを計測するツールを作りました。 github.com これは何? css に書かれたスタイルが html の中でどのくらい使われているのか計測できるツールです。 使用頻度の多いスタイルを調べる(影響範囲が大きいので気をつける) 未使用のスタイルを調べる(消したい) ってのを調べるために作りました。 なんて読むの? Clairvoyance は「クレアボヤンス」と読みます。 千里眼 という意味です。 PhantomJS を使っているので、超常現象っぽい名前にしてみました。厨二病乙。 インストール方法 npm でインストールできます。 $ npm install clairvoyance phantomjs を使っているので、もしかしたら phantomjs のインストールが別途必要かも。 使い方 インストールすると clairvoyance というコマンド
Only CSS. No JavaScript! Small file size. Only 1.5KB minified and gzipped! Easy to use. No config required. Supports Accessibility with aria-label attributes Works in all modern browsers. First get the library from the github repo. Then in your HTML include the library CSS: <link rel="stylesheet" href="hint.css"> Now, all you need to do is give your element any position class and tooltip text usin
はじめに さる2016年1月9日、西脇.rb&神戸.rbの合同勉強会として「RubyistのためのCSS勉強会」を開催しました。 主催者の僕自身が「参加して良かった!」と思えるぐらい有益な情報がたくさん詰まった勉強会になったので、今回のエントリではこの勉強会の内容を紹介します。 もくじ ちょっと長いので、先に目次を載せておきます。 はじめに もくじ 講師は合同会社フィヨルドの町田さん! この勉強会で講義してもらったテーマ 座学編 Railsの app/assets/stylesheets 内のディレクトリ構成例 最近注目を集めているAtomic Designについて 3種類のリセット系CSSの特徴について 変更に強いマークアップのルールについて プログラマとデザイナの協業について ハンズオン編 進め方の具体例 1問目:グローバルナビゲーションの作成 2問目:アラート画面の作成 3問目:記事
Mac OS X 10.11 El Capitanの登場で新たなフォントが使えるようになったので、CSS font-familyの変更例を紹介します。 El Capitanの新フォント OS X El Capitanでは、新たに4つのフォント「クレー」「筑紫A丸ゴシック」「筑紫B丸ゴシック」「游明朝体+36ポかな」が追加されました。さらに、おなじみ「ヒラギノ角ゴ」に新たなウェイトが追加され、W0〜W9までの全10ウェイトをすべて利用できるようになりました。 OS X El Capitanには4種の新しい日本語フォントが追加! 新フォントに関しては、普通のウェブサイトで使うことはあまりないかもしれません(使っても面白そうだと思います)が、ヒラギノ角ゴの利用に関してはフォント名の変更という注意点があります。 Hiragino Kaku Gothic ProN → Hiragino Sans ヒ
Since the last post on CSS was popular here is another simple CSS trick that I found useful in the past. Let’s say we want to find the difference between these two images: You can do this by simply inverting the colors and then stacking them together at 50% opacity. This can be achieved with a single CSS filter: -webkit-filter: invert(100%) opacity(50%); What you should get back is a gray image ex
※本ページはプロモーションが含まれています 作成:2015/08/17 iPhoneでこのブログのリンクをタップすると1回目では画面遷移せず、2回タップするとようやく画面遷移するという現象が起きています。 いろいろ試行錯誤して解決したわけではないですが、原因の推測と対策を紹介します。 現象 2回タップしないと画面遷移しないリンクはこのブログのソーシャルボタン部分。 下記画像のようになっているリンクでTwitterをタップすると、画像が薄くなるだけで画面遷移しない。 ↓ この後にもう一度Twitterをタップすると画面遷移が行われる。 Twitterのマークを1度タップし薄くなった状態で、1回のタップで画面遷移する正常なリンクをタップしても1度目では反応せず2回めのタップで画面遷移する。 このような状況。 原因の推測 上記現象が起こるリンクはCSSで「opacity」が設定されていた。 .s
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く