「css」カテゴリーアーカイブ

CSS in JSはCSSの書き方をどのように変えるのか – yuhei blog

CSS in JSはCSSの書き方をどのように変えるのか - yuhei blog

CSS in JSはCSSの書き方をどのように変えるのか - yuhei blog

CSSの難しさの根源はセレクタにある。CSS設計のための方法論ではどのようにしてセレクタと関わるべきかについて語られる。 その関わり方がCSSのみで実現できなければならないという制約を捨てたのがいわゆるCSS in JSの類(定義的に微妙なやつも全部ひっくるめて)だ。可能性は一気に広がり無数のライブラリが生み出され...

はてなブックマーク - CSS in JSはCSSの書き方をどのように変えるのか - yuhei blog はてなブックマークに追加

CSS in JSはCSSの書き方をどのように変えるのか – yuhei blog

CSS in JSはCSSの書き方をどのように変えるのか - yuhei blog

CSS in JSはCSSの書き方をどのように変えるのか - yuhei blog

CSSの難しさの根源はセレクタにある。CSS設計のための方法論ではどのようにしてセレクタと関わるべきかについて語られる。 その関わり方がCSSのみで実現できなければならないという制約を捨てたのがいわゆるCSS in JSの類(定義的に微妙なやつも全部ひっくるめて)だ。可能性は一気に広がり無数のライブラリが生み出され...

はてなブックマーク - CSS in JSはCSSの書き方をどのように変えるのか - yuhei blog はてなブックマークに追加

Hey! Say! JUMPがグループ名の「a」のためにフォントまで用意しているという話 – in between days

Hey! Say! JUMPがグループ名の「a」のためにフォントまで用意しているという話 - in between days

Hey! Say! JUMPがグループ名の「a」のためにフォントまで用意しているという話 - in between days

NHKの紅白歌合戦2018の出場歌手が発表になり、 出場歌手|第69回NHK紅白歌合戦 この一覧でジャニーズの「Hey! Say! JUMP」の名前だけが画像だということが話題になった。 第69回NHK紅白歌合戦の出場歌手のページhttps://t.co/Z6lbjpIbMY "Hey! Say! JUMP" の文字がどうも選択できない。 HTML ソースを見た時、NHK の 「"...

はてなブックマーク - Hey! Say! JUMPがグループ名の「a」のためにフォントまで用意しているという話 - in between days はてなブックマークに追加

色盲・色弱の人にWebページがどのように見えているかシミュレートできるChromeの機能拡張 -Colorblindly | コリス

色盲・色弱の人にWebページがどのように見えているかシミュレートできるChromeの機能拡張 -Colorblindly | コリス

色盲・色弱の人にWebページがどのように見えているかシミュレートできるChromeの機能拡張 -Colorblindly | コリス

色盲や色弱の人がどのように見えているかシミュレートできるオンラインサービスはいつかありますが、テストサーバーやローカルで利用できないのが残念なところです。 色盲・色弱の人の見え方をシミュレートできるChromeの機能拡張...記事の続きを読む

はてなブックマーク - 色盲・色弱の人にWebページがどのように見えているかシミュレートできるChromeの機能拡張 -Colorblindly | コリス はてなブックマークに追加

Hey! Say! JUMP に変な指定がある – jaguchi log

Hey! Say! JUMP に変な指定がある – jaguchi log

Hey! Say! JUMP に変な指定がある – jaguchi log

どうも Hey! Say! JUMP の a は一階建ての字形じゃないとダメっていう意味不明な決まりがあるみたいで テレビ朝日は heysayjump_a.gif を挿入させられるし: ジャニーズ公式は専用の span class 作ってるし: テレビ東京は Comic Sans を駆使してる:

はてなブックマーク - Hey! Say! JUMP に変な指定がある – jaguchi log はてなブックマークに追加

CSSの「calc()関数」を使うとすごく便利に!レスポンシブ対応のレイアウトで高さを最適化するテクニック | コリス

CSSの「calc()関数」を使うとすごく便利に!レスポンシブ対応のレイアウトで高さを最適化するテクニック | コリス

CSSの「calc()関数」を使うとすごく便利に!レスポンシブ対応のレイアウトで高さを最適化するテクニック | コリス

レスポンシブ対応のレイアウトを実装する際に手間なのは、ブレイクポイントの定義です。ここ1,2年でもたくさんのデバイスがリリースされ、それに伴いスクリーンサイズの種類も増えてきました。 そんな時に便利なのがCSSの「calc()関数」を使ったテクニック。 calc()を使用して、デスクトップやタブレットやスマホのそれ...

はてなブックマーク - CSSの「calc()関数」を使うとすごく便利に!レスポンシブ対応のレイアウトで高さを最適化するテクニック | コリス はてなブックマークに追加

CSSすら不要!detailsとsummaryタグで作る簡単アコーディオン | Webクリエイターボックス

CSSすら不要!detailsとsummaryタグで作る簡単アコーディオン | Webクリエイターボックス

CSSすら不要!detailsとsummaryタグで作る簡単アコーディオン | Webクリエイターボックス

2018年11月14日 CSS, HTML5 長い文章や補足説明をアコーディオン(折りたたみ)にしたい時ってありますよね。そんな時に使える details と summary タグを紹介します。CSSなしでも実装できますが、CSSを加えてより素敵な表現をする方法も挑戦しましょう! detailsとsummaryタグの基本的な使い方 details タグで囲んだ部...

はてなブックマーク - CSSすら不要!detailsとsummaryタグで作る簡単アコーディオン | Webクリエイターボックス はてなブックマークに追加

Web制作者が備えておきたい最新版チートシートのまとめ | コリス

Web制作者が備えておきたい最新版チートシートのまとめ | コリス

Web制作者が備えておきたい最新版チートシートのまとめ | コリス

あれはどうだったかな? という時にすぐ分かる、Web制作の実装や勉強に役立つチートシートを紹介します。 iPhone 8やXsのスクリーンサイズはいくつだったかな? CSS FlexboxやGridの挙動がまとめて知りた...記事の続きを読む

はてなブックマーク - Web制作者が備えておきたい最新版チートシートのまとめ | コリス はてなブックマークに追加

Web制作者が備えておきたい最新版チートシートのまとめ | コリス

Web制作者が備えておきたい最新版チートシートのまとめ | コリス

Web制作者が備えておきたい最新版チートシートのまとめ | コリス

あれはどうだったかな? という時にすぐ分かる、Web制作の実装や勉強に役立つチートシートを紹介します。 iPhone 8やXsのスクリーンサイズはいくつだったかな? CSS FlexboxやGridの挙動がまとめて知りた...記事の続きを読む

はてなブックマーク - Web制作者が備えておきたい最新版チートシートのまとめ | コリス はてなブックマークに追加

【2018年版】フロントエンドエンジニアがよく使うWebサービス・アプリまとめ – たこさんちゃんねる(別枠)

【2018年版】フロントエンドエンジニアがよく使うWebサービス・アプリまとめ - たこさんちゃんねる(別枠)

【2018年版】フロントエンドエンジニアがよく使うWebサービス・アプリまとめ - たこさんちゃんねる(別枠)

個人的に2018年はこうだったなぁっていうまとめです。一応業務で日頃使っているサービスやアプリを紹介していきます。フロントエンドエンジニアというか制作会社なのでどちらかというとコーダーとかに近いかもしれません。あなたの役に立つかどうかも知れません。 ■ 目次 基本ベース ソフト・アプリケーション系 エディ...

はてなブックマーク - 【2018年版】フロントエンドエンジニアがよく使うWebサービス・アプリまとめ - たこさんちゃんねる(別枠) はてなブックマークに追加

box-shadowを使ってCSSだけでドット絵を描き、アニメーションさせる | Black Everyday Company

box-shadowを使ってCSSだけでドット絵を描き、アニメーションさせる | Black Everyday Company


box-shadowを使ってCSSだけでドット絵を描き、アニメーションさせる
        |
        Black Everyday Company

CSSだけでドット絵(Pixel Art)を描く・アニメーションさせる方法を紹介する。ただ、バニラCSSだけでも大丈夫なのだが、よりメンテナブルにするためSassで描く方法も併せて紹介する。 ちなみに下図のようなドット絵がつくれる。 マリオとMinecraftの土ブロックは、CSSアニメーションをつかって動かしている。もちろんJa...

はてなブックマーク -
box-shadowを使ってCSSだけでドット絵を描き、アニメーションさせる
        |
        Black Everyday Company
はてなブックマークに追加

CSSのborder-radiusは実はすごかった!あまり知られていない機能を使用して、かっこいいレイアウトを作る方法 | コリス

CSSのborder-radiusは実はすごかった!あまり知られていない機能を使用して、かっこいいレイアウトを作る方法 | コリス

  CSSのborder-radiusは実はすごかった!あまり知られていない機能を使用して、かっこいいレイアウトを作る方法 | コリス

border-radiusプロパティは角丸を定義しますが、カードなどの矩形の角を丸くするために使用するだけでなく、さまざまな形を作成することができます。 矩形や角丸だけのレイアウトではなく、さまざまな形を使用できるスタイルシートのテクニックを紹介します。 CSS border-radius can do that? 下記は各ポイントを意訳し...

はてなブックマーク -   CSSのborder-radiusは実はすごかった!あまり知られていない機能を使用して、かっこいいレイアウトを作る方法 | コリス はてなブックマークに追加

もっと気軽にアウトプットできる技術ブログサービス「Qrunch(クランチ)」をリリースした【個人開発】

もっと気軽にアウトプットできる技術ブログサービス「Qrunch(クランチ)」をリリースした【個人開発】

もっと気軽にアウトプットできる技術ブログサービス「Qrunch(クランチ)」をリリースした【個人開発】

「もっと気軽にアウトプットできる」を コンセプトにした 技術ブログサービス「Qrunch(クランチ)」のβ版をリリースしました! 6月頃から実装に取り掛かり、隙間時間を使いながらコツコツ開発してきたのですが、4ヵ月経った今、こうして無事リリースに辿り着けてほっとしています。 今回は、そのサービスの紹介と技術周...

はてなブックマーク - もっと気軽にアウトプットできる技術ブログサービス「Qrunch(クランチ)」をリリースした【個人開発】 はてなブックマークに追加

一休.comレストランのスマートフォン検索ページがSPAになりました。 – 一休.com Developers Blog

一休.comレストランのスマートフォン検索ページがSPAになりました。 - 一休.com Developers Blog

一休.comレストランのスマートフォン検索ページがSPAになりました。 - 一休.com Developers Blog

一休.com レストランは今年の 7 月 18 日、スマートフォン向け検索ページのリニューアルを行いました。このエントリーでは、その中身について少し紹介させていただきます。 検索ページの課題 一休.com レストランではスマートフォン向け検索ページに対して「遅い」という課題意識がありました。これは技術面で少しブレイ...

はてなブックマーク - 一休.comレストランのスマートフォン検索ページがSPAになりました。 - 一休.com Developers Blog はてなブックマークに追加

CSS Gridが適しているレイアウト、Flexboxが適してるレイアウトを詳しく解説 | コリス

CSS Gridが適しているレイアウト、Flexboxが適してるレイアウトを詳しく解説 | コリス

  CSS Gridが適しているレイアウト、Flexboxが適してるレイアウトを詳しく解説 | コリス

CSS GridとFlexboxは、CSSで現在主流となるレイアウトのテクノロジーです。 CSS GridとFlexboxは表面的には似ているように感じるかもしれません。しかし、実際には異なるタスクに使用され、それぞれ異なるレイアウトの問題を解決します。 Flexboxが適してる場合、CSS Gridが適している場合、また両方を使用する場合、さ...

はてなブックマーク -   CSS Gridが適しているレイアウト、Flexboxが適してるレイアウトを詳しく解説 | コリス はてなブックマークに追加

Appleのようなスクロールに連動したエフェクトもこれなら簡単に実装できる1KBの超軽量スクリプト -ScrollOut | コリス

Appleのようなスクロールに連動したエフェクトもこれなら簡単に実装できる1KBの超軽量スクリプト -ScrollOut | コリス

  Appleのようなスクロールに連動したエフェクトもこれなら簡単に実装できる1KBの超軽量スクリプト -ScrollOut | コリス

スクロールするとコンテンツをふわりと表示させたり、追従するように表示させたり、ビューポートに表示されてない画像をLazyLoadさせたり、そういえば今回のApple Watchでも面白いスクロールエフェクトが採用されていますね。 スクロールによる変化を検出し、それに合わせてCSSのさまざまなエフェクトを簡単に与えること...

はてなブックマーク -   Appleのようなスクロールに連動したエフェクトもこれなら簡単に実装できる1KBの超軽量スクリプト -ScrollOut | コリス はてなブックマークに追加

1クリックでHTML要素の構造を可視化し、セマンティック要素が正しく実装されているか検証できる -Trashy.css | コリス

1クリックでHTML要素の構造を可視化し、セマンティック要素が正しく実装されているか検証できる -Trashy.css | コリス

1クリックでHTML要素の構造を可視化し、セマンティック要素が正しく実装されているか検証できる -Trashy.css | コリス

Webページに実装されているHTML要素の構造を可視化し、header, nav, main, articleなどセマンティック要素が正しく実装されているか検証できるスタイルシートを紹介します。 デバッグ機能も備えており、不正なマークアップや問題のあるマークアップを表示することもできます。 Trashy.css Trashy.css -GitHub Trashy.css...

はてなブックマーク - 1クリックでHTML要素の構造を可視化し、セマンティック要素が正しく実装されているか検証できる -Trashy.css | コリス はてなブックマークに追加

[CSS]クリック可能な範囲を広げるスタイルシートのテクニック、a要素はボタンだけでもカード全体をクリック可能に | コリス

[CSS]クリック可能な範囲を広げるスタイルシートのテクニック、a要素はボタンだけでもカード全体をクリック可能に | コリス

[CSS]クリック可能な範囲を広げるスタイルシートのテクニック、a要素はボタンだけでもカード全体をクリック可能に | コリス

a要素はボタンだけ、でもクリック可能なエリアはカード全体にしたい、と思う時は少なくないと思います。a要素にdisplay: block;を加えてもボタンだけだし、あとはjQueryのプラグインなどJavaScriptでク...記事の続きを読む

はてなブックマーク - [CSS]クリック可能な範囲を広げるスタイルシートのテクニック、a要素はボタンだけでもカード全体をクリック可能に | コリス はてなブックマークに追加

ReactとVueってどう違う?全く同じアプリをReactとVueで作成してみて分かった相違点 | コリス

ReactとVueってどう違う?全く同じアプリをReactとVueで作成してみて分かった相違点 | コリス

ReactとVueってどう違う?全く同じアプリをReactとVueで作成してみて分かった相違点 | コリス

日常的にVueを使用している開発者が、Reactはどうなのだろうと思い、ReactとVueで全く同じアプリを作成した時のそれぞれの工程を比較して分かった相違点を紹介します。 I created the exact same app in React and Vue. Here are the differences. 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サ...

はてなブックマーク - ReactとVueってどう違う?全く同じアプリをReactとVueで作成してみて分かった相違点 | コリス はてなブックマークに追加

Vue CLI 3.0 が来ました! — Vue.js

Vue CLI 3.0 が来ました! — Vue.js

Vue CLI 3.0 が来ました! — Vue.js

Aug 11, 2018 このブログはこちらの翻訳ブログです。 過去数ヶ月にわたり、私たちは Vue アプリケーション用の標準ビルドツールチェーン、次世代の Vue CLI について懸命に取り組んできました。 今日私たちは Vue CLI 3.0 のリリースとそれに付随する全てのエキサイティングな機能を発表することにわくわくしています。 ...

はてなブックマーク - Vue CLI 3.0 が来ました! — Vue.js はてなブックマークに追加

[CSS]知っておくと便利!レスポンシブ用に画像を配置するスタイルシートの5つのテクニック | コリス

[CSS]知っておくと便利!レスポンシブ用に画像を配置するスタイルシートの5つのテクニック | コリス

[CSS]知っておくと便利!レスポンシブ用に画像を配置するスタイルシートの5つのテクニック | コリス

何らかの理由で画像をレスポンシブ対応にうまく配置できない時があるかもしれません。何時間もかけて、いろいろな実装方法を試すこともあるでしょう。 CSSハックは無しで、レスポンシブ用に画像のサイズ変更を処理して配置するスタイルシートの5つのテクニックを紹介します。 Time-saving CSS techniques to create resp...

はてなブックマーク - [CSS]知っておくと便利!レスポンシブ用に画像を配置するスタイルシートの5つのテクニック | コリス はてなブックマークに追加

[CSS]テキスト要素の先頭行だけline-heightを取り除き、上ぴったりに揃えるスタイルシートのテクニック | コリス

[CSS]テキスト要素の先頭行だけline-heightを取り除き、上ぴったりに揃えるスタイルシートのテクニック | コリス

[CSS]テキスト要素の先頭行だけline-heightを取り除き、上ぴったりに揃えるスタイルシートのテクニック | コリス

テキスト要素を配置する際、line-heightがあると、テキストの先頭行を上ぴったりに揃えることはできません。先頭行だけline-heightでできた上スペースを取り除き、上に揃えるスタイルシートのテクニックを紹介します。 これをしたいと思った人は少なくないと思います。 先頭行の余計な余白を取り除き、ぴたっと揃えるこ...

はてなブックマーク - [CSS]テキスト要素の先頭行だけline-heightを取り除き、上ぴったりに揃えるスタイルシートのテクニック | コリス はてなブックマークに追加

保存しておくと便利!CSS Flexboxでよく使用するコードがまとめられたCSSのスニペット集

保存しておくと便利!CSS Flexboxでよく使用するコードがまとめられたCSSのスニペット集

保存しておくと便利!CSS Flexboxでよく使用するコードがまとめられたCSSのスニペット集

ヘッダでロゴを左寄せにしたり、検索窓を右寄せにしたり、画像をページの中央に配置したり、ページ上のあらゆる要素を揃え整列させるFlexboxをベースにしたスタイルシートのスニペットを紹介します。 サイトやブログの全体で利用できるユーティリティのclassとして、保存しておくと便利なスニペット集です。 Speed up al...

はてなブックマーク - 保存しておくと便利!CSS Flexboxでよく使用するコードがまとめられたCSSのスニペット集 はてなブックマークに追加

[CSS]知っておくと便利!スマホで要素を高さいっぱいに表示したいのに、期待通りに表示されない時の解決方法 | コリス

[CSS]知っておくと便利!スマホで要素を高さいっぱいに表示したいのに、期待通りに表示されない時の解決方法 | コリス

[CSS]知っておくと便利!スマホで要素を高さいっぱいに表示したいのに、期待通りに表示されない時の解決方法 | コリス

ビューポートを使った単位(vw, vhなど)は、特にスマホの各ブラウザにおいて複雑です。例えば、vwのスクロールバーを考慮する必要がありますか? サイトのナビゲーションやページコントロールはどうでしょうか? それらは計算に含まれますか? スマホで要素をビューポートの高さいっぱいに表示したいのに、期待通りに表...

はてなブックマーク - [CSS]知っておくと便利!スマホで要素を高さいっぱいに表示したいのに、期待通りに表示されない時の解決方法 | コリス はてなブックマークに追加

Vue.jsとHTMLとCSSで3Dアクアリウムを作ってみた – Crieit

Vue.jsとHTMLとCSSで3Dアクアリウムを作ってみた - Crieit

Vue.jsとHTMLとCSSで3Dアクアリウムを作ってみた - Crieit

ブラウザで見ることができる3Dアクアリウムを作ってみました。 これは基本的にはHTMLとCSSだけで出来ています。canvasも使っていません。Vue.jsも使っていますが、魚を泳がせたり視点を変更するための用途のため、3D描画自体にはあまり関係ありません。 記事の最後に操作できるCodePenを配置してあるので読むのが面倒な...

はてなブックマーク - Vue.jsとHTMLとCSSで3Dアクアリウムを作ってみた - Crieit はてなブックマークに追加

フロントエンドの「想定外」に対応する考え方とTipsいくつか | ダーシマ・ヱンヂニヤリング

フロントエンドの「想定外」に対応する考え方とTipsいくつか | ダーシマ・ヱンヂニヤリング

フロントエンドの「想定外」に対応する考え方とTipsいくつか | ダーシマ・ヱンヂニヤリング

とても個人的な話ですが、ここ最近で自分自身のプライバシー意識の高まりを感じて、ブラウザの設定を見直す機会がありました。見直したのはCookieの設定で、許可したドメインにしかCookieを記憶しないようにしました。設定変更によるある程度の不便は覚悟していました。とはいえ、ま〜せいぜい、初回アクセスの時のモー...

はてなブックマーク - フロントエンドの「想定外」に対応する考え方とTipsいくつか | ダーシマ・ヱンヂニヤリング はてなブックマークに追加

【保存版】プログラミングで何を学べばどんなアプリを作れるのかまとめてみました。|Dai|note

【保存版】プログラミングで何を学べばどんなアプリを作れるのかまとめてみました。|Dai|note

【保存版】プログラミングで何を学べばどんなアプリを作れるのかまとめてみました。|Dai|note

①Webページを創りたい まずはWebページの作り方です。お店のホームページなどを作るためには、以下の言語を学ぶ必要があります。 ・HTML ・CSS ・JavaScript ・jQuery ・BootStrap ①HTML まず、HTMLですが、これはページの文字やリンクなどを指定するマークアップ言語です。例えば、グーグルのホームページをF12ボタンを...

はてなブックマーク - 【保存版】プログラミングで何を学べばどんなアプリを作れるのかまとめてみました。|Dai|note はてなブックマークに追加

死んだCSSを見つける方法

死んだCSSを見つける方法

死んだCSSを見つける方法

使われてないCSSであればツールで見つけられますが、そうではなく、"実質的に"使われてないCSSを見つけるにはどうすればよいでしょうか。 という問題にスマートな解決方法を記載している記事を見つけたので訳してみます。 以下はFinding Dead CSSの戸田奈津子訳です。 Finding Dead CSS 私が今週開いていたパフォーマン...

はてなブックマーク - 死んだCSSを見つける方法 はてなブックマークに追加