Vue.js関連の各種リソースがまとめられた「VueToolbox」 - NxWorld
「VueToolbox」は、Vue.jsに関係するフレームワーク・コンポーネント・ジェネレータ・ユーティリティなどの各種リソースがまとめられているサイトです。 サイトでは下記5カテゴリーに大きく分類されているのに加えて、例えば「Frameworks」であれば「Admin Template」「Component Collections」「Desktop」といったように、さらにその中でも分類化されているので目的のリソースも探しやすくなっています。 Frameworks Integrations UI Components UI Utilities Utilities 子カテゴリーの一覧ではリソース名と概要が記載されたものが並べられています。 また、一覧の右上で並び順の切り替えができるようになっており、最後のコミットがいつされたかやnpmでのダウンロード数などを基準にできます。 詳細ページでは「
必要な機能項目を選択することでwebpack.config.jsを出力してくれるジェネレータ「Webpack configurator」 - NxWorld
「Webpack configurator」は、webpackに関する設定を記述するwebpack.config.jsを各項目を選択するだけで出力してくれるジェネレータです。 React, CSS, Sass, SVG, lodashなど現状で10個の項目が用意されています。 サイトにアクセスするとページ上部に各項目のチェックボックスが並べられているので、そこから必要な機能を選択していきます。 各項目を選択するとその下の「Your personal webpack.config.js」にあるコード内容が変化していくので、あとはこの記述をコピーしてwebpack.config.jsにペーストするだけです。 選択できる機能としては、現時点で下記の10個が用意されています。 また、コード出力箇所の横には各パッケージのインストールに必要なnpmのコマンドも出力されます。 何も選択していない場合はn
CSS Grid Layoutを採用しているサイトをコレクションしている「Grid Examples」 - NxWorld
「Grid Examples」はCSS Grid Layoutを採用しているサイトをコレクションしているギャラリーです。 まだ公開されたばかりみたいなので現時点の数は少なめですが、いずれも掲載されているのはCSS Grid Layoutを採用しているサイトばかりになり、このサイト自体もCSS Grid Layoutを採用して作成されています。 TOPページでは確認することができませんが、それぞれカテゴリーやタグでの管理も行なっているみたいなので、今後掲載数が増えた場合もそれらを利用すれば参考にしたいタイプを探すのに役立ちそうです。 ちなみに、掲載サイトを募集しているみたいなので、個人的にCSS Grid Layoutを採用しているサイトで掲載してもいいというサイトがある人はコンタクトをとってみてください。
Flexboxを利用してよくあるレイアウトを実装したサンプル集 - NxWorld
一部ブラウザ（特にIE）で若干挙動が違ったりすることもあるものの、Flexboxを利用することで今までCSSだけでは難しかった見栄えが実装できたり、よりシンプルなHTML・CSSで実装できるレイアウトが増えました。 そんなFlexboxを利用してサイト制作時によく出てくるレイアウトを実装したサンプルをいくつか紹介します。 紹介するものは基本的にプレフィックスを省略しているので、必要があれば各自で追記してください。 基本的に各実装に必要なFlexbox関連の最小限のコードのみ紹介していますが、サンプルによってはわざわざ初期値（flex-wrapやalign-itemsなど）を指定している場合があります。 それらは挙動を把握しやすくするために記述されているものなので、不要であれば記述する必要はありません。 表示確認のデモはPCでの閲覧推奨です。 要素を両端に寄せる 特にヘッダーやフッターで利用
CSSでアンダーラインが追従するメニューを実装する方法 - NxWorld
以前であればJavaScriptを利用して実装していた、メニュー下にあるアンダーラインをホバーしたメニューへスライドしながら追従する動きをCSSのみを使って実装する方法です。 どのようなものなのか実際の動きを見たほうが早いと思うのではじめにデモを紹介すると、このようにメニュー下にあるアンダーラインがホバーしたメニュー下へスライドしていくという動きになり、JavaScriptは使用せずにCSSのみで実装しています。 HTMLは下記のようなものを使用し、a要素は単純なリンクで.nav-underlineが追従してくるアンダーラインで使用する要素になります。 また、ハイライト表示している付与されているclassはよくあるカレント表示用に見栄えを異なるものにするのに使用するclassになっており、これをそのまま使用した場合は上のデモにあるように3つ目のメニュー下にアンダーラインがあるのが初期表示と
web制作者（フロントエンド・マークアップエンジニア向け）がブックマークしておきたい、便利なチートシートやリソースのまとめ - NxWorld
普段制作している上でうっかり忘れてしまったときにさっと確認することができる便利なチートシートや特定の情報がわかりやすくまとめられているリソースなどまとめてみました。 主にフロントエンドやマークアップエンジニアの方が日頃から利用することが多いと思うHTML・CSS・JavaScriptに関するものが中心で、他には各ブラウザのバグ情報を検索したり様々なデバイスの情報がまとめられたサイトなどもあります。 普段から多用している言語はもちろん、頻繁に調べてるとかまだまだ勉強しつつ使っているというものがあれば、それに関するチートシートをブックマークしておくことで不明点が出る度に検索する手間も省けて制作時間の短縮にも繋がると思います。 また、基本的にはweb上で確認するものになっていますが、中にはわかりやすく1枚のイメージでまとめられていたりPDF形式で用意されているものもあるので、それらを印刷して手元
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
