JavaScript: 文字数を正確にカウントするには？ - Qiita
この投稿ではJavaScriptで文字数をできるだけ正確にカウントする方法について取り上げます。 文字数とは？ 要件で「文字数を表示してほしい」「○文字以上はバリデーションエラーにしたい」と文字数を考慮しないとならないことがあります。 そもそも文字数とは何でしょうか。 たとえば、アルファベットの「A」は1文字と数えられそうです。 次の絵文字は、何文字になるでしょうか？ この絵文字はiOSであれば14.5の環境では、UI上では上のように1文字のように表示されます。しかし、それ以前のバージョンでは、同じ文字列データでも😵💫のように2文字で表示されます。なお、この絵文字は3つのコードポイントU+1F635 U+200D U+1F4ABからなります。この絵文字の「文字数」はいったい何文字として扱ったらよいのでしょうか。 以上のように、ひとことで文字数と言ってもデータと見た目と環境の3つのややこ
【レスポンシブ】CSSで作るtableデザイン＆コーディング【コードあり】 – 東京のホームページ制作 / WEB制作会社 BRISK
もはやスマホ表示を考えないwebサイトは新規制作やリニューアルではほぼない今日、どんなに横に長いテーブルでもレスポンシブでどうするか考える必要があります。 PCで組むだけなら何も考えずに済むのですが、スマホの縦長の画面で如何にユーザビリティを落とさず横長になりがちなテーブルを表示させることができるか、いくつかtableコーディングのパターンを用意してみました。 demo Contents 縦に積むテーブルレスポンシブ 横並びを縦並びにするテーブルレスポンシブ 疑似要素で見出しを用意するテーブルレスポンシブ content:attr() で見出しを表現するテーブルレスポンシブ spanで見出しを表現するテーブルレスポンシブ スクロールで表示させるテーブルレスポンシブ 縦に積むテーブルレスポンシブ PC SP ごくごく一般的なテーブルパターンですね。 ソース上は上から順番に要素が並んでいるので
配列を征する者はJSを制す。JavaScriptのスマートな配列操作テクニック - ICS MEDIA
JavaScriptでコードを記述する際、配列の各要素について処理をするケースは頻出します。開発の現場で配列操作の処理を見ていると、次のようなケースがよくあります。 配列の非破壊の望まれる場面が増えているが、元の配列を破壊操作している filter()やevery()など配列のメソッドで書けるところを、forEach()メソッドやfor ... of文を使ってコードを記載し、冗長になっている 記述しても効果のないArray.from()を使用している コード的には問題なく、アプリケーションは意図的に動作しているかもしれません。しかし、冗長な記述は可読性が低下し、予期せぬバグを誘発する可能性があるでしょう。 本記事では、配列操作でよく見かける冗長な記述を、簡潔な記述で置き換える方法について解説します。 本記事で紹介するJavaScriptの配列操作のチートシートを用意したので、まとめて読みた
1歩踏み込んでみる！ CSSグラデーションのマニアックな世界 - ICS MEDIA
CSSでグラデーションがかけられるようになって久しいですが、ただ2色をつないでいるだけの人も多いのではないでしょうか？ あるいはジェネレーターでコピペして終わりにしてはいないでしょうか？ 実は、値を細く設定することで、グラデーションに留まらない、より豊かな表現を実現できます。工夫すればこんな表現もCSSのみで行えます。 後半の応用例の実装は手入力のCSSでは困難な部分もあるので、SCSSを使って記述しています。SCSSを使うとCSSだけでは難しい処理もスムーズに行え、mixin機能を使えば、面倒な入力手間も省けるので便利です。記事内で紹介しているグラデーションの生成mixinも用意しました。 デモを別ウインドウで再生する 使われているmixinを確認する CSSグラデーションの種類 CSSグラデーションは色を扱うのでbackground-colorプロパティを使いたくなりますが、backg
box-shadowだけじゃない！CSSでできる色々な影の表現と意外に知らない落とし穴 - ICS MEDIA
box-shadowだけじゃない！CSSでできる色々な影の表現と意外に知らない落とし穴 ウェブページのデザインやコーディングをしている人なら、誰でも一度は影をつけたことがあるでしょう。一方でその影にどれほどの表現や技術のバリエーションがあるか、意識したことのある人は少ないかもしれません。 影を付ける方法としてはCSSのbox-shadowが一般ですが、そのほかにもいくつもの技術・手法が存在します。ウェブの世界に限らず、年々変化するデザイントレンドにおいても影の扱いは重要なテーマです。 たとえば少し前に流行したロングシャドウや今年のトレンドとも言われるNeumorphism（ニューモーフィズム）など、ユニークな表現には影のテクニックを活用できるものがたくさんあります。 ▼ CSSで作成したロングシャドウ（画像上部）とニューモーフィズム（画像下部）の例： デモを別ウインドウで表示 デモのソース
これが完全版！レスポンシブ対応のwebp画像を実装するHTMLのコード
画像を実装するには、以前はimg要素にsrcで画像を指定するだけで簡単でしたが、レスポンシブ対応、Retina対応、遅延読み込み、そしてさまざまな画像フォーマットの登場により、HTMLのコードが複雑になっています。 レスポンシブ対応のwebp画像を実装するHTMLのコードの完全版を紹介します。非サポート用のフォールバックにも対応しており、コピペで簡単に使用できます。 A picture element to load correctly resized webp images in HTML by Stefan Judis 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 2021年現在、画像の主要フォーマット 新しい画像フォーマットを読み込むための取り組み 最初のステップ: picture要素でwebp画像を読み込むには 完全版
プロのデザインを解説、UIとUXの印象がよくなるデザインの知識とテクニックのまとめ vol.2
デザインはちょっとした一手間を加えるだけで、ぐっとよくなります。 UI&UXデザイナーによるWebページやスマホアプリのUIとUXを改善するデザインの知識とテクニックを紹介します。 先日の記事の続編で、プロのデザインを学べます。 UI & UX Micro-Tips: Volume Two. by Marc Andrew 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 1. ユーザーの混乱を避けるために、UIで確立されたアイコンを使用する 2. 近接を使用して、要素間の関係性を伝える 3. 4ptベースライン＋8ptグリッド＝調和のとれた縦のリズム 4. 見出しのline-heightを減らすのは良いこと 5. 配色で困ったら、類似色で探してみる 6. UIデザインから不要なノイズを取り除く はじめに 次のプロジェクト
CSSだけで実装できるとは！テーブルのヘッダと左端のセルの両方を固定させるCSSの極上テクニック
テーブルのヘッダを上部に固定するのは、position: sticky;で簡単に実装できます。ヘッダだけでなく、テーブルの左端のセルも固定させたい場合は、どう実装すればよいでしょうか？ JavaScriptがないと実装できないように思うかもしれませんが、position: sticky;を効果的に使用することで実装できます。テーブルのヘッダと左端のセルの両方を固定させるCSSのテクニックを紹介します。 A table with both a sticky header and a sticky first column 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 tableのセル、thやtdをposition: sticky;させることはこの記事で解説しました。テーブルのヘッダを上部にくっつけて固定させるのは簡単です（デモペ
JavaScriptは無し、スクロールした時にヘッダの高さを縮ませて上部に固定表示させるCSSの実装テクニック
スクロールした時にヘッダの高さが縮んで上部に固定表示させるWebページを見たことがあると思います。今まではJavaScriptを使用する必要がありましたが、CSSのposition: sticky;を一工夫して使用することで簡単に実装できます。 高さを縮ませるのはヘッダに限らず、パネルやバナーなど他の要素でも簡単に実装でき、汎用性にも優れていると思います。 Shrinking Header on Scroll Without JavaScript by Håvard Brynjulfsen 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 デモページのデザインがシンプルなので、一見見落とすかもしれませんが、ページをスクロールするとヘッダの高さが縮んで上部に固定表示されます。 デモページ 仕組みは、簡単です。 ヘッダは外側と内側の2
たった1行のCSSでこれなら簡単！すでに制作済みのWebサイト・スマホアプリをダークモードに対応させる方法
「たった1行のCSS」とは、prefers-color-scheme: dark;の紹介ではありません。 Webサイトやスマホアプリのさまざまな要素すべてをダークモード用にカラーを変換するたった1行のCSSを紹介します。 すでに制作済みのWebサイトやスマホアプリをダークモード対応にしたい時だけでなく、ユーザースタイルシートとして利用することもできます。 One line - Dark Mode using CSS by Akhil Arjun 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 制作済みのサイト・アプリをダークモードに対応させる方法 CSSの解説 制作済みのサイト・アプリをダークモードに対応させる方法 ここで紹介するのは、すでに制作済みのWebサイト・スマホアプリをダークモードに対応させる超簡単な方法です。 前置き
Vueでパスワード確認用入力欄のバリデーションをしようと思ったけどそもそもパスワード確認はオワコンだった - Qiita
これはなに オワコンは言い過ぎかもしれません。 パスワード確認用入力欄はいらないのかもしれないというメモです。 パスワード確認用入力欄とは？ パスワード確認用入力欄とは、以下のようなフォームのことを指してます。 ユーザーの登録フォームなどにあって、 パスワードを2回入力することでパスワードの入力ミスを防ぐための入力欄です。 経緯 今回、弊社プロダクトのユーザーの登録フォームをNuxtに置き換えることになり、VeeValidateというバリデーションパッケージを使ってパスワードの入力確認のバリデーションを実装する必要が出ました。 そこで、参考のために他サイトでの「パスワード確認用入力欄」の動きを見てみたのですが、Facebook、Yahoo、Qiita、Green,Teratailなどのサイトを見ても「パスワード確認用入力欄」が見つかりません。 （Appleはパスワード確認用入力欄がありまし
CSSで美しいシャドウをつけるbox-shadowの古い書き方とこれからの書き方
CSSで美しいシャドウをつけるbox-shadowの書き方を紹介します。 少し大きめのシャドウを適用し、ネガティブに縮小させることで、通常のシャドウより少しだけ彩度が高くなり、要素がくっきり見えます。
CSSで見出しタグに連番をつけて「手順書」っぽくする - Qiita
この投稿では見出しタグに連番をふったり、装飾したりして手順をいいかんじに表現する方法を紹介します。 実現したいこと 次のようななんの変哲もないHTMLにスタイルを当てて、 <h1>カレーライスの作り方</h1> <div class="steps"> <h2>野菜と肉を切る</h2> <p>いい感じの大きさに野菜と肉を切ります。</p> <h2>煮込む</h2> <p>切った具材を鍋に入れて煮込みます。</p> <h2>味付け</h2> <p>カレールーなど調味料を入れて完成です。</p> </div> 下のように各ステップに1,2,3と連番がついた表示になるようにしたいと思います。 見出しに連番をつけたり、装飾したりして「手順」を表現する方法 いきなりですが、完成形のCSSを示します。細かい説明はコード内にコメントで書いてあるのでご覧ください。 .steps { /* 連番カウンター名の
JavaScriptのモダンな書き方 - ES2017〜ES2018のawait・async, includes(), padStart()等を解説 - ICS MEDIA
JavaScriptのモダンな書き方 - ES2017〜ES2018のawait・async, includes(), padStart()等を解説 ECMAScript 2015がリリースされて以降、JavaScriptの機能は大きく強化されました。const/let、アロー関数、クラス構文、Promiseなどが有名なところですが、ES2016、ES2017、ES2018、･･･ES2022、そしてさらにその先へJavaScriptの仕様は日々進化しています。JavaScript・TypeScriptの開発では、これまで当たり前だと思っていた手法を新しい新機能で置き換えることが何度もありました。 本記事では、JavaScriptのモダンな書き方について説明します。おもに2017年から2018年頃に搭載されたES2017・ES2018の機能について焦点を当てて解説します。 非同期のProm
CSS Flexboxで、Webページによく使用されるUIコンポーネントを実装するテクニックのまとめ
CSS Flexboxを使用してWebページによく使用されるUIコンポーネント、ヘッダでロゴを左端にナビゲーションを右端に、固定幅のサイドバーと流動幅のメイン、フォームで入力欄とボタンの高さを合わせる、同じHTMLで異なるレイアウトのカードを実装するテクニックを紹介します。 CSS Flexbox: 5 Real World Use Cases by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに Flexboxでヘッダを実装する方法 Flexboxでサイドバーとメインを実装する方法 Flexboxで「Top Sellers」のグリッドを実装する方法 Flexboxでカードを実装する方法 Flexboxで検索フォームを実装する方法 はじめに FlexboxはCSSの中でも最も優れた機能の1つ
express実践入門
index.md express実践入門 自己紹介 小川充 mitsuruog フロントエンドエンジニア Javascript, HTML, CSS, Node.js, API設計とか認証とか 2015/5月入社(約半年) はじめに あくまで「俺が考える最強のexpress実践入門」です。 初学者がexpressを攻略する上でのつまづくポイントと、中規模開発をターゲットにしたベストプラクティスを経験ベースでお話します。 おそらく、初〜中級者向けの内容です。 本コンテンツの使い方 express初心者 初学者向けチュートリアル(dotinstallとか)のあとに express経験者 ご自身のコードの見直しに 他の言語の経験者 他の言語の「あれ」は、node.jsでは「これ」のマッピングに (※)中で紹介するコードは抜粋したものであり、そのままでは動作しない場合があります。ご注意ください。
2021年最新版、Font Awesome アイコンの使い方と便利な機能のまとめ
Font Awesome アイコンの基本的な使い方をはじめ、Webサイトやスマホアプリでアイコンを使う時の便利な機能をまとめて紹介します。 Font Awesome guide and useful tricks you might not know about. by Kiss Patrik 下記は各ポイントを意訳・加筆したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 更新: 2021/2/1現在の最新情報にアップデートしました。 Font Awesomeとは Font Awesomeへの登録方法・アイコンの基本的な使い方 Font Awesome アイコンのサイズの指定方法 Font Awesome リスト用のアイコン Font Awesome アイコンの回転 Font Awesome アイコンのアニメーション Font Awesome アイコンを
モダンなJSとCSSで作るライブラリ不要の全画面スクロール演出（2019年版） - ICS MEDIA
スクロールで全画面がスライドのように切り替わるウェブサイトの表現があります。手軽にこの表現を実装するJSライブラリ、fullPage.jsを使ったことのある方もいるのではないでしょうか？ かつては無料で使えたこのライブラリですが、現在はGPLライセンスのプロジェクト以外では使用料がかかります。 その一方、CSSとJavaScriptの進化により、このような表現をライブラリを使わずとも比較的簡単に実装できるようになりました。本記事では、基本的な機能をおさえた、全画面スクロールの実装方法を紹介します。 この記事を通じて以下の技術も学べます。 スクロールをピタッと止めるCSSプロパティscroll-snap-type 画面と要素の交差を検知するIntersection Observer API スムーススクロールが実装できるJavaScriptメソッドscrollIntoView() デモを別ウ
よく使われるレイアウトやUIコンポーネント、それだけを実装するためのHTMLとCSSのシンプルなコードのまとめ
Webサイトやスマホアプリでよく使われるレイアウトやUIコンポーネント、それだけを実装するためのHTMLとCSSのコードがまとめられたコレクションを紹介します。 フレームワークなども便利ですが、それだけを実装するためのコードなので、非常にシンプルでカスタマイズも簡単だと思います。 CSS Layout CSS Layout -GitHub CSS Layoutの特徴 CSSで実装するレイアウト・UIコンポーネント CSS Layoutの特徴 CSS Layoutはよく使われるレイアウトやUIコンポーネントだけを実装するためのHTMLとCSSのコードがまとめられたコレクションです。 MITライセンスで、商用プロジェクトでも無料で利用できます。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Tailblocks — Ready-to-use Tailwind CSS blocks