これはすごい便利！ HTMLはdiv一つ、あとはCSSをコピペするだけで500種類以上のローダーが簡単に実装できる -CSS LoadersHTMLはdivたった一つ、あとはCSSをコピペするだけで約580種類のローダーを実装できるCSS Loadersを紹介します。 ローダーは、バーやドットのシンプルなアニメーションから他ではあまり見ない面白いものまであり、ローダーを探すときはここをチェックすることをお勧めします。ローダーが不要な人でもCSSアニメーションを楽しめると思います。
CSS見出しデザイン21選。現場ですぐ使える見出しデザインをご紹介 | BUILD Journal
CSSで実装できるシンプルな見出しデザインを21パターンご紹介します。汎用性が高くテイストに縛られず現場ですぐ使えるデザインなのでストックしておくと便利に使えます。あなたの現場でぜひご利用ください。 CSSのみで実装するシンプルな見出しデザイン21パターン蛍光ペンのような線をひいたCSS見出しデザイン HTML<h2 class="heading01">ラインを使ったCSS見出し</h2>CSS.heading01 { display: inline; font-size: 26px; background-image: linear-gradient(rgba(0,0,0,0) 70%, rgb(252,81,133) 70%); }蛍光ペンで線を引いたような見出しデザインです。display: inlineで複数行にも対応させています。 2色を重ねた線とCSS見出しデザイン HTML<
シンプルなHTMLで、モダンなWebサイトをすばやく簡単に作成できるクラスレスの超軽量CSSフレームワーク -Simple.css
その名の通り、シンプルなHTMLで、Webサイトをすばやく簡単に作成できるクラスレスの超軽量（4kB）CSSフレームワークを紹介します。 シンプルなWebページ、ポートフォリオやブログなどをすばやく作成したい時に便利で、レスポンシブにもダークモードにも対応しています。また、CSSリセットとして利用するのもありかもしれません。 Simple.css Simple.css -GitHub Simple.cssとは Simple.cssのデモ Simple.cssの使い方 Simple.cssとは Simple.cssは、セマンティックHTMLをすばやく簡単に見栄え良くするクラスレスのCSSフレームワークです。「クラスレス」とは、CSSまたはHTMLのどこにもCSSのclassがないことを意味します。 MITライセンスで、商用プロジェクトでも無料で利用できます。 classのないプレーンなHTM
パララックスもこれで簡単に！ HTMLやCSSを変更せずにシンプルに実装できるスクリプト -simpleParallax.js
ユーザーのスクロール操作に合わせて視差効果を与えるパララックスのエフェクトをシンプルに実装できる軽量のバニラJavaScriptのライブラリを紹介します。 実装は非常に簡単で、HTMLやCSSを変更せずに、パララックスのさまざまなエフェクトを実装できます。 simpleParallax.js simpleParallax.js -GitHub simpleParallax.jsの特徴 simpleParallax.jsのデモ simpleParallax.jsの使い方 simpleParallax.jsの特徴 simpleParallax.jsは、<img>で実装された画像にパララックスアニメーションを追加する、非常にシンプルで軽量なバニラJavaScriptのライブラリです。
simpleParallax.js - a JavaScript library for parallax effects
orientation-String-see exampleThis is the orientation (or direction) of the parallax effect. Choose up and when scrolling down, the image will translate from the bottom to the top (so the image will translate up). When scrolling up, the image will translate from the top to the bottom. Same logic apply for all others orientations (right, down, left, up left, up right, down left or down right). When
新しいCSSリセットはシンプルで軽量！CSSの新しい機能を使用したCSSリセット -The New CSS Reset
CSSの新しい機能は主要ブラウザでのサポートが進んでいます。例えば、1年くらい前にサポートされはじめたセレクタの詳細度を0にする:where()も、現在では主要ブラウザのすべてでサポートされています。 CSSの新しい機能を使用した、シンプルで軽量なCSSのリセットを紹介します。 :where()や:not()、allプロパティやunset値やrevert値など、見慣れないCSSがあるかもしれませんが、IE11を除くすべてのブラウザでサポートされています。 The New CSS Reset The New CSS Reset -GitHub The New CSS Resetの特徴 The New CSS Resetは何をリセットするのか？ The New CSS Resetの中身 2021年、モダンブラウザに適したCSSリセットのまとめ The New CSS Resetの特徴 この新し
商用利用無料！UIデザインに適した、シンプルで使い勝手がよいSVG完備のアイコン素材 -Iconic
WebサイトやスマホアプリのさまざまなUIデザインに適した、シンプルなデザインのSVGアイコンが無料で利用できるIconicを紹介します。 アロー・ホーム、サーチ・ショッピングカート・バッグ・スター・メールなど、UIデザインでよく使用されるアイコンが揃っており、フォーマットはSVGで利用できます。また、Vue, Reactのコンポーネントとしても利用できます。 Iconic Iconic -GitHub Iconicアイコンの特徴 Iconicアイコンの使い方 Iconicアイコンの種類 Iconicアイコンの特徴 Iconicは24pxのグリッドでデザインされたSVGフォーマットのアイコンです。160種類のアイコンが揃っており、今後もアップデートで増やしていくとのことです。 Iconic アイコンは26のカテゴリに、全160種類。 24pxグリッドに基づくピクセルパーフェクトなデザイン。
最近の実装に合わせたHTMLテンプレート、基本のコードとすべての要素の役割も解説
最近の実装に合わせた、Webページ用のHTMLテンプレートを紹介します。 レスポンシブ用のHTML、ソーシャルメディア用のHTMLをはじめ、高速表示に欠かせないrel="preload"なども含まれています。IEなどの古いブラウザはプログレッシブエンハンスメントで対応しています。 HTMLテンプレートはすべての要素の役割を各行ごとに解説しているので、自分に不必要なものを削除したり加えたりすることもできます。 My current HTML boilerplate by Manuel Matuzović 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに HTMLのテンプレート（最終形） HTMLのテンプレートを1行ずつ解説 ページのタイトルと説明文、外部ファイル ソーシャルメディア用のHTML アイコンとアドレスバー もう
【保存版】CSS Flexboxでレスポンシブ対応のレイアウトを実装するHTMLとCSSのシンプルなコードのまとめ
CSS Flexboxで実装するWebページでよく見かけるレスポンシブ対応のレイアウト、カードレイアウト、ナビゲーションバー、サイドバー、聖杯レイアウトなどのHTMLとCSSのコードを紹介します。 コードは非常にシンプルなので、テンプレートやスニペットとして再利用できます。 Master CSS Flexbox 2021 🔥- Build 5 Responsive Layouts🎖️|| CSS 2021 by Joy Shaheb 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 Flexboxの構造・各プロパティと値 実装の準備 Level 1: シンプルなカードレイアウト Level 2: ナビゲーションバー Level 3: サイドバー Level 4: 少し複雑なカードレイアウト Level 5: Holy Grai
さまざまなタイプのSVGの背景を手軽に作れるWebアプリ・「BGJar」
BGJarはさまざまなタイプのSVGの背景を手軽に作れるWebアプリです。既に用意されている雛型を元に好みの形にカスタマイズしてコードをコピーしたりDL出来る、というもの。 シンプルなものやアニメーションするもの、波のような形状など、どこかで見たことがあるような背景を直感的な操作で作成する事が出来ます。 編集できる要素はサイズ、背景やオブジェクトの色やグラデーションなど。オブジェクトの編集等は雛型によるみたいです。 配布されるコードのライセンスはCC BY 4.0との事なのでクレジット表記すれば商用でも利用可能にはなっています。 BGJar
簡易的なダークモード
Result 簡単なダークモードを少しのCSSとJSで実装する的なやつ 以前はCSSだけでシンプルなLight/Darkモードというものをご紹介しました 前回はCSS変数を使用してライト/ダークの色を管理しました。今回はもう少し手を抜くというか、filter: invertを使って反転させます CSS変数の方が実用的ではありますが、反転で済ませられそうなら楽そう css.inverted { filter: invert(100%); background-color: #333; } .inverted.rotated { filter: invert(100%) hue-rotate(180deg); }背景を黒くして他の要素は反転させます hue-rotateを併用して、反転する事で問題が生じる場合はその箇所をサポート、みたいな jsconst invertToggle = docu
無料で使いやすい！極上の最新フリーアイコン素材40選
この記事では、無料ダウンロードができて高品質なフリーアイコン素材を厳選してご紹介します。デザインコレクションに加えておくと、ウェブサイトやアプリの制作はもちろん、プレゼン資料やスライド作成、ブログ運営など何かと重宝するものばかりです。 無料で使いやすい！極上の最新フリーアイコン素材まとめ Motion Icons SVGアイコンにアニメーションを加えたデジアン素材で、無料版では12種類のモーションアイコンが実際のHTMLサンプルと一緒に同梱されています。 8000+ Essential Icon Pack 一度アプリをインストールしてしまえば、8000を超える商用ライセンス付きのアイコン素材から探すことができ、PhotoshopやIllustrator、Sketchといったデザインアプリに、ドラッグ＆ドロップでアイコンを追加できます。WindowsとMacどちらにも対応。 Pure Sug
最新版！Webページを作成する時のベースになる、最小限の構成で記述されたHTML5のテンプレート
HTML5でWebページを作成する時のベースになる必要最小限の構成で記述されたHTML5のテンプレートを紹介します。 スニペットに登録しておくと、便利ですね。 イラスト: Girls Design Materials HTML5 Boilerplate -GitHub HTML5のテンプレート HTML5のテンプレートの解説 HTML5のテンプレート HTML5 Boilerplateのテンプレートを日本語化しました。 オリジナルライセンスで、商用利用、修正、配布、サブライセンス可です。 <!doctype html> <html class="no-js" lang=""> <head> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <title>タイトル</title> <met
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
OSSでソースコードも公開されているJavaScript製のシンプルで使いやすいフローチャート作成Webアプリ・「Drawflow」