よりよいCSSを書くための、CSS / Sass (SCSS) 30のルールとその理由
Webエンジニアを始めて丸2年が経ちました。 複数プロジェクトを進める中で、CSSコーディングを行うときの「こうしておくと便利」「このほうが管理しやすい」といった知見が溜まってきたのでまとめます。 はじめに 長くなってしまった細かい説明はところどころ折りたたんでいます。概要だけで理解できたら飛ばしていただき、詳しい話が気になったら開いて読んでください。 これらは「自分がよく取り入れている手法」であって、必ずしもどのプロジェクトにも当てはまるものではないと思います。 各項目について、自分がその判断に至った 「理由」 を説明していますので、 理由を読んだ上で自分のプロジェクトに取り入れるか判断いただくと良いと思います。 この記事は、すでにCSSコーディングをしていてアイデアがほしい人に向けた記事で、 CSSをこれから学び始めるような 初学者向けではない ことご了承ください。 一般的と思われるキ
フロントエンドの刺激的なコーディング課題6選 - Qiita
素晴らしい課題でコーディング意欲を高めよう。 Photo by Ferenc Almasi on Unsplash. はじめに コーディングを上達させる最も効率的な方法の1つは、できるだけたくさん作ることです。 コーディング課題は、ものを作ることで自分のスキルアップする楽しい方法です。この記事のリストを参考に、何か選んで作り始めましょう！ 急いでいる時や、コーディングのアイディアを枯渇させたくない時は、100以上の課題をここにまとめてあります。 課題には好きなツールを使えるので、練習したいものがあれば、気軽に挑戦してみてください。 1. タスクマネージャUI なんて美しいアプリケーションでしょう！クリーンでモダン、インテリジェントなUIです。 Aysenur Turkによる「CSSグリッドを使ったタスクマネージャーUI」 学べること HTMLでCSSを使用する方法。新しいCSSグリッドを試
Say Hello To CSS Container Queries
I haven’t been more excited for a CSS feature like I’m now in the past six years I spent as a front-end developer. The prototype of container queries is now available behind a flag in Chrome Canary. Thanks to efforts from smart people like Miriam Suzanne and other folks. I remember seeing a lot of jokes about the support for CSS container queries, but they are finally there. In this article, I wil
Googleのエンジニアが「ウェブサイトの画像読み込み」を最適化する方法を解説
ウェブサイトを閲覧していると「画像の読み込みが遅い」という場面に遭遇したことがある人は多いはず。画像はウェブサイトのパフォーマンスを左右する要素のひとつであり、ウェブ開発において取り扱いに注意すべきものです。そんな画像をウェブサイトで扱う際の最適化方法について、GoogleのエンジニアであるMalte Ubl氏が解説しています。 Maximally optimizing image loading for the web in 2021 https://www.industrialempathy.com/posts/image-optimizations/ ◆img要素にwidthとheightを指定する アスペクト比を維持したまま画像サイズを変更するには、「style」要素に「max-width: 100%」や「height: auto」と指定しておく手法がよく用いられます。この手法に加
スクロール位置でナビのカレント状態が変化するJS【ページ内リンク】 | hirakublog ヒラクブログ
縦長のページでよくスクロールすると位置でナビゲーションの状態が変化するサイトをみたことがありませんか？ 状態としてはページの現在地を知らせるためのUIが多いですね。 この記事ではそのJSの作り方をご紹介します！ デモ まずはデモページを用意しましたので御覧ください。 デモページ：/demo/page-position-nav 作り方（実装） それではスクロール位置でナビの状態が変化するJSの紹介です。 スクロール用ライブラリ「ScrollMagic」を読み込み 今回のJSにはScrollMagicというライブラリを使用します。 僕の記事ではよく登場するライブラリです。 個人的にはスクロール関連の処理はこれがあればある程度実装できてしまうと思っています。 ScrollMagic公式 以下、読み込み方法です。 CDN(scriptタグ)の場合 <script src="//cdnjs.clou
CSSを最適化してページの読み込み時間を高速化する方法
CSSを最適化して、ページの読み込み時間を高速化する方法を紹介します。 シンプルなCSSのファイルをはじめ、大規模プロジェクトで使用されるCSSまで、すべてのCSSに効果があるテクニックです。 Optimizing CSS for faster page loads by Tomas Pustelnik 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 読み込みに時間がかかるのはなぜか？ スタイルシートのファイルサイズを制限する クリティカルCSSを使用する 遅延読み込みのスタイルシート スタイルシートにコード分割を使用する まとめ はじめに 先日、私は自分のWebサイトの読み込み時間を改善することにしました。すでにかなり高速にロードされていましたが、まだ改善の余地があり、CSSの読み込みがその原因の1つであることが分か
jQuery『iziModal』で自由度の高いモーダルウインドウを実装。設定方法とオプション解説 | uzurea.net
SNS X Facebook Ｂ! はてブ Pocket 当記事の内容および記事中のリンクには、広告目的や当サイトが収益を得るためのものが含まれており、これらの収益によってuzurea.netは運営されています。 webサイトでトリガーとなるボタンなどをクリックするとウィンドウが浮かび上がる『モーダル ウィンドウ (Modal window)』機能。 年齢制限やシステムのアラート、用語解説、外部サイトの動画表示や画像読込など、さまざまなシーンに利用できるこのモーダルウィンドウですが、設定の簡単さとオプションの充実度、さらにお手軽に格好良いアニメーションが実装できる点からお勧めしたいのが今回解説するjQueryプラグイン『iziModal』※です。 ※おそらく『イージー・モーダル』と読むのだと思います。 今回はこの設置手順とサンプルを交えた使い方、そして各種オプションの詳細を動作デモを交えて
ハンバーガーボタン 何で作ってる？僕なりの作り方を解説してみる。 - Shibajuku
もう年末ですね。 去年の今頃は風邪で鼻水だらだらの記憶がありますが、皆さんは如何お過ごしですか？ どうも、しばおです。 さて、いきなりですが、皆さん ハンバーガーボタン ってどうやって作ってます？ ハンバーガーボタン の作り方をググったりすると、空っぽの span タグ 3個で作ってたり、div タグ や チェックボックスで作ってたりするのをよく見かけます。 でもね。僕的には、button 要素がベストだと思っているんです。 そこで今回は、なぜハンバーガーボタンを button 要素で作った方がいいのかや、僕なりの作り方をできる限り詳しく解説をしてみたいと思います。 ちなみにこの記事は、ある程度、HTMLやCSS、JavaScriptを使った基本的なコーディングを理解している人向けになりますので、CSSって何？って方は先に、基本的なコーディングを学習しておいて下さい。 ハンバーガーボタン
CSSを書くのが劇的に楽になる！ユーティリティファーストのCSSフレームワーク「Tailwind CSS」
日本でも、Tailwind CSSを使用する人が増えてきましたね。 フロントエンドの開発者がTailwind CSSを実際に使い始めたら、CSSを書くのが劇的に楽になった話を紹介します。 How I Stopped to Write CSS by Luca Spezzano 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに Tailwind CSSとは カードコンポーネントで実装の比較 BootstrapとTailwind CSSの比較 Bootstrapがそんなに恋しいですか？ BootstrapとTailwind CSSのどちらを使えばよいか？ CSSにかかる時間はかなり少なくなりました はじめに 私はCSSアーキテクチャにフォーカスしたフロントエンド開発者として、コードを書くために最高の方法を使いたいと思っています
SVGでやることのまとめ。
SVGは、Webサイトの中では、アイコンやロゴやシンプルなイラストに使われている、拡大してもずっと綺麗な画像ファイルです。画像フォーマットでありながら、XMLに基づくマークアップ言語でもあるので、テキストエディタで編集できてしまえるのも魅力。しかもずっと綺麗なんです。 そんなSVGファイルを作るときに僕がよくやることをちょこちょこまとめてゆきます:)。 書き出しはイラレから XMLに基づくマークアップ言語とはいえ、複雑な図形やイラストは、人力では到底マークアップできません…X‹。 図形やイラストはAdobe Illustrator（以下、イラレ）で制作して、そのままイラレから、SVGファイルとして書き出すことが常です。 ここでは、このサイトの左上にいるパンちゃんアイコンを書き出してみます:)。 イラレのデータを用意 まずは何はなくともaiデータを用意しなくちゃいけません。 「新規...（⌘
CSS Circles
I’m Cloud Four’s resident expert on circles. I didn’t plan to be. A while back, we worked on a project that involved a lot of circles… circular containers, circular thumbnails, circular buttons. Before I knew it, I became the guy to talk to if you were having trouble with circles and CSS. But I’ll let you in on a secret: There’s not a lot to know. By the end of this article, I have a feeling you’l
Conversational Form – Turn your content into conversations – by SPACE10
Conversational Form is an open-source tool from SPACE10 that enables people to turn information into conversations—be it report insights, application flows or something completely different altogether. Try Conversational Form to jumpstart a conversation and make your content more engaging today. Documentation Documentation
React Staticを使うとシンプルに静的サイトを作れるので良い - Qiita
前置き 最近はReactやらVueやらを日々触っている人です。 ここらでひとつ個人的な技術ブログやらポートフォリオやらを作ってみようかと思いひと調べしたところ、なんだかSEOとかパフォーマンスとかを考慮すると一周回って静的サイトが今イケてるんじゃないかと思いまして。 というのもコンテンツ内容とかを考えるとブログにSSRだPWAだというのはややファットというか、オーバーエンジニアリング感がありまして、あと正直色々考えるのがめんどくさいのでそのへんいい感じにミニマムにできてくれ〜〜というヨコシマな思いもあり。 で、JSベースの静的サイトジェネレーターとしてはNuxt.jsだったりNext.jsだったりGatsbyだったりと色々と選択肢があるわけですが、今回はそれらよりも後発のReact Staticが一番そのへんの省エネメンタリティにフィットしそうだったので使ってみました。本音をいうとミーハー
【必見のテクニック】厳選20例でハンバーガーメニューのトレンドを紐解く
ハンバーガーメニュー(※)はここ数カ月で認知度が急上昇し、現在Webサイトとモバイルアプリの双方において当たり前のように使用されています。このメニューの役割は、あなたを直観的な操作でそのWebサイトやアプリ内をナビゲートすることです。ハンバーガーメニューは、今ではよく馴染みのある分かりやすいUIアクションボタンの一つとなりました。見慣れた3本バー（ハンバーガーに見えることが名前の由来です）のデザインで、比率はスタイルに合わせて変更可能です。 一般的にハンバーガーメニューはUI内の占有スペースも少なく、クリックを誘発するトリガーとされます。フルメニューのナビゲーションが表示されます。それらは全体的なデザインをより良くする効果が見込まれる、各種アニメーションを取り入れることも可能です。 今回は、美しいハンバーガーメニューの厳選デザインを20例引用しながら、効果的な利用を叶えるための重要ヒントや
iframeでもHTMLでも対応できる超軽量で非依存のLightboxスクリプト
Result こういうベーシックなもの最近は全く見かけなくなりましたけど・・案件になると割と要望は頂くんですよね。というわけで、重めなライブラリを読み込みたくない、でもLightboxでその場に何か表示したい、みたいな用途に便利そうだったのでメモ。 2kb以下でバニラ、且つiframeだろうがHTMLだろうが画像だどうが何でも対応できる、みたいなの。軽量にするためエフェクトも加えられていないので必要なら加えてください javascript4年前から更新されてないので書き方がちょっと古めです。使う時は直して使うと良いんじゃないでしょうか /*|--uglipop.js--| |--(A Minimalistic Pure JavaScript Modal )--| |--Author : argunner (gunnerar7@gmail.com)(http://github.com/arg
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
nana on Twitter: "🤩Just published📜 CSS selectors cheatsheet & 🕹game. Feel free to print it out and stick it on the wall 🎑. Thanks,… https://t.co/54M1hz2LLp"
Browser Default Styles
GitHub - yunusga/postcss-sort-media-queries: PostCSS plugin for sorting and combining CSS media queries with mobile-first / desktop-first methodologies.
GitHub - alexfoxy/lax.js: Simple & lightweight (<4kb gzipped) vanilla JavaScript library to create smooth & beautiful animations when you scroll.
斜めがかったおしゃれなスライドショー実装「Crossroads Slideshow」:phpspot開発日誌