【Chrome】textareaの改行時にカーソル位置がガタっとずれる問題の対処法
Enterキーを押すとtextareaのスクロール位置がずれる問題 ふとZennのスクラップのエディターで、Enterキーを押すと、カーソルのあたっている部分のスクロール位置がガタっとずれる問題が発生することに気づきました。 Enterキーを押したタイミングでカーソルの位置がviewportの先頭もしくは末尾にジャンプするようなイメージです。 もう少し調べてみると、Chromeでは問題が発生するものの、FirefoxやSafariでは問題が再現できませんでした。 とりあえずautosize textareaを疑う スクラップのエディターではtextareaの高さがテキストの長さに応じて変わるreact-textarea-autosizeを使っています。最初はこのパッケージを疑ったのですが、HTMLの<textarea>タグに書き換えても問題は解消しませんでした。 Reactのcursor
絵文字😇を含むテキストを表示する @font-face 設定（Unicode 10.0対応版）
CSSで絵文字を表示するための @font-face 設定を紹介します。この方法はモダンな閲覧環境ではほぼ問題なく表示できます。またJavaScriptを使用して絵文字を画像に置換するタイプ（EmojiOne、Twemoji）と比較して、表示速度や利便性などの面で大きく有利です。 絵文字を含むテキストを表示する @font-face 設定（Unicode 10.0対応版） デモページもご覧ください。 以下のCSSを指定すると絵文字がきれいに表示されます。 @font-face { font-family: MyFontFamily; src: local("Hiragino Kaku Gothic ProN"), local("Meiryo"); } @font-face { font-family: MyFontFamily; font-weight: bold; src: local(
★★CSSだけで簡単！ハンバーガーメニューの作り方（スマホ対応）
HTML <header> <div id="nav-drawer"> <input id="nav-input" type="checkbox" class="nav-unshown"> <label id="nav-open" for="nav-input"><span></span></label> <label class="nav-unshown" id="nav-close" for="nav-input"></label> <div id="nav-content">ここに中身を入れる</div> </div> </header> inputやらlabelやらが入っていて、何のことが分かりづらいかと思うので、少し解説をします。 解説 全体はheaderで囲んでいます。他にもサイトタイトルやロゴ画像を入れるのではないかと思います。<div id="nav-drawer">の中に
コピペで簡単！見出しの装飾に使えるCSSを16個作っといた
ブログのデザインをいじっていると、地味に悩むのが見出しの装飾。派手すぎるのはダサいですが、何も装飾しないのも味気ないですよね。 今回は、画像を使わずにCSSのみですぐに実装できる見出しの装飾パターンを16個紹介します。作るの大変だった。 一応コピペでもすぐに使えるとは思いますが、色やサイズ、余白などは自分のブログに合わせて変更してほうがいいです。あとベンダープレフィックスは付けていないので、古いブラウザにも対応させたいなら各自で対応してください。 あと、それぞれ表示サンプルも作ったんですが、h要素を使いまくるとアレなのでp要素を使っています。色は#333でフォントサイズは22px、ウェイトはノーマルです。ここらへんもお好みで変えちゃってください。
【CSS】テキストの左右にボーダーを入れる方法
表示結果 Dummy Text 解説 display: flex;(CSS:4行目) p要素をflexコンテナ化することで、内包するテキストがflexアイテムになります。 align-items: center;(CSS:5行目) flexアイテム（p要素内のテキストと、before,afterで生成された疑似要素）を上下中央に配置。 flex-grow: 1;(CSS:9行目) 左右の疑似要素（ボーダー）の幅を、空いているスペースいっぱいまで広げています。 height,background(CSS:10,11行目) heightでボーダーの太さを、backgroundで色を指定しています。 display: block;(CSS:12行目) 疑似要素は、displayプロパティにblockやinlineを指定しないとIEで表示されません。 margin-○○: .4em;(CSS:15
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
