TIL

Today I Learned. 知ったこと、学んだことを書いていく

テキストエディタ作成

CodeMirrorを使ってみた - JavaScript

コーディング用のテキストエリアを簡単に実装できるライブラリを見つけたので使ってみた textareとリンクさせて使うのが一般的な気がするけど、今回はすでにある要素と置き換えるようにしてみた CodeMirror まずは、http://codemirror.net/ にアクセスしてダ…

タブの表示 2 - CSS

CSSだけでタブを表示するやつを昨日書いたけど、他にもいい方法がないか探していたところ、JavaScriptで追加し他要素にも対応できそうな書き方があったため、実装してみた ↓昨日書いたやつ タブの表示 - CSS - TIL See the Pen dmEGry by tamago (@tamago324…

タブの表示 - CSS

こっちの書き方のほうが好き タブの表示 2 - CSS - TIL こんな感じのタブ!!! See the Pen qowGpN by tamago (@tamago324) on CodePen. ポイント ラジオボタンの非表示 ラジオボタンは見せなくていいから非表示にする input[type="radio"] { display: non…

枠線 outline - CSS

outlineプロパティを使うことでinputやtextareaの枠線のスタイルを設定できる 輪郭線ともいう?また、:focusを使うことでフォーカス時の枠線の表示をすることもできる。 outline: 太さ 色 線の種類; いろいろためしてみた See the Pen フォーカス時の枠線 ou…

イベントのキャンセル event.preventDefault() - JavaScript

例えば、inputやtextarea内でtabキーを入力したとする。するとフォーカスが外れる もし、無効化したい場合、event.preventDefault()を使用すればいい const disableTab = (event) => { if (event.key === "Tab") { event.preventDefault(); } }; /* キー押下…

親要素の横幅いっぱいに表示 - CSS

親要素の横幅いっぱいに表示しようと思ったときに、つまづいたのでメモ box-sizing: border-box;を使う paddingをborderもwidthに含める marginではなく、paddingで調整する marginはwidthに含まれていないため <div class="main"> <textarea class="editer"></textarea> </div> * { /* すごい重要!! */ box-sizing: bor…