[B! html] [6ページ] colissのブックマーク

HTMLとCSSのファイルを解析し、未使用のCSSをお掃除してくれる便利なツール -DropCSS

CSSファイルを軽量化するには、最適化・軽量化などの便利ツールがありますが、未使用のCSSを掃除することも重要です。HTMLとCSSのファイルを解析し、未使用のCSS（CSS4までサポート）を掃除してくれるツールを紹介します。 DropCSS -GitHub DropCSSの特徴 DropCSSの使い方 DropCSSのパフォーマンス DropCSSの特徴 DropCSSは未使用のCSSを掃除してくれる、わずか60行のスクリプトです。 HTMLとCSSを入力として受け取り、使用されたCSSのみを出力として返します。対象となるセレクタはcss-selectのおかげで、実質的に考えられるすべてのセレクタの削除が達成されます。参考: サポートされているセレクタ CSSTreeを使用すると、特別な処理を行わなくても、メディアクエリを他のすべてのブロックと同じように透過的に処理および削除できます

coliss 2019/03/28

HTMLとCSSのファイルを解析し、未使用のCSS（セレクタもサポート）を掃除してくれるツール

html
css

リンク

HTMLとCSSを真剣に学びたい人にお勧め！Web制作の実務で使える知識とテクニックをしっかり学べる解説書

Web制作の現場で使える知識がしっかりと身につくHTMLとCSSの解説書を紹介します。 HTMLとCSSは仕様に基づいた詳しい解説で、実装ではデザインにプラスアルファの効果を与える知識とテクニックをしっかり学べる一冊です。正しい技術をしっかり身につけたい人に特にお勧めします。意味のないおしゃれな画像を使用したり、文章を表示しよう、リンクにしよう、のような薄っぺらい解説書ではありません。本書は、HTMLとCSSで次のステップに進みたい人、本格的な企業サイトを実装したい人、現場でワンランク上のアウトプットを目指したい人に向けた解説書です。

coliss 2019/03/22

HTMLとCSSの正しい技術をしっかり身につけたい人にお勧めです。

html
css

リンク

本当に簡単にできて驚いた！面倒な設定は一切不要、秒速でWeb開発用のサーバーが構築できる -Zero Server

Node.js、React、TypeScriptをはじめ、HTML、CSS、Sass、Markdownなどが利用できるWeb開発用のサーバーが秒速で簡単に構築できるZero Serverを紹介します。必要な依存関係は自動インストールされ、ReactやSassは置くだけでコンパイル、マークダウンも設定は一切不要です。サーバーを構築する時間が無い人、設定に明るくない人でもすぐに利用できます。 Zero Server Zero Server -GitHub Zero Serverの特徴 Zero Serverのインストール Zero Serverの使い方 Zero Serverの特徴 Zeroは現代のWeb開発をシンプルにするためのNode.jsフレームワークです。パッケージマネージャーやルーティングを気にせずにアプリケーションを構築できます。 Node.js、React、HTML、MDX、静

coliss 2019/03/13

Node.js、React、TypeScript、HTML、CSS、Sass、Markdownなどに対応。Pythonは近日対応予定。

リンク

ログインフォームは変わった方法で実装しないで！

Webサイトのログインに使用するパスワードをどのように管理していますか？私は1Passwordで管理していますが、他にもChromeのパスワードマネージャーやmacOSのキーチェーンなどを使用している人も多いと思います。そんなパスワードマネージャーとうまく連動するログインフォームを実装するためのポイントをまとめた記事を紹介します。 don’t get clever with login forms by Brad Frost 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。はじめにログインフォームの避けるべき例ログインフォームの適した例はじめに日増しに、私はログインフォームでイライラすることに気がつきました。1Password（私が使用している）やChromeのパスワードマネージャー（これも私が使用している）のような

coliss 2019/02/26

パスワードマネージャーとうまく連動するログインフォームを実装するためのポイント

リンク

ハンバーガーメニューを簡単に実装できる、プレーンなHTML/CSSとReactコンポーネント -Animated Burgers

プレーンなHTMLとCSS、またはReactコンポーネントとして利用可能なハンバーガーメニューを紹介します。コピペで簡単に利用でき、サイズやカラーのカスタマイズも簡単です。ハンバーガーメニューのアニメーションもさまざまなものが揃っています。

coliss 2019/02/06

プレーンなHTMLとCSS、またはReactコンポーネントとして利用可能なハンバーガーメニュー

リンク

CSSで実装されたローディング・スピナーのアニメーションのまとめ | コリス

シンプルなローディングのアニメーションから、複雑で楽しいローディングのアニメーションまで、CSSで実装されたローディングアニメーションを紹介します。ほとんどが外部ファイルとclassを加えるだけの簡単実装で、いざという時用にブックマークしておきたいものばかりです。下記の回転しながら整列するアニメーションもCSSのみで実装されています。

coliss 2019/01/17

CSSで実装されたローディングアニメーションのまとめ

リンク

2018年総まとめ: Pocketにたくさん登録されたWeb制作に役立つ記事のまとめ

2018年、当サイトで公開した記事の中からPocketにたくさん登録された記事やツイートされた記事をジャンル別にまとめました。今年を振り返りつつ、来年のWeb制作にも役立つオススメです。

coliss 2018/12/26

2018年、コリスで公開したWeb制作に役立つ記事の総まとめ

リンク

head内に記述するソーシャルメディア・検索エンジン用のmetaタグを簡単に生成できる無料ツール -Meta Tags | コリス

head内のmetaに記述するTwitterカードやFacebookのOGPなどのソーシャルメディア用のコード、Googleなどの検索エンジン用のコードを簡単に作成できる無料のオンラインツールを紹介します。公式のデバッガーですぐに確認もできるので、非常に便利です。 Meta Tags Meta Tagsでは、下記のソーシャルメディア・検索エンジン用のmetaタグがサポートされています。 Google Facebook Twitter Linkedin Pinterest Slack 使い方は簡単で、登録など面倒なことは一切不要、無料で利用できます。まずは、サイトにアクセスします。

coliss 2018/11/12

TwitterカードやFacebookのOGPなどのソーシャルメディア用のmetaタグを簡単生成。

リンク

Web制作者が備えておきたい最新版チートシートのまとめ | コリス

あれはどうだったかな？という時にすぐ分かる、Web制作の実装や勉強に役立つチートシートを紹介します。 iPhone 8やXsのスクリーンサイズはいくつだったかな？ CSS FlexboxやGridの挙動がまとめて知りたい、CSSのプロパティの値や対応ブラウザは？ Vue.js, React.jsのよく使用するイベントや構文、ブラウザごとのバグやハックはあるのか、がまとめられています。

coliss 2018/11/07

Web制作者用チートシートをまとめました。

リンク

これすごい便利！17,530種類の色の名前がすぐに分かる無料の辞書ツール -color-names list | コリス

色のコードを元に、色の名前がすぐに分かる便利な辞書ツールを紹介します。2018年10月現在、17,530色が登録されており、色の名前が必要な時に役立つと思います。

coliss 2018/10/10

色の名前が必要な時に、これがあると便利。

リンク

コーディング作業は無しで、デスクトップ・スマホ向けのテンプレートをすぐに構築できる次世代ツール -GrapesJS | コリス

HTMLやCSSのコーディング作業は無しで、デスクトップ・スマホ向けのさまざまな種類のテンプレートをすぐ簡単に構築できるフレームワークを紹介します。ランディングページはもちろんのこと、CMSにも使用できるように設計されており、オープンソースとして利用できます。普通のページビルダーのように見えますが、実際にはより多くの機能を備えています。 CMSもサポートテンプレートを簡単に作成できる Webサイト、スマホアプリ、HTMLメールなど、HTMLベースのテンプレートを素早く簡単に作成できます。レスポンシブ対応レイアウトのベースはFlexboxで、デスクトップ、タブレット、スマホに完全対応。 CMSをサポート動的テンプレートの作成をスピードアップするためにCMS内部で使用できるように設計されています。 HTML, CSSのコーディング作業は無しコーディング作業は一切無しで、テンプレー

coliss 2018/10/09

デスクトップ・スマホ向けのさまざまな種類のテンプレートが簡単に、作成できます。

html
css

リンク

1クリックでHTML要素の構造を可視化し、セマンティック要素が正しく実装されているか検証できる -Construct.css

Webページに実装されているHTML要素の構造を可視化し、header, nav, main, articleなどセマンティック要素が正しく実装されているか検証できるスタイルシートを紹介します。デバッグ機能も備えており、不正なマークアップや問題のあるマークアップを表示することもできます。 Construct.css Construct.css -GitHub Construct.cssはセマンティックHTMLの使い方をより身近にするために、スタイルをフックとしてクラス名を使用するのではなく、直接タグをスタイルするCSSのライブラリです。目に見えないセマンティックのタグであることを視覚的に確認することができます。ブラウザで簡単に利用できるブックマークレットも用意されています。ブックマークレット Construct.cssのブックマークレットブックマークレットを使用すると、以下のCSS

coliss 2018/09/20

検証用のスタイルシート、すごい簡単で便利です。

リンク

[CSS]シンプルなHTMLで、美しいプログレスバーを実装するスタイルシートのテクニック

フォームなどのタスク完了までの進捗状況を表示するプログレスバーを実装するスタイルシートのテクニックを紹介します。シンプルなHTMLで実装されており、画像は一切無し、文字要素とborderとborder-radiusでビジュアル化されています。 <ol class="progress-bar"> <li class="is-active"><span>Objective & Template</span></li> <li><span>Options</span></li> <li><span>Step</span></li> <li><span>In a Nutshell</span></li> <li><span>Step</span></li> <li><span>Step</span></li> <li><span>Launch Date</span></li> <li><

coliss 2018/09/19

プログレスバーを実装するスタイルシートのテクニック

リンク

Chromeの新機能がすごい便利！imgやiframeにlazyload属性を加えるだけでLazyLoad対応に

「Blink LazyLoad」と呼ばれるChromeの新機能は、表示領域外の画像やiframe要素のロードを遅延させることで、Webページのパフォーマンスを大幅に向上させます。 LazyLoadは今まではJavaScriptを使用していましたが、ブラウザのネイティブな機能として、imgやiframe要素にlazyload属性を加えるだけで簡単に利用できます。「Blink LazyLoad」の機能と使い方、注意点を紹介します。 A Native Lazy Load for the Web 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。「Blink LazyLoad」の機能セキュアなLazyLoadのポリシー後方互換性 LazyLoadの有効化参考資料終わりに「Blink LazyLoad」の機能重要度の低いコンテ

coliss 2018/09/03

ブラウザのネイティブな機能として、LazyLoadが実装できるようになる。全然関係ないけど、「ものすごいまずい」（野坂昭如）、「すごい立派な干菓子」（曽野綾子）http://home.soka.ac.jp/~myamaoka/b0412.htm

リンク

HTML5とCSS3の機能や役割や対応ブラウザなど、実装に必要な情報がすぐ分かるコーダー必読のリファレンス本

今持ってるリファレンス本は、最新のHTMLとCSSに対応していますか？ HTML5の要素とCSS3のプロパティについて、機能や役割や対応ブラウザなど実装に必要な情報がコンパクトにまとめられたリファレンス本を紹介します。本書は2018年6月時点の最新情報が掲載されており、IE11, Edge42をはじめとする各ブラウザの対応状況も掲載されています。リファレンス本の大切なポイントの一つが、使いやすいこと。 HTML5とCSS3の完全版だとそれなりに分厚いのが想像できると思います。本書は512ページとけっこうな分厚さなのですが、どのページでも見開きが簡単にできます。手で押さえておく必要はありません。四六判なので、キーボードの横に置いても邪魔にならないでしょう。

coliss 2018/08/24

コーダー必読、2018年6月時点の最新情報が掲載されたHTMLとCSSのリファレンス本

html
css

リンク

コードはわずか384bytes！HTML/CSS/JavaScript対応、ブラウザからすぐに利用できる超軽量エディタ -TinyEditor

data:text/html,<body oninput="document.querySelector('iframe').srcdoc=h.value+'<style>'+c.value+'</style><script>'+j.value+'</script>'"><style>textarea,iframe{float:right;width:100%;height:50%}body{margin:0}textarea{width:33.33%;font-size:18}</style><textarea placeholder=JS id=j></textarea><textarea placeholder=CSS id=c></textarea><textarea placeholder=HTML id=h></textarea><iframe> data:text/html,

coliss 2018/08/09

ブラウザですぐ利用できる超軽量エディタ

リンク

[JS]実装が簡単で、操作も快適！スクロールに対応したコンテンツを実装できる超軽量ライブラリ -SimpleBar

スクロールバーをカスタマイズしてコンテンツを設置できるJavaScriptのほとんどは、スクロールの挙動が独自だったりします。ブラウザのネイティブのスクロール操作を使用し、快適に動作するコンテンツを実装できるライブラリを紹介します。 5kBの超軽量で、他スクリプトの依存はありません。また、IE9+対応なのも安心ですね。デフォルトのスクロールバーをカスタマイズ同系統のスクリプトの多くはJavaScriptでスクロールバーを模倣しますが、当スクリプトはデフォルトのスクロールバーを使用するので、パフォーマンスを損なうことはありません。スクロールバーのデザインスクロールバーはCSSでスタイルを簡単に変更できます。 5kBの超軽量スクリプト他のスクリプトの依存はなく、超軽量の単体で動作するスクリプトです。ネイティブのスクロールスクロール操作にJavaScriptは使用せず、ネイティブの

coliss 2018/08/07

divにdata属性を加えるだけの簡単実装。5kBの超軽量、他スクリプトの依存はなし。

リンク

Visual Studio Codeで見やすいテーマファイルのまとめ

Web制作時などのコーディングの作業が捗る、コードがはっきりと見やすくて、使いやすい Visual Studio Codeのテーマを紹介します。ダーク系が好きな人も、ライト系が好きな人も、そしてクリーム系やMaterialカラーのテーマなど、いろいろ揃っています。 VSCodeThemes VSCodeThemes -GitHub VSCodeThemesでは、Visual Studio Codeのさまざまなテーマがまとめられています。 Visual Studio Codeで使いやすいテーマファイル Visual Studio Codeのテーマのインストールと変更方法 Visual Studio Codeで使いやすいテーマファイルまずは制作者に人気が高い、暗い色を使用したダーク系のテーマ。

coliss 2018/08/03

Visual Studio Codeで見やすいテーマファイルのまとめ

リンク

驚くほど簡単！コーディング作業不要で、まざまなHTMLページを積み木感覚で作成できる無料ツール -Stitches

ランディングページやポートフォリオなど、レスポンシブ対応のペライチ縦長ページをドラッグ&ドロップで驚くほど簡単に作成できてしまう無料オンラインツールを紹介します。 FlexboxベースのTailwind CSSが使用されており、ヘッダやフッタやコンテンツには、一般的に使用されているコンポーネントが揃っています。HTMLの作業は必要なく、自分用のHTMLファイルを短時間で作成できます。