inline-blockの隙間をなくす方法 - Qiita
display:inline-blockで要素を並べると余計な隙間ができてしまうので、 簡単に隙間をなくす方法を紹介します。 親要素にfont-size:0;を指定する 横並びにしたい<li>タグを1行で書いたり、letter-spacingを調整したりなど、 いくつかの解決方法がありましたがこの方法が一番楽でした。 display:inline-blockの隙間問題はテキストの改行が原因で起こるので、 inline-blockを使った要素の親要素にfont-size:0;を指定すると改善されます。 <ul class="wrap"> <li class="inline-block"> テキストテキストテキストテキスト </li> <li class="inline-block"> テキストテキストテキストテキスト </li> <li class="inline-block"> テキストテ
React 初心者の難問、カスタムフック（Custom Hook）を解説します
最近社内レビュー会で React レビューが多くなり、「カスタムフック使ったらスッキリできます」という言葉もよく聞くようになりました。 私が初めてそれを耳にしたときは「なにそれ美味しいの？」みたいな感じでしたし、初心者にはピンとこない概念かなーと思いましたので、今回のテーマにしたいと思います。 1. カスタムフックとは カスタムフックは自分がカスタムして作るフックです。 React 公式サイトではカスタムフックをこう説明してます。 カスタムフックとは、名前が ”use” で始まり、ほかのフックを呼び出せる JavaScript の関数のことです。 でもこれだけ見たら絶対わからないと思うのでサンプルコートを一緒に見てみましょう。 2. チャットアプリの例 サンプルコートも React 公式サイトにあるものを持ってきました。 チャットアプリで友達がオンラインかオフラインかを示すメッセージを返す
「がんばらないTypeScript」のための現実的な設定を考える ─ 4レベルの厳しさを使い分けてTypeScript疲れを克服しよう！｜ハイクラス転職・求人情報サイト AMBI（アンビ）
ハイクラス求人TOPIT記事一覧「がんばらないTypeScript」のための現実的な設定を考える ─ 4レベルの厳しさを使い分けてTypeScript疲れを克服しよう！ 「がんばらないTypeScript」のための現実的な設定を考える ─ 4レベルの厳しさを使い分けてTypeScript疲れを克服しよう！ エンジニアHubでは2019年に「がんばらないTypeScript」を紹介しました。JavaScriptに静的型付けなどを提供するTypeScriptは、今では実プロジェクトに採用されるプログラミング言語になっています。そこで現実的なTypeScriptの設定を、藤吾郎（gfx）さんに解説してもらいました。 2021年の現在、TypeScriptの価値はますます広く認められるところとなり、多くのJavaScriptプロジェクトがTypeScriptで開発されるようになってきました。またT
CSSの新しいプロパティ「accent-color」が便利！今までできなかったフォーム要素のカラーを簡単に変更できる
フォーム要素のチェックボックス・ラジオボタン・レンジスライダー・プログレスバーのカラーを簡単に変更できるCSSの新しいプロパティ「accent-color」の基礎知識と使い方を紹介します。 CSS accent-color by Adam Argyle, Joey Arhar 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 CSSの新しいプロパティ「accent-color」 「accent-color」にサポートされている要素 コントラストの確保 他の要素のカラーを変更するCSS 今後の可能性 CSSの新しいプロパティ「accent-color」 現在のHTMLフォーム要素は、カスタマイズが難しいと言われています。カスタムスタイルをほとんどまたはまったく使用しないか、inputのスタイルをリセットして一から作り直すかのどちらか
react-hooks-use-modalを使ってモーダルコンポーネントを作成する
こんにちはかみむらです。 先日柴田さんが公開していた、Reactのモーダルコンポーネントを簡単に作成できるライブラリ react-hooks-use-modal をmicroCMSのOrganizationに移行しました。 こちらがGitHubのリポジトリです。 https://github.com/microcmsio/react-hooks-use-modal こちらはデモになります。 https://microcmsio.github.io/react-hooks-use-modal/ react-hooks-use-modalはmicroCMSの管理画面内部にも使われています。例えばWebhook追加時のモーダルコンポーネントです。 モーダルのコンポーネントは1から実装すると非常に工数がかかりますが、react-hooks-use-modalを使えば少ない工数で実装することができま
SEOのよくある20の都市伝説 - SEO Japan｜アイオイクスのSEO・CV改善・Webサイト集客情報ブログ
SEOにおいて、ランキングの判定要素を明確に把握することは、不可能と言えます。Webサイトの状況や時期的な要素などを含め、「効果的な施策」を日々探している方も多いでしょう。そういった状況の中、真偽の程は定かではない「効果的な施策」がさも事実であるかのように語られることは多いです。今回はそうした施策を「都市伝説」と名付け、それらを検証したSearch Engine Journalの記事を紹介いたします。 この記事では、SEOの専門家が繰り返し否定しているにも関わらず、未だに存在している20のSEOの都市伝説を紹介する。 SEOについてのアドバイスは様々だ。 実際に役に立つものもあれば、従ってしまうと道を踏み外してしまうアドバイスもある。 難しいのは、それらを見分けることだろう。 事実に基づいた正確なアドバイスと、誤って引用された記事やGoogleの声明に対する不十分な理解に基づいたアドバイス
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
React.js Examples