かもメモ

自分の落ちた落とし穴に何度も落ちる人のメモ帳

HTML

HTML 番号付きリスト ol を途中から始めたい

レイアウト的に別ブロックになってるけど続き順のリスト表現にしたいとか、ol の順番を途中から始めたかった start 属性を使えばOK start で指定した数字からの番号リストになる <ol start="10"> <li>item 1</li> <li>item 2</li> <li>item 3</li> </ol> ↓ 10. item 1 11. item 2 12. item 3 value 属性を使…

CSS リストをいい感じに折り返す横並びにしたい

リストの間隔は gap で指定したい場合、flex だと各アイテムの width を設定しなければならず面倒 例えば上記の画像のように gap: 24px で 3つ並びにしたいと思った場合、リストアイテムの width を 33.333% にするとアイテム間の間隔分が足らず 100% を超え…

SVG に alt の代わりになる属性を付けたい

React / Next で SVG をコンポーネントとして使うことが多かったのだけれど、SEO が必要なメディアの制作で SVG に image のような alt が設定できないか気になって調べてみたメモ img タグを使う <img src="/path/to/logo.svg" alt="ロゴ" /> font-size で大きさを変えたり、color で色を変えたりする…

CSS 日本語で <wbr /> が効かないにハマる

レスポンシブなサイトを実装する際に、モバイルなどエリアが小さくなる時にいい感じにテキストを改行させたい・デザイナーの要望で改行位置を固定させたいケースがあります。改行位置のためにメディアクエリで display を切り替えるのはイケてないので避けた…

CSS Flexbox の子要素内でテキストの省略 (text-overflow: ellipsis) が効かないにハマる

text-overflow: ellipsis になって欲しい要素の 親要素の flex-item に overflew: hidden をつければ良い

SEO スクリーンリーダー専用テキストと隠しテキストのスパム判定のメモ

スクリーンリーダーが読み取れない隠しテキストはスパム判定でペナルティを受ける可能性がある

CSS だけでタブを作るぞ!

input[type="radio"] を利用した CSS だけで作るタブ 作ったやつ! See the Pen Tab without JavaScript by KIKIKI (@kikiki_kiki) on CodePen. HTML <div class="tab"> <input type="radio" id="tab1" name="tab" checked /> <input type="radio" id="tab2" name="tab" /> <input type="radio" id="tab3" name="tab" /> </div>

favicon をダークモード対応したい

webサイトやwebサービスでタブとかに表示される favicon 。favicon もダークモード対応ができるらしいのでやってみたのメモ favicon を SVG にする 昔から .ico みたいなファイル作ってたけど、最近では SVG もサポートされているらしい。SVG は内部にスタイ…

JavaScrip HTML5 input type="datetime-local" の値を設定したい

JavaScript (React) で <input type="datetime-local" /> の値を設定するメモ datetime-local の value は yyyy-MM-ddThh:mm の形で指定する 表示される日付と時刻の書式は実際の value とは異なることです。表示される日付と時刻は、オペレーティングシステムからの報告に従ってユーザーの…

CSS :nth-child(n) の順番についてのメモ

CSSの要素の順番に応じてスタイルを当てる :nth-chaild 疑似要素で上手く行かないという相談を受けて、ちゃんと仕様を把握できてなかったので改めて調べたのでメモ 相談を受けたHTML と CSS HTML <body> <header></header> <section>section 1</section> <section>section 2</section> <section>section 3</section> </body> CSS section:nth-child(2)…

JavaScript &nbsp; なスペースのあるHTMLの扱い

先に JSX 内で &nbsp; が含まれる場合のテストのハマりどころ書いてしまったけど、改めて JavaScript での扱いをメモ。 JavaScript での取得 <p id="elm">星宮&nbsp;いちご</p> const elm = document.getElementById('elm'); elm.innerText; // 星宮 いちご elm.firstChild.n…

JavaScript, React &nbsp; なスペースのあるHTMLのテスト

HTMLで時々見かけるやつ。 &nbsp; &nbsp; Non-Breaking Space 文中で折り返しさせたくない語句を繋ぐ時に使う特殊文字。 JavaScript で &nbsp; が含まれるHTMLを扱う時のトラップ コンポーネント時代の昨今だとJSXとかJavaScript内にHTMLを書いたりすること…

React JSX コメントを書きたい!

ReactのJSXでコメントを書く方法のメモ JSX Comment JSXの{ }の中はJavaScriptが動作するので{ }で囲ってコメントを書くことができる {/* 一行コメント */} {/* 複数行 コメント */} // も使えるが{ }の閉じタグの前に改行が必要。 {// 一行コメント } 改行…

Ajax (XHR) まわりいろいろ試してみた。

jQueryの$.ajax, XMLHttpRequest, FetchAPI, axios, superagentを簡単に試してみた

JavaScript Blobオブジェクトでファイルを作成してダウンロードしてみる

A Blob object represents a file-like object of immutable, raw data. Blobs represent data that isn't necessarily in a JavaScript-native format. The File interface is based on Blob, inheriting blob functionality and expanding it to support f…

HTMLでES moduleをつかうメモ

ES2015で、scriptタグモのtyoeで指定できるモードにmoduleが追加されたようです。 script:グローバル名前空間を必要とする標準的なスクリプトのためのもの module:明示的なインポートとエクスポートを必要とする、モジュール化されたコードのためのもの sc…

HTML 本当は怖い target="_blank" 。rel="noopener" ってなに?

WordPressの投稿で別ウィンドウで開くリンクtarget="_blank"を作成すると、 <a href="{URL}" target="_blank" rel="noopener">LINK TEXT</a> のようなrel="noopener"属性を持ったaタグが出力されます。 rel="noopener" の意味 1. target="_blank" のセキュリティ上の脆弱性の問題を避ける Without this, the new …

Pug 出力するコメントに変数を使いたい

pugでHTMLを生成する時、変数をコメントに含めて出力するのに少しハマったのでメモ 変数をコメントに含める方法 - var hello = "world"; | ↓ 又はpugの文字列展開の方法を使って - var hello = "world"; != `` ↓ NG集 - var hello = "world";

IE HTMLのIE分岐の条件付きコメント <!-- [if IE] -->が効かなくなってた。

表題のとおりです。 画像をレスポンシブで100%表示するのにObject-fitが便利なのですが、IE11ではObject-fitがサポートされてないので、HTMLのIEを判別させる条件付きコメントを使ってIEの時だけ上書きするCSSを読み込ませようとしていました。 Windowsの実…

Microsoft Edge リスト要素の記号が消えないバグ(list-style: none が効かない)にハマる。

Microsoft Edge でCSSでlist-style: noneが指定されているにも関わらず、・や 1. というリスト(ul, ol)の記号が消えないバグに遭遇しました。 調べているとIEでもこの問題はあったようで 問題の発生条件 概ね次のような条件で発生するようです。 ul / ol / l…

CSS Fixedしたコンテンツでスクロールさせたい

モバイルのメニューとかposition: fixedでデザインしたけど、メニューが長かったりデバイス回転させたりしたらメニューが見切れるからfixedしたモーダル内でスクロールを表示させたい時の実装方法のメモ top, left, right, bottom と overflow を利用する .m…

IE11バグ display table, table-cell 内で max-width が効かない

IE11… またお前か! max-widthのバグが多いですねw display: table, display: table-cell の中にある img タグのmax-width: 100% が無視されて、要素からはみ出したりしてしまう問題。 <div class="table"> <div class="table-cell"> <img class="max-width-100per"> </div> </div> table-layout: fixed を使うと max-width が効く display: table …

IEバグ inline-block 内の要素に max-width が効かないにハマる

コーディングをしていて IE で崩れていると連絡を受けてしまいました。 IE11のサポートしてたのですが、まぁ流石にもうIEでも大丈夫だろうと思ってたら、まさかIE6時代のようにバグに遭遇してしまいました。 マイクロソフトを信じたのが間違いだった... 発生…

CSSで文字にボーダー(縁取り)をつけたい。

Illustratorの線やPhothopのレイヤースタイルの境界線みたいに文字にボーダー(縁取り)をつける方法のメモ。 といっても、イラレの線やPhoshopの境界線みたいにバチッとした縁取りを付けるのは難しそうです。 1. text-stroke を使う方法 text-stroke サポート…

CSS 100%幅の子要素にネガティブマージンを使うと右側だけはみ出して横スクロールが表示されてしまう

所謂Bootstrapの.row・.col-で使われているような親要素が左右のネガティブマージンを持ち子要素がfloatを使ったカラムレイアウトを100%の画面に入れた時に右側だけが100%のブラウザサイズからはみ出して横スクロールが表示される現象に遭遇しました。 横ス…

CSS3 マークアップ別Flexboxで要素を左端・センター・右端揃えのレイアウトを作る

IE8以下のサポートも終わり自動アップデートになってきていますし、CSS3のFlexboxもそろそろ実制作で活用できる用になってきていると思っています。 flex サポート状況 なので、下記画像のようなWEBサイトのグローバルナビゲーションとかでよくある例えばロ…

HTML・CSS レスポンシブな正方形を作って、その中央にコンテンツを表示させたい。

スマートフォン版のサイトなどを作る際に、例えば商品のサムネイル画像等をウィンドウ幅に合わせ、かつ中の画像を中央に表示させたいようなケースに結構遭遇します。 レスポンシブの正方形を作る vmin という単位を利用する方法 調べていると、widthとheight…

WordPress 4.4 Responsive Images の size の値を変更したい。

WordPress 4.4 以降では、管理画面からアップロードされた画像を表示させる時に、wp_get_attachment_image()とかget_the_post_thumbnail()とかの関数を使ってimgタグを出力すると、自動的にsrcsetとsize属性がつくようになりました。 例えば、580px x 166px …

PHP aタグだけ除去したい。

aタグで囲っているコンテンツの中に、管理画面のWYSIWYGエディターなどでユーザーが入力したHTMLのを出力する時、出力するHTMLの中にaタグが含まれていると、リンクが壊れてしまいます。 [参考] なので、aタグだけを除去して出力したい! PHPではstrip_tags…

HTML5 ファイルをダウンロードさせるリンクを作りたい。

最近のブラウザちゃんはPDFとかも開けちゃうのですが、ファイルをダウンロードさせたいって時があります。 HTPPヘッダーにContent-Dispositionをごにょごにょしたり、.htaccessでごにょごにょしたりしてたイメージだったのですが、HTML5からはHTMLだけで簡単…