良いコンポーネントを作るために気をつけている3つのこと - commmune Engineer Blog

2022/07/11 32 users commmune Engineer Blog コミューン

はじめに 良いコンポーネントとは 良いコンポーネントを作るためのポイント 1. コンポーネントを要素ごとに過不足なく分割する 2. コンポーネントの抽象度を揃える 3. 利用する側を意識せずにコンポーネントを作る 最後に はじめに こんにちは、コミューンでフロントエンドエンジニアをしている根岸です。 この記事では... 続きを読む

タグ1行でサイトを要素ごとに編集・評価、「KARTE Blocks」クローズドβ版提供開始 | TechCrunch Japan

2020/07/29 17 users KARTE Blocks クローズド ＫＡＲＴＥ ブレイド

顧客体験プラットフォーム「KARTE（カルテ）」を提供するプレイドは7月30日、新プロダクト「KARTE Blocks」クローズドβ版の提供を開始した。プレイド代表取締役CEOの倉橋健太氏は、新プロダクトについて「プレイドとして最初からずっとリリースしたかった、サイトそのものをより良くするプロダクト。ずっとアプローチし... 続きを読む

良い感じに詰めて整形してくれる JSON pretty-printer「jpp」を作りました - たにしきんぐダム

2018/10/29 123 users Field Object Array JSON 改行

jpp というJSON Pretty-Printer を作りました。 github.com このコマンドはJSONを要素ごとに1つ1つ改行するのではなく、画面内(もしくは指定した幅)に収まる限りできるだけ改行を挟まずに要素を表示します。 そのため、例えばarrayの中身に大量の要素が入っているものや、objectの中身にfieldが大量にあるようなJSONを表... 続きを読む

「Google Chrome 57」安定版リリース、レスポンシブデザインに適した「CSS Grid Layout」をサポート - GIGAZINE

2017/03/14 20 users GIGAZINE Grid display 格子 CSS

By ｍｅｒａ ウェブブラウザ「Google Chrome」の最新安定版となる「57.0.2987.98」がWindows・Mac・Linux向けにリリースされました。このバージョンではCSSで要素ごとに区切った格子を制御できる「CSS Grid Layout (display: grid;)」をサポートするほか、JavaScriptを補完することで動的コンテンツをスペックの低いマシンでも高速に動... 続きを読む

レスポンシブが変わる!? EQCSSによるエレメントクエリーの使い方 - WPJ

2017/02/15 44 users WPJ メディアクエリー レスポンシブWebデザイン 常識

レスポンシブWebデザインで使うメディアクエリーを進歩させて、要素ごとに条件を設定できる「エレメントクエリー」を作ろうという動きがあります。どこがどう便利なのか？ 専用ライブラリー「EQCSS」で体験できます。サンプルコードで使い方を紹介します。レスポンシブの常識が変わる!? 君はエレメントクエリーを知っているか？ 2017/02/15 Baljeet Rathi Articles in this... 続きを読む

CSSのレイアウトの崩れを見つける時に役立つChromeの機能拡張 -Pesticide | コリス

2014/04/30 150 users コリス CSS Chrome レイアウト ローカル環境

ウェブ制作時の困ったは、CSSのレイアウトが思うようにいかない時。 そんな時に役立つ、ページ上の全ての要素のアウトラインを要素ごとに異なるカラーで表示する便利ツールを紹介します。 PesticideはChromeの機能拡張だけでなく、外部スタイルシートとしても提供されているのでローカル環境でブラウザを問わず利用できます。 Pesticide Pesticide -GitHub Pesticideの... 続きを読む

悲惨な死に方をかわいく紹介するアニメ - 動画 - Yahoo!映像トピックス

2012/11/20 35 users 映像トピックス Yahoo アニメ 死に方 動画

◇これでは死んでも死にきれない…要素ごとにじっくり見る ・ Dumb Ways to Die(1) | (2)（英語） - Metro Trains ※サイトや文章を翻訳 - Yahoo!翻訳 ◇線路の上には危険がいっぱい（Yahoo!映像トピックス） ・ 危機一髪！線路で撮影中のマニアが… ・ 危機一髪！酔った女性が線路へ転落 ・ 危険！ 列車の窓から顔を出したら… ◇こちらは、飲酒運転への注意... 続きを読む

HTML5の「コンテンツ・モデル」についてまとめました【MdN連載第7回目】 | HTML5でサイトをつくろう

2012/02/07 62 users HTML5 概念 ブロック インライン要素 カテゴリー

HTML5でコーディングする場合に、知っておくべきことの一つに『コンテンツ・モデル』があります。『コンテンツ・モデル』とは、各要素ごとに内包できるコンテンツを定義したものを言います。つまり、要素ごとにどんなコンテンツを入れて良いのかが決まります。 HTML5からは『ブロック/インライン要素』の概念がなくなり、『コンテンツ・モデル』『カテゴリー』を意識することになりますので基本の考え方を学びましょう... 続きを読む

HTML5のカテゴリーの種類についてまとめました【MdN連載第6回目】 | HTML5でサイトをつくろう

2012/01/24 306 users MdN Design Interactive ルール タグ

HTML4では、要素ごとにブロック要素、インライン要素というわけ方があり、インライン要素の中にブロック要素が使えなかったりなどタグの使い方にルールがありましたが、HTML5ではブロック要素、インライン要素というわけ方はしなくなり、要素ごとに目的に応じたカテゴリーという形で分けられています。今回はそのカテゴリーについてまとめてみたいと思います。 MdN Design Interactiveの第6回目... 続きを読む

44日間で11ヶ国、旅の楽しさをギュッと凝縮したショートフィルム

2011/08/05 29 users ショートフィルム English Translate 映像

2011年08月05日 English Translate ｜ 【動画】| 【映画・ショートムービー】  ■44日間で11ヶ国、旅の楽しさをギュッと凝縮したショートフィルム　(0)　 3人の男が44日間で旅した11ヶ国を、それぞれの要素ごとにまとめた映像。 1個目の動画は、歩く男を中心にして、目まぐるしく世界が切り替わる映像。 2個目の動画は旅の中での食事を、3個目の動画は旅の中で体験したことをま... 続きを読む

サイトのガイドツアーを作るためのJavaScriptライブラリ『Guider.js』 | IDEA*IDEA

2011/06/28 34 users IDEA GitHub JavaScriptライブラリ 技術

サイトのガイドツアーを作るためのJavaScriptライブラリ『Guider.js』 June 28th, 2011 Posted in 開発ツール・技術 Write comment これ、メモ的にエントリーしておきます。サイトのガイドツアーを作ることができるライブラリですよ。Githubで公開されています。 ↑ よく見るこういうツアーを作ることができます。 ↑ こういう要素ごとの説明を付与できま... 続きを読む

要素ごとに分けられたウェブデザイン集『Pattern Tap』 - DesignWalker

2008/07/23 200 users ウェブデザイン DesignWalker UIパターン 自分

以前、このブログでご紹介した『UIパターンいろいろ』 いろいろな見せ方を見て勉強するのはとっても大切なのではないでしょうか。 『Pattern Tap』は、ウェブデザインの要素ごとに分けられた、パターンライブラリのサイトです。例えば、ヘッダー部分のデザインや、フォームのサンプル、カレンダーのサンプルが集められていたりと…。何かと便利なサイトです。しかもサインアップすれば、自分のお気に入りパターンラ... 続きを読む