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

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

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

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

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

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

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

HTMLでES moduleをつかうメモ

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 …

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

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

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

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

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

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

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

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 …

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

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

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

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

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

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

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

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

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

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

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

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

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

Twitterのアカウントをフォローできるボタンを作るには公式のドキュメントから作成できます。 Follow Button | Twitter Developers こんな感じに。 Follow @twitter window.twttr=(function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],t=window.twttr…

Twitterのフォローボタンをカスタマイズしたい

レスポンシブHTMLメールを作成する際の覚書 | Tips NoteHTMLメール制作のコツや便利なサービスいろいろ テンプレート Ink: A Responsive Email Framework from ZURB Cerberus - Responsive Email Patterns Antwort - Responsive Layouts for Email leemunroe…

レスポンシブ対応したHTMLメール関連のメモ

以前、他のブログにも書いてた事にまた引っかかってしまったので。 改めて。javascriptでフォームを送る方法 <form type="post" name="myForm" action="mofumofu"> こんなフォームだよ― ... </form> javascriptの場合。 // javascript document.myForm.submit(); jQueryの場合 // jQuery var $form = jQuery('form[name…

jsでformを送る(submitする)際に気をつけること。