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

必要なのはHTMLだけ、一行加えるだけでスマホ対応のWebページができてしまう超軽量スタイルシート -MVP.css | コリス

必要なのはHTMLだけ、一行加えるだけでスマホ対応のWebページができてしまう超軽量スタイルシート -MVP.css | コリス

必要なのはHTMLだけ、一行加えるだけでスマホ対応のWebページができてしまう超軽量スタイルシート -MVP.css | コリス

用意するのはHTMLだけ、一行加えるだけでスマホ対応のクリーンなデザインのWebページができてしまう超軽量スタイルシートを紹介します。ダークモードにも対応しています。HTMLにclassを加えるなど、CSSの知識は必要ありません。 また、それをベースにして再利用可能なコンポーネント、CSSリセットの拡張版としても利用で...

はてなブックマーク - 必要なのはHTMLだけ、一行加えるだけでスマホ対応のWebページができてしまう超軽量スタイルシート -MVP.css | コリス はてなブックマークに追加

現代ウェブフロントエンド(ウェブアプリケーション)について理解する唯一の方法|erukiti|note

現代ウェブフロントエンド(ウェブアプリケーション)について理解する唯一の方法|erukiti|note

現代ウェブフロントエンド(ウェブアプリケーション)について理解する唯一の方法|erukiti|note

この記事は、ウェブ技術の開発者(Java, PHP, Ruby, Go... 全て含む)のうち、少しでもJavaScriptを触ったことがあるけど、現代ウェブフロントエンドというか、ウェブアプリケーション、たとえばReact, Vue, Angular などが分からない人に向けて、たったひとつの理解方法を提示するものです。 対象読者は、Java, PH(以下...

はてなブックマーク - 現代ウェブフロントエンド(ウェブアプリケーション)について理解する唯一の方法|erukiti|note はてなブックマークに追加

[CSS] button要素のスタイルシート、最新テクニックを徹底解説 | コリス

[CSS] button要素のスタイルシート、最新テクニックを徹底解説 | コリス

[CSS] button要素のスタイルシート、最新テクニックを徹底解説 | コリス

<button></button>は最も使用されている要素の一つです。フォームの送信、モーダルを開く時、データを表示する時など、インタラクションのトリガーとして使用されています。button要素の詳細とすべてのブラウザで機能するようにスタイルを完璧に定義する方法について紹介します。 さらに、よく使用されるボタンのスタイ...

はてなブックマーク - [CSS] button要素のスタイルシート、最新テクニックを徹底解説 | コリス はてなブックマークに追加

[CSS] button要素のスタイルシート、最新テクニックを徹底解説 | コリス

[CSS] button要素のスタイルシート、最新テクニックを徹底解説 | コリス

[CSS] button要素のスタイルシート、最新テクニックを徹底解説 | コリス

<button></button>は最も使用されている要素の一つです。フォームの送信、モーダルを開く時、データを表示する時など、インタラクションのトリガーとして使用されています。button要素の詳細とすべてのブラウザで機能するようにスタイルを完璧に定義する方法について紹介します。 さらに、よく使用されるボタンのスタイ...

はてなブックマーク - [CSS] button要素のスタイルシート、最新テクニックを徹底解説 | コリス はてなブックマークに追加

2020年に最適なfont-familyの書き方 – ICS MEDIA

2020年に最適なfont-familyの書き方 - ICS MEDIA

2020年に最適なfont-familyの書き方 - ICS MEDIA

ウェブサイトのフォントは何を指定すればよいのでしょうか? CSSのfont-familyプロパティーに指定可能なフォントは選択肢が多く、HTMLコーダーなら誰もが一度は迷ったことがあるはずです。 font-familyの組み合わせを紹介している記事は多々あります。しかし、必要のない指定や、考察不足なまま紹介している記事を見か...

はてなブックマーク - 2020年に最適なfont-familyの書き方 - ICS MEDIA はてなブックマークに追加

あなたはPCスマホ使いですね? 上の文字はスマホかPCかによって変わります ..

あなたはPCスマホ使いですね? 上の文字はスマホかPCかによって変わります ..

あなたはPCスマホ使いですね? 上の文字はスマホかPCかによって変わります ..

あなたはPCスマホ使いですね? 上の文字はスマホかPCかによって変わります ※PCの人はウィンドウの横幅を縮めてみると文字が変わるぞ!確かめてみよう!

はてなブックマーク - あなたはPCスマホ使いですね? 上の文字はスマホかPCかによって変わります .. はてなブックマークに追加

他のCSS本とはかなり異なる!現在、主流の実装・設計方法が徹底解説された良書 -CSS設計完全ガイド | コリス

他のCSS本とはかなり異なる!現在、主流の実装・設計方法が徹底解説された良書 -CSS設計完全ガイド | コリス

他のCSS本とはかなり異なる!現在、主流の実装・設計方法が徹底解説された良書 -CSS設計完全ガイド | コリス

私のCSSはこのままでいいのだろうか、他の人はどのように取り組んでいるのか、CSSのスキルアップを考えているWeb制作者・デベロッパーに、ぜひ手に取ってほしい一冊を紹介します。 本書ではCSSのさまざまな設計手法を解説するだけでなく、最適解となるコードに至るまでの思考プロセスも非常に詳しく解説されています。デ...

はてなブックマーク - 他のCSS本とはかなり異なる!現在、主流の実装・設計方法が徹底解説された良書 -CSS設計完全ガイド | コリス はてなブックマークに追加

Google Fontsのファイルサイズを簡単に軽量化できる!日本語フォントにも対応 | コリス

Google Fontsのファイルサイズを簡単に軽量化できる!日本語フォントにも対応 | コリス

Google Fontsのファイルサイズを簡単に軽量化できる!日本語フォントにも対応 | コリス

Google Fontsは英語フォントだけでなく日本語フォントもあり、すでに使用している人、もしくは使用を検討している人も多いと思います。その際に懸念されるのが、フォントファイルのサイズです。 フォントファイルのサイズを劇的に軽減できる機能があります。 パラメーターで使用する文字のみフォントファイルを読み込め...

はてなブックマーク - Google Fontsのファイルサイズを簡単に軽量化できる!日本語フォントにも対応 | コリス はてなブックマークに追加

Google Fontsのファイルサイズを簡単に軽量化できる!日本語フォントにも対応 | コリス

Google Fontsのファイルサイズを簡単に軽量化できる!日本語フォントにも対応 | コリス

Google Fontsのファイルサイズを簡単に軽量化できる!日本語フォントにも対応 | コリス

Google Fontsは英語フォントだけでなく日本語フォントもあり、すでに使用している人、もしくは使用を検討している人も多いと思います。その際に懸念されるのが、フォントファイルのサイズです。 フォントファイルのサイズを劇的に軽減できる機能があります。 パラメーターで使用する文字のみフォントファイルを読み込め...

はてなブックマーク - Google Fontsのファイルサイズを簡単に軽量化できる!日本語フォントにも対応 | コリス はてなブックマークに追加

「動き」のあるWebサイトを支えるCSSアニメーション技術|yui540|note

「動き」のあるWebサイトを支えるCSSアニメーション技術|yui540|note

「動き」のあるWebサイトを支えるCSSアニメーション技術|yui540|note

昨日、PIXIV TECH FESで登壇させていただいたときに発表したスライドの内容になります。 当日、来れなかった方はぜひこちらをご覧ください! そして、当日お越し下さった皆さま本当にありがとうございました! Twitterで「CSSアニメーション」「CSSヤクザ」というワードがたくさん飛び交って、とても嬉しいです。 これか...

はてなブックマーク - 「動き」のあるWebサイトを支えるCSSアニメーション技術|yui540|note はてなブックマークに追加

SVG+CSS AnimationでLive2Dを動かす – はるさめスープ

SVG+CSS AnimationでLive2Dを動かす - はるさめスープ

SVG+CSS AnimationでLive2Dを動かす - はるさめスープ

年末年始の自由研究として、CSSだけでLive2Dを動かすことができないかを試していました。紆余曲折あったものの、なんとか動きそうということが分かったのでひとまず情報共有。 Live2Dとは Live2Dは、2Dのイラストをモーフィング技術を使ってアニメーションさせるソフトウェアです。あのアプリゲームのキャラクターや、あ...

はてなブックマーク - SVG+CSS AnimationでLive2Dを動かす - はるさめスープ はてなブックマークに追加

CSSの便利なプロパティmin-widthとmax-width、min-heightとmax-heightの効果的な使い方のまとめ | コリス

CSSの便利なプロパティmin-widthとmax-width、min-heightとmax-heightの効果的な使い方のまとめ | コリス

CSSの便利なプロパティmin-widthとmax-width、min-heightとmax-heightの効果的な使い方のまとめ | コリス

Webページやスマホアプリのレイアウトをはじめ、画像、ボタン、ナビゲーションなどを親要素に応じてそれらの幅や高さを適したサイズにしたい時がありませんか? そんな時には、min-widthとmax-width、min-heightとmax-heightを効果的に使用すると、非常に便利です。 widthとheightプロパティにおけるminとmaxの効果的な...

はてなブックマーク - CSSの便利なプロパティmin-widthとmax-width、min-heightとmax-heightの効果的な使い方のまとめ | コリス はてなブックマークに追加

水泳中でも心拍が測れて2万円台。水中心拍計搭載GPSスマートウォッチ「Garmin Swim 2」日本版発表

GPS機器メーカーの老舗であるガーミンが、水中心拍計を搭載したスイミング用のGPSスマートウォッチ「Garmin Swim 2」を1月30日に発売します。価格は2万9800円(税抜)です。 Garmin Swim

「Webデザイナーはコーディングできるべきか」という議論に対する私の考え | Stocker.jp / diary

「Webデザイナーはコーディングできるべきか」という議論に対する私の考え | Stocker.jp / diary

「Webデザイナーはコーディングできるべきか」という議論に対する私の考え | Stocker.jp / diary

Webデザイン 「Webデザイナーはコーディングできるべきか」という議論に対する私の考え Wednesday, January 15th, 2020 【平日夜開催】スマートフォン時代のWebデザインスクール 体験レッスン開催!モダンなWebデザイン制作・Adobe XD・Photoshop・UI/UXなど基礎から学べる講座です。 【日曜開催】WordPress でWebサイト...

はてなブックマーク - 「Webデザイナーはコーディングできるべきか」という議論に対する私の考え | Stocker.jp / diary はてなブックマークに追加

font-familyについて本気で考えてみた – Qiita

font-familyについて本気で考えてみた - Qiita

font-familyについて本気で考えてみた - Qiita

『CSS Advent Calendar 2019』最終日。 担当は本日20代最後の日を迎える私です。 18日目(CSSの単位remの正しい使い方)も書いていますのでよろしくおねがいします。 今年はmacOSのアップデートによりヒラギノが動かなくなったり、 来年初頭にはWindows7がサポート終了、Edgeのブラウザエンジン変更など、 エンドユーザ...

はてなブックマーク - font-familyについて本気で考えてみた - Qiita はてなブックマークに追加

font-familyについて本気で考えてみた – Qiita

font-familyについて本気で考えてみた - Qiita

font-familyについて本気で考えてみた - Qiita

『CSS Advent Calendar 2019』最終日。 担当は本日20代最後の日を迎える私です。 18日目(CSSの単位remの正しい使い方)も書いていますのでよろしくおねがいします。 今年はmacOSのアップデートによりヒラギノが動かなくなったり、 来年初頭にはWindows7がサポート終了、Edgeのブラウザエンジン変更など、 エンドユーザ...

はてなブックマーク - font-familyについて本気で考えてみた - Qiita はてなブックマークに追加

CSS Flexboxで配置する時に知っておくと便利!オートマージン(margin: auto;)の仕組みと効果的な使い方 | コリス

CSS Flexboxで配置する時に知っておくと便利!オートマージン(margin: auto;)の仕組みと効果的な使い方 | コリス

CSS Flexboxで配置する時に知っておくと便利!オートマージン(margin: auto;)の仕組みと効果的な使い方 | コリス

Flexboxも、margin: auto;も、CSSでよく使うプロパティです。 このFlexboxとオートマージン(margin: auto;)を組み合わせると、さまざまなレイアウト・配置ができます。例えば、ナビゲーションのアイテムを配置する際に、ロゴだけ左端に、検索を右端に、といった配置もオートマージンが活躍します。 オートマージン(ma...

はてなブックマーク - CSS Flexboxで配置する時に知っておくと便利!オートマージン(margin: auto;)の仕組みと効果的な使い方 | コリス はてなブックマークに追加

よく使われるレイアウトやUIコンポーネント、それだけを実装するためのHTMLとCSSのシンプルなコードのまとめ | コリス

よく使われるレイアウトやUIコンポーネント、それだけを実装するためのHTMLとCSSのシンプルなコードのまとめ | コリス

よく使われるレイアウトやUIコンポーネント、それだけを実装するためのHTMLとCSSのシンプルなコードのまとめ | コリス

Webサイトやスマホアプリでよく使われるレイアウトやUIコンポーネント、それだけを実装するためのHTMLとCSSのコードがまとめられたコレクションを紹介します。 フレームワークなども便利ですが、それだけを実装するためのコードなので、非常にシンプルでカスタマイズも簡単だと思います。 CSS Layout CSS Layout -GitHub...

はてなブックマーク - よく使われるレイアウトやUIコンポーネント、それだけを実装するためのHTMLとCSSのシンプルなコードのまとめ | コリス はてなブックマークに追加

モダンなJSとCSSで作るライブラリ不要の全画面スクロール演出(2019年版) – ICS MEDIA

モダンなJSとCSSで作るライブラリ不要の全画面スクロール演出(2019年版) - ICS MEDIA

モダンなJSとCSSで作るライブラリ不要の全画面スクロール演出(2019年版) - ICS MEDIA

スクロールで全画面がスライドのように切り替わるウェブサイトの表現があります。手軽にこの表現を実装するJSライブラリ、fullPage.jsを使ったことのある方もいるのではないでしょうか? かつては無料で使えたこのライブラリですが、現在はGPLライセンスのプロジェクト以外では使用料がかかります。 その一方、CSSとJav...

はてなブックマーク - モダンなJSとCSSで作るライブラリ不要の全画面スクロール演出(2019年版) - ICS MEDIA はてなブックマークに追加

Webで縦書きなどを実現する「CSS Writing Modes Level 3」、ついにW3Cの「勧告」に - Publickey

Webで縦書きなどを実現する「CSS Writing Modes Level 3」、ついにW3Cの「勧告」に - Publickey

Webで縦書きなどを実現する「CSS Writing Modes Level 3」、ついにW3Cの「勧告」に - Publickey

Webで縦書きなどを実現する「CSS Writing Modes Level 3」、ついにW3Cの「勧告」に HTMLで構造化された文書に対してスタイルを与える「Cascading Style Sheet」(CSS)は「CSS 2」から、directionプロパティでテキストの表示方向を左から右か、右から左かを指定可能でした。 今回勧告になった「CSS Writing Modes Level ...

はてなブックマーク - Webで縦書きなどを実現する「CSS Writing Modes Level 3」、ついにW3Cの「勧告」に - Publickey はてなブックマークに追加

独学の人にオススメ!CSS Flexboxの基礎を一通り学べるチュートリアル | コリス

独学の人にオススメ!CSS Flexboxの基礎を一通り学べるチュートリアル | コリス

独学の人にオススメ!CSS Flexboxの基礎を一通り学べるチュートリアル | コリス

CSS Flexboxの基礎となる考え方や構造、各プロパティの使い方を一通り学べるチュートリアルを紹介します。チュートリアルはステップ形式で、簡単なものから始まるので独学の人、そして初心者にもオススメです! 30日分のチュートリアルですが、1日分は3分くらいなので、正味1,2時間でCSS Flexboxをマスターできると思い...

はてなブックマーク - 独学の人にオススメ!CSS Flexboxの基礎を一通り学べるチュートリアル | コリス はてなブックマークに追加

CSSフレームワークBulmaについて – 一休.com Developers Blog

CSSフレームワークBulmaについて - 一休.com Developers Blog

CSSフレームワークBulmaについて - 一休.com Developers Blog

フロントエンドエンジニアのid:ninjinkunです。この記事は一休.comアドベントカレンダーの1日目の記事です。 一休.comレストランの管理画面リニューアルプロジェクトにおいて、CSSフレームワークのBulmaを導入しました。結論としては、採用して良かったと思っています。 このエントリではBulmaを選定した理由と、採用後...

はてなブックマーク - CSSフレームワークBulmaについて - 一休.com Developers Blog はてなブックマークに追加

CSSを書くのが劇的に楽になる!ユーティリティファーストのCSSフレームワーク「Tailwind CSS」 | コリス

CSSを書くのが劇的に楽になる!ユーティリティファーストのCSSフレームワーク「Tailwind CSS」 | コリス

CSSを書くのが劇的に楽になる!ユーティリティファーストのCSSフレームワーク「Tailwind CSS」 | コリス

日本でも、Tailwind CSSを使用する人が増えてきましたね。 フロントエンドの開発者がTailwind CSSを実際に使い始めたら、CSSを書くのが劇的に楽になった話を紹介します。 How I Stopped to Write CSS by Luca Spezzano 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳...

はてなブックマーク - CSSを書くのが劇的に楽になる!ユーティリティファーストのCSSフレームワーク「Tailwind CSS」 | コリス はてなブックマークに追加

CSSを書くのが劇的に楽になる!ユーティリティファーストのCSSフレームワーク「Tailwind CSS」 | コリス

CSSを書くのが劇的に楽になる!ユーティリティファーストのCSSフレームワーク「Tailwind CSS」 | コリス

CSSを書くのが劇的に楽になる!ユーティリティファーストのCSSフレームワーク「Tailwind CSS」 | コリス

日本でも、Tailwind CSSを使用する人が増えてきましたね。 フロントエンドの開発者がTailwind CSSを実際に使い始めたら、CSSを書くのが劇的に楽になった話を紹介します。 How I Stopped to Write CSS by Luca Spezzano 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳...

はてなブックマーク - CSSを書くのが劇的に楽になる!ユーティリティファーストのCSSフレームワーク「Tailwind CSS」 | コリス はてなブックマークに追加

CSSで実装した斜めのラインがギザギザになってしまうのを回避し、滑らかなラインで実装するテクニック | コリス

CSSで実装した斜めのラインがギザギザになってしまうのを回避し、滑らかなラインで実装するテクニック | コリス

CSSで実装した斜めのラインがギザギザになってしまうのを回避し、滑らかなラインで実装するテクニック | コリス

CSSで斜めのラインを実装する時は、ちょっとした工夫が必要です。 画像やSVGでなく、CSSで実装すると角度やカラーを変更できる利点がありますが、斜めのラインがジャギってギザギザになってしまうことがあります。 CSSグラデーションで実装した斜めのラインがギザギザになってしまうのを回避し、すっきりとした滑らかな...

はてなブックマーク - CSSで実装した斜めのラインがギザギザになってしまうのを回避し、滑らかなラインで実装するテクニック | コリス はてなブックマークに追加

HTMLとCSSも進化している!JavaScriptを使用せずに、HTMLとCSSだけで実装できるUI要素のまとめ | コリス

HTMLとCSSも進化している!JavaScriptを使用せずに、HTMLとCSSだけで実装できるUI要素のまとめ | コリス

HTMLとCSSも進化している!JavaScriptを使用せずに、HTMLとCSSだけで実装できるUI要素のまとめ | コリス

以前まではJavaScriptでないと実装できないと思われていたものも、最近ではHTMLとCSSのみで実装できるものが増えてきました。HTMLとCSSには新しい機能が追加され、そして古いブラウザのサポートも必要なくなり、より簡単に実装できます。 実はJavaScriptを使用せずに、HTMLとCSSで実装できるUI要素を紹介します。 You ca...

はてなブックマーク - HTMLとCSSも進化している!JavaScriptを使用せずに、HTMLとCSSだけで実装できるUI要素のまとめ | コリス はてなブックマークに追加

フロントエンドのコーディング課題6選-このフロントエンドの課題、実装できますか? – Qiita

フロントエンドのコーディング課題6選-このフロントエンドの課題、実装できますか? - Qiita

フロントエンドのコーディング課題6選-このフロントエンドの課題、実装できますか? - Qiita

こちらの記事は、Indrek Lasn 氏により2019年 10月に公開された『 Here Are 6 Front-End Challenges to Code 』の和訳です。 本記事は原著者から許可を得た上で記事を公開しています。 著者Twitter https://twitter.com/lasnindrek フロントエンドの開発はストレスが多く難しい作業ですが、練習すれば技術をマスターする...

はてなブックマーク - フロントエンドのコーディング課題6選-このフロントエンドの課題、実装できますか? - Qiita はてなブックマークに追加

管理画面用のレイアウトやUIコンポーネントがほとんどすべて揃った、商用利用無料のHTMLテンプレート -Stisla | コリス

管理画面用のレイアウトやUIコンポーネントがほとんどすべて揃った、商用利用無料のHTMLテンプレート -Stisla | コリス

管理画面用のレイアウトやUIコンポーネントがほとんどすべて揃った、商用利用無料のHTMLテンプレート -Stisla | コリス

商用のプロジェクトでも無料で利用できる、管理画面・ダッシュボードのレイアウトやUIコンポーネントが揃ったテンプレートを紹介します。 このテンプレートを使用すると、管理画面・ダッシュボードで必要なコンテンツを簡単に作成できます。 Stisla 管理画面・ダッシュボードに特化されたUIコンポーネントがほとんどすべ...

はてなブックマーク - 管理画面用のレイアウトやUIコンポーネントがほとんどすべて揃った、商用利用無料のHTMLテンプレート -Stisla | コリス はてなブックマークに追加

HTMLにclassを加えるだけで、画像のさまざまなエフェクトを簡単に実装できるCSSの超軽量ライブラリ -Izmir | コリス

HTMLにclassを加えるだけで、画像のさまざまなエフェクトを簡単に実装できるCSSの超軽量ライブラリ -Izmir | コリス

HTMLにclassを加えるだけで、画像のさまざまなエフェクトを簡単に実装できるCSSの超軽量ライブラリ -Izmir | コリス

シンプルなHTMLにclassを加えるだけで、画像のさまざまなエフェクトを簡単に実装できるCSSの超軽量ライブラリを紹介します。 デスクトップではホバー時のエフェクトとして、スマホではフォーカス時のエフェクトとして適用されるので、どちらでも楽しめます。 Izmir Izmir -GitHub Izmirの特徴 Izmirのデモ Izmirの使い方...

はてなブックマーク - HTMLにclassを加えるだけで、画像のさまざまなエフェクトを簡単に実装できるCSSの超軽量ライブラリ -Izmir | コリス はてなブックマークに追加

CSSは奥が深い!セレクタの書き方・命名や管理を改善する5つの原則 | コリス

CSSは奥が深い!セレクタの書き方・命名や管理を改善する5つの原則 | コリス

CSSは奥が深い!セレクタの書き方・命名や管理を改善する5つの原則 | コリス

CSSは簡単なコードで書けます。しかし、プロジェクトの規模が大きくなるにつれ、コードが重複したり、未使用のコードが増えたり、!importantでの上書きが増えたり、読みにくいコードになります。 CSSのセレクタの書き方・命名や管理を改善する、シンプルで非常に効果的な5つの原則を紹介します。 Improve your CSS with ...

はてなブックマーク - CSSは奥が深い!セレクタの書き方・命名や管理を改善する5つの原則 | コリス はてなブックマークに追加