GatsbyでScssファイルを作成して読み込む方法 - QiitaGatsbyでSCSSを書いたり、Bootstrap4のような外部ファイルを読み込む方法。 GatsbyでSCSSを読み込むには Gatsbyの設定 まずは必要なモジュールをインストール。
React: React Bootstrapでタブのカラーを変える ー useState()とuseEffect()を使って - Qiita
React: React Bootstrapでタブのカラーを変える ー useState()とuseEffect()を使ってJavaScriptReactreact-bootstrapECMAScript2015 React Bootstrapは、Bootstrapのスタイルが適用されたコンポーネントをReactアプリケーションに組み込めるライブラリです。この3月24日に正規バージョンv1.0.0がリリースされました。Bootstrapのみでは<div>などにやたらとクラスを詰め込んだDOM要素があふれます。それに対して、Reactのコンポーネントですっきりと組み立てられるのが利点です。 Bootstrap「Jumbotron」のコード例 <div class="collapse navbar-collapse" id="navbarsExampleDefault"> <ul class=
脱・Atomic Design - HTML+CSSコーディングの粒度分類法（HTML Parts） - Qiita
はじめに HTML+CSSコーディング専用の粒度分類を紹介します。 この仕組みは、デザインやワイヤーフレームなどの視覚情報を分解することに焦点をあて、分解した対象を部品化する流れも併せてガイド化した汎用手法です。 世の中には、コーポレートサイト / ポータルサイト / サービスサイト / システム管理画面 / ブログサイト… といった様々な種別のサイト、Webページがありますが、これらの「完成予想図（視覚情報）」を同じ方法で分解して、コーディング用の部品にできます。 粒度と言えばAtomic Designが有名ですが、この「HTML Parts」も粒度そのものの考え方についてはAtomic Designの踏襲です。その上で「思考の入り方・捉え方」や「名称と定義」をコーディング側に寄せることで、CSS設計やコーディング業務を標準化しやすくしています。 ※この記事は標準化ノウハウ公開の一環とし
HTML5/CSS3モダンコーディング フロントエンドエンジニアが教える3つの本格レイアウト スタンダード・グリッド・シングルページレイアウトの作り方 | 翔泳社
フロントエンドエンジニアから学ぶ制作現場の実践的なテクニック！ 本書は、HTML5/CSS3を使ってモダンなサイトを制作するためのコーディングテクニックをハンズオン形式で学ぶ書籍です。 現在主流なWebページのデザインスタイル、「スタンダードレイアウト」「グリッドレイアウト」「シングルページレイアウト」を適用した3つのサイトを作りながら、各スタイルの特徴や使い分け、コーディングテクニックを学びます。 実際のWeb 制作の現場と同様に、サイトのデザインを基にして骨格を見極め、枠組みから中身までひと通りコーディングするというフローをなぞることで、HTML5/CSS3の実用的なコーディングスキルやテクニックを無理なく身につけることができます。 3つのサイトを作成することで、「本格的なレイアウトのサイトを作れた」「こういったレイアウトの場合こうコーディングすればいいという具体的なテクニックがわかっ
CSS Flexboxで、Webページによく使用されるUIコンポーネントを実装するテクニックのまとめ
CSS Flexboxを使用してWebページによく使用されるUIコンポーネント、ヘッダでロゴを左端にナビゲーションを右端に、固定幅のサイドバーと流動幅のメイン、フォームで入力欄とボタンの高さを合わせる、同じHTMLで異なるレイアウトのカードを実装するテクニックを紹介します。 CSS Flexbox: 5 Real World Use Cases by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに Flexboxでヘッダを実装する方法 Flexboxでサイドバーとメインを実装する方法 Flexboxで「Top Sellers」のグリッドを実装する方法 Flexboxでカードを実装する方法 Flexboxで検索フォームを実装する方法 はじめに FlexboxはCSSの中でも最も優れた機能の1つ
CSS・SVGとVue.jsでのアニメーション作成入門 - ライブラリに頼らない表現力を身に付けよう - ICS MEDIA
※ CSS Animationに関してはWeb Animation APIを使うことでより簡単にJavaScriptからアニメーションを構築・制御できるようになります。2020年2月時点ではブラウザの実装が不十分でPolyfillを要するため、この記事では対象外としています。 専用ライブラリを使わずにアニメーションを作ろう 各ライブラリは特別な魔法を使っているわけではありません。 原理的にはCSS・SVG・WebGLといった各要素技術をしっかりと習得すれば、専用のライブラリと同等のことができるばかりか、より高い自由度を手に入れながら軽量化を実現できる可能性もあります。 また、専用のライブラリを利用する場合にも、基礎となる原理や各技術の得意不得意を知っていることは大きな武器となるでしょう。 Vue.jsを使ってCSSやSVGのアニメーションを書く とは言え、これらのアニメーションを土台の技術
Atomic Designの考え方と利点・欠点 – wkr.
Atomic Design はデザインシステムを作る方法論となります。 デザインシステムというのはスタイルガイドやブランドのガイドラインなどを指すようです。 日本だとAbemaTV（アベマ TV）で使われています。 （Atomic Design を実案件に導入 - UI コンポーネントの粒度を明確化した結果と副産物 | ygoto3.comより） Atomic Design は今までのページ単位と違いコンポーネント単位でデザインカンプを作る考え方です。 作ったコンポーネント同士の組み合わせでページを作ります。 Atomic Design はコンポーネントの単位を 5 つに分けています。 その 5 つの単位は Atoms（原子）・Molecules（分子）・Organisms（有機体）・Templates（テンプレート）・Pages（ページ）です。 各コンポーネントの詳細は次のとおりです。
14年間人気イベントであり続けるCSS Niteの妥協なきクオリティ
グラフィックデザインやウェブ制作の第一線で活躍を続けながら、年間120回以上の講演で全国を飛び回り、数多くの著書も持つ鷹野さん。2005年から主宰するウェブ制作者向けのイベント「CSS Nite」について、お話を聞きました。 始まりはアップルストア銀座 関連イベントも含めて今までに600回以上開催され、のべ7万人以上が参加したCSS Nite。その初回は、まだiPhoneが世に出ておらず、アップルの人気が今ほどではない2005年、アップルストア銀座3Fのシアターで実施されました。おもしろいイベントを開催して人に来てもらいたいと考えたアップルストアから声がかかった鷹野さんが考えたのは、当時大きな変革期を迎えていたCSSの勉強会。自分自身が話を聞いてみたい人を呼ぶという全3回のイベントでした。初回から多くの人が集まり、イベントの参加者同士が会社を超えてつながりを作れる勉強会が、とてもいい仕組み
CSSの治安を取り戻す – 最初の30分
Gaji-Labo では稼働中のウェブサービスやウェブアプリケーションの CSS の改善するお仕事をいただくことがちょいちょいあります。 その際「CSSのリファクタリングなんて請けてくれる会社聞いたことない」というような趣旨のお話をぽろっといただきます。（実際にはほかにもやってる会社さん沢山あると思いますが、たしかにあまり聞かないですね） 今回は初めて入るプロジェクトで CSS の改善をする際、最初に CSS のどこを見るかまとめてみました。 CSS の得意な方が参加していないチーム向けの軽い内容です。ここに上げているような箇所に思い当たりがある場合、少しずつ CSS の実装にストレスを感じはじめているかもしれません。 真っ先に見極めることプロジェクトに参加して CSS が見られるようになり、手元の開発環境も無事整ったとき、僕が最初に気にする点です。 CSS はこうなってると大変というポイ
ブラウザーと画像のEXIFのお話 - Pastalablog in はてな
追記 (2020/02/17) 各ブラウザが足並みを揃える形でCSSのimage-orientation属性の初期値が from-imageになりそうです。以下各ブラウザの対応状況です。 Chrome: 158753 - chromium - An open-source project to help move the web forward. - Monorail 3月にリリース予定のChromeのバージョン81以降で有効になる予定です Webkit: 89052 – Implement css3-images image-orientation r254187で入って、Safari Technology Preview 99に含まれています Firefox: 1607667 - [css-images] Consider changing initial value of 'imag
SPAの知識ゼロの状態から、React＋Reduxの開発環境構築までにやったこと - Qiita
Webアプリケーションを開発する際に、「今ならSPA（Single Page Application）っしょ」となり、フレームワークの選定からやらせてもらう機会があったので、そのときにやったことを共有します。 前提 本記事作成時の筆者のスキル Webアプリケーションは作ったことがあるが、言語はJava SPA is 何？ Javascriptはかじった程度の知識 フレームワークの選定 Googleトレンドや、実績からSPAのフレームワークを以下に絞りました。 React AngularJS Vue.js その時人気だったReactにしておけばいいだろと、Reactにしました。 ※近年、Vue.jsが勢力を伸ばしてきているらしいです。 React + α Reactは様々なライブラリと組み合わせるのが普通のようです。 npm installでどんどんライブラリを追加していくことになりますが、
1歩踏み込んでみる！ CSSグラデーションのマニアックな世界 - ICS MEDIA
CSSでグラデーションがかけられるようになって久しいですが、ただ2色をつないでいるだけの人も多いのではないでしょうか？ あるいはジェネレーターでコピペして終わりにしてはいないでしょうか？ 実は、値を細く設定することで、グラデーションに留まらない、より豊かな表現を実現できます。工夫すればこんな表現もCSSのみで行えます。 後半の応用例の実装は手入力のCSSでは困難な部分もあるので、SCSSを使って記述しています。SCSSを使うとCSSだけでは難しい処理もスムーズに行え、mixin機能を使えば、面倒な入力手間も省けるので便利です。記事内で紹介しているグラデーションの生成mixinも用意しました。 デモを別ウインドウで再生する 使われているmixinを確認する CSSグラデーションの種類 CSSグラデーションは色を扱うのでbackground-colorプロパティを使いたくなりますが、backg
Webフロントエンドエンジニアにやさしいデザインファイルの作り方 - Qiita
Sketch - The digital design toolkit 画像はSketch最高っていう顔です。 HTMLやCSSを書くWebフロントエンドエンジニアにとって、Webデザイナーが用意した理想像を現実に落とし込むことは1つの使命であり、費用対効果への葛藤に揺れる中で「技術的に難しいから」という理由でデザインを却下したくないのは誰しも同じだと思います。一方で、技術的に難しくなくとも、デザインファイルの作り方次第ではエンジニアの実装効率も多少なりとも変わってきます。そこで、僕のデザイナー及びエンジニアとしての経験則から、HTML/CSSで実装しやすい（≒Webフロントエンドエンジニアにやさしい）デザインファイルの作り方を、Sketchでの用例も挙げつつまとめてみます。近年はFigmaが注目されつつありますが、基本的な話は共通すると思います。 本来ならばデザイナーにこそ読んでいただき
Apple風のかっこよくて美しいデザインの背景49種類を簡単に実装できるスタイルシート -HUE.css | コリス
文字や画像をぽんっと配置するだけで、そのコンテンツが映えるApple風の美しいグラデーションの背景49種類をまとめたスタイルシートを紹介します。 コピペで簡単に利用できるので、CSSのスニペットに登録しておくと便利ですね。 HUE.css HUE.css -GitHub HUE.cssを使うと、簡単に美しい背景を作りだすことができます。 Appleのプレゼンテーションスタイルで、Hueを背景に使用したものです。 画像: Free Promo Backdrops and Gradients HUE.cssは上記のHueの背景画像にインスパイアされたもので、これらの美しいグラデーションの背景がCSSで簡単に利用できます。 元の画像は上記ページの下部から、.sketch, .png形式でダウンロードできます。 HUE.cssの使い方 使い方は、簡単です。 「hue.css」をダウンロードし、外部
[CSS]Web制作者が知っておきたい、Webフォントを快適に表示するCSSの新しいプロパティ「font-display」
Webフォントを使用しているサイトやブログが増えてきました。そして、近日アップデートされるChrome 60では、Webフォントの使い勝手を向上する「font-display」プロパティがいよいよ正式に実装される予定です（参考: Chromium）。 追記: さきほどChrome 60がリリースされました。 Webフォントを適用したテキストが読み込み時に一瞬表示されない現象があり、今まではJavaScriptで対応していた人、仕様だとあきらめていた人は、このfont-displayを積極的に取り入れるべきだと思います。 font-display for the Masses 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 ブラウザでフォントが読み込まれる仕組み font-displayプロパティとは ほとんどの場合、swapを使
![[CSS]Web制作者が知っておきたい、Webフォントを快適に表示するCSSの新しいプロパティ「font-display」](https://cdn-ak-scissors.b.st-hatena.com/image/square/a833243d7f7fa2de140f06d3243344bf1713f818/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201703%2F2017072510.png)
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
あらゆる画面サイズに対応できるよう設計されたモバイルファーストなscssフレームワーク・「Honeycomb」 - かちびと.net
HTML5/CSS3のニュースやTIPSなどのまとめ (2020年2月24日)
「動き」のあるWebサイトを支えるCSSアニメーション技術｜yui540
コンポーネントベースのアプリケーションのためのCSSアーキテクチャ
HTML5/CSS3のニュースやTIPSなどのまとめ (2020年2月16日)