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

水泳中でも心拍が測れて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つの原則 | コリス はてなブックマークに追加

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

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

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

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

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

2019年時点で僕のVSCode(Visual Studio Code)に入ってるプラグインや設定を紹介します – Shibajuku

2019年時点で僕のVSCode(Visual Studio Code)に入ってるプラグインや設定を紹介します - Shibajuku

2019年時点で僕のVSCode(Visual Studio Code)に入ってるプラグインや設定を紹介します - Shibajuku

こんにちは、実は久しぶりの投稿の、どうもしばおです。 さて、僕(フロントエンドよりのWebデザイナー)は普段からメインのテキストエディターにVSCodeを使っているのですが、今日は僕のVSCodeに入っている、プラグインや設定を公開したいと思います。 僕のオンラインサロンでも、VSCodeを結構使ってて、サロンメンバーに...

はてなブックマーク - 2019年時点で僕のVSCode(Visual Studio Code)に入ってるプラグインや設定を紹介します - Shibajuku はてなブックマークに追加

MarkdownをPDFに変換する「md-to-pdf」は痒いところに手が届く素敵ツール | DevelopersIO

MarkdownをPDFに変換する「md-to-pdf」は痒いところに手が届く素敵ツール | DevelopersIO

MarkdownをPDFに変換する「md-to-pdf」は痒いところに手が届く素敵ツール | DevelopersIO

Markdown to PDF Markdownで書きたいけど、PDFで出力したい という機会はエンジニアはよく出くわすと思います。 「Markdown to PDF」といえばGitBook CLIが有名ですが、こちらはメンテナンスがストップされているため推奨されません(環境依存による不具合などが解決されない)。 GitBookほど多機能でなくても良いですが...

はてなブックマーク - MarkdownをPDFに変換する「md-to-pdf」は痒いところに手が届く素敵ツール | DevelopersIO はてなブックマークに追加

CSSで見出し固定+レスポンシブ対応の表を作成 | Webクリエイターボックス

CSSで見出し固定+レスポンシブ対応の表を作成 | Webクリエイターボックス

CSSで見出し固定+レスポンシブ対応の表を作成 | Webクリエイターボックス

2019年10月17日 CSS, HTML5, Webサイト制作 料金表やサービスプランの比較、タイムテーブルなどなど、使う場面が多い割には制限も多く、初心者には少しとっつきにくいと思われがちな表。今回はあると便利な表の見出し固定やレスポンシブ対応の方法を紹介します。 見出しの行を固定する 表の中の行が増えてくると、スクロ...

はてなブックマーク - CSSで見出し固定+レスポンシブ対応の表を作成 | Webクリエイターボックス はてなブックマークに追加

古いCSSリセットからはもう卒業!モダンブラウザに適した新しいCSSリセット -A Modern CSS Reset | コリス

古いCSSリセットからはもう卒業!モダンブラウザに適した新しいCSSリセット -A Modern CSS Reset | コリス

古いCSSリセットからはもう卒業!モダンブラウザに適した新しいCSSリセット -A Modern CSS Reset | コリス

モダンブラウザをターゲットにしたWeb制作では、CSSにおけるブラウザの互換性の問題はIE6の頃に比べるとはるかに少なくなりました。無理なリセットやすべてをリセットする必要は全くありません。 現在のWeb制作に合わせて制作された新しいCSSリセットを紹介します。 CSSの知見やテクニックも満載です! A Modern CSS Res...

はてなブックマーク - 古いCSSリセットからはもう卒業!モダンブラウザに適した新しいCSSリセット -A Modern CSS Reset | コリス はてなブックマークに追加

古いCSSリセットからはもう卒業!モダンブラウザに適した新しいCSSリセット -A Modern CSS Reset | コリス

古いCSSリセットからはもう卒業!モダンブラウザに適した新しいCSSリセット -A Modern CSS Reset | コリス

古いCSSリセットからはもう卒業!モダンブラウザに適した新しいCSSリセット -A Modern CSS Reset | コリス

モダンブラウザをターゲットにしたWeb制作では、CSSにおけるブラウザの互換性の問題はIE6の頃に比べるとはるかに少なくなりました。無理なリセットやすべてをリセットする必要は全くありません。 現在のWeb制作に合わせて制作された新しいCSSリセットを紹介します。 CSSの知見やテクニックも満載です! A Modern CSS Res...

はてなブックマーク - 古いCSSリセットからはもう卒業!モダンブラウザに適した新しいCSSリセット -A Modern CSS Reset | コリス はてなブックマークに追加

エンジニアでも知っておきたいデザインの基礎知識 – Qiita

エンジニアでも知っておきたいデザインの基礎知識 - Qiita

エンジニアでも知っておきたいデザインの基礎知識 - Qiita

→ English 対象読者 ワイヤーフレームだけが渡されてコーディングしなければいいけないようなケースで役立つ知識を紹介します。 以下のような環境にいるエンジニアは読む必要はないと思います。 毎回デザイナーからデザインデータが用意されて、それを忠実に再現すればよい そもそもコーディングはコーダーがやってくれ...

はてなブックマーク - エンジニアでも知っておきたいデザインの基礎知識 - Qiita はてなブックマークに追加

CSSファイルから未使用のスタイルを削除する方法 | コリス

CSSファイルから未使用のスタイルを削除する方法 | コリス

CSSファイルから未使用のスタイルを削除する方法 | コリス

PurgeCSSを使用して、CSSファイルからWebページやアプリで未使用のスタイルを削除する方法を紹介します。 特にCSSフレームワークやライブラリを使用している時は、すべてのスタイルを使うことはないと思うので、劇的な効果があります。 How to Remove Unused CSS 下記は各ポイントを意訳したものです。 ※当ブログでの翻...

はてなブックマーク - CSSファイルから未使用のスタイルを削除する方法 | コリス はてなブックマークに追加

CSSファイルから未使用のスタイルを削除する方法 | コリス

CSSファイルから未使用のスタイルを削除する方法 | コリス

CSSファイルから未使用のスタイルを削除する方法 | コリス

PurgeCSSを使用して、CSSファイルからWebページやアプリで未使用のスタイルを削除する方法を紹介します。 特にCSSフレームワークやライブラリを使用している時は、すべてのスタイルを使うことはないと思うので、劇的な効果があります。 How to Remove Unused CSS 下記は各ポイントを意訳したものです。 ※当ブログでの翻...

はてなブックマーク - CSSファイルから未使用のスタイルを削除する方法 | コリス はてなブックマークに追加

フロントエンドエンジニア御用達の MDN web docs を網羅した – Qiita

フロントエンドエンジニア御用達の MDN web docs を網羅した - Qiita

フロントエンドエンジニア御用達の MDN web docs を網羅した - Qiita

このリストは何? MDN web docs を、あたかも書籍の目次のように整理しなおしたものです。それぞれ MDN web docs の記事へリンクしています。 なぜこれが必要なったかというと、人材市場でフロントエンドエンジニアが少なすぎる現状をどうにかするべく教育体制を整えるところから考え始めたのですが、それならまずは日頃...

はてなブックマーク - フロントエンドエンジニア御用達の MDN web docs を網羅した - Qiita はてなブックマークに追加

【2019年版】バックエンドエンジニアが React でモダンなフロントエンド開発を始めるまで – Feedforce Developer Blog

【2019年版】バックエンドエンジニアが React でモダンなフロントエンド開発を始めるまで - Feedforce Developer Blog

【2019年版】バックエンドエンジニアが React でモダンなフロントエンド開発を始めるまで - Feedforce Developer Blog

id:daido1976 です。入社してからあっという間に1年が経っていました。 直近3ヶ月ほどプライベートでフロントエンド開発の勉強をしていたのですが、ここ数年で CSS の Grid や React の Hooks が新しく導入されたことなどもあり、少し古いコンテンツだと教材として役立たない1 と感じることが多かったので、本記事では私...

はてなブックマーク - 【2019年版】バックエンドエンジニアが React でモダンなフロントエンド開発を始めるまで - Feedforce Developer Blog はてなブックマークに追加

ウェブ制作がすご楽!便利な最新オンラインツール個まとめ – PhotoshopVIP

ウェブ制作がすご楽!便利な最新オンラインツール個まとめ - PhotoshopVIP

ウェブ制作がすご楽!便利な最新オンラインツール個まとめ - PhotoshopVIP

この記事では、日常行っているWebデザインやグラフィックデザインの制作が格段スピードアップする、便利な最新オンラインツールをまとめてご紹介しています。 カテゴリ分けされたこれらのツールやサービスを利用することで、面倒な作業を自動化し、生産性をアップすることができるでしょう。一度使いはじめると「これな...

はてなブックマーク - ウェブ制作がすご楽!便利な最新オンラインツール個まとめ - PhotoshopVIP はてなブックマークに追加