CodeMirrorって何！？ JavaScriptで簡単にそれっぽいテキストエディタを生成できるライブラリ！GitHubやCodePenでも使われてる また、カスタマイズもできるらしく、面白そう！！！！ 実装してみた 以下の動画を見るとわかるが、本当にすごい簡単に実装できる…

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

指定要素の前に要素を追加するにはelement.insertBefore()を使う element.insertBere(追加要素, 起点要素) elementの中にある「起点要素」の前の位置に「追加要素」を追加する っていう感じ 実際にやってみた sub2の前に要素(青い要素)を追加する See the Pe…

element.classListを使うことでclassの操作ができる GItHubのページでもclassListを使っていた add classの追加ができる element.add("class-name"); また、一度に複数追加することもできる element.add("class-name1", "class-name2"); remove classの削除…

element.parentNodeを使う <div class="main"> main <div class="sub">sub</div> </div> const subElem = document.querySelector('.sub'); const mainElem = subElem.parentNode; alert(mainElem.innerText); 参考文献 【JavaScript】（基礎）親要素・子要素の取得まとめ② | unitopi - ユニトピ -

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

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

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

クリックしたときに何か処理をしたいときとかに使う イベントに対しての処理を追加するにはaddEventListener()で追加する element.addEventListener(イベント名, 呼び出す関数); イベント名はclickやkeyupなどたくさんある 例）ボタンをクリックしたときにア…

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

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

background-sizeを使うことで表示するときの大きさ設定ができる Emmentのショートカットはbgsz 設定できる値は以下の通り 値 説明 contain 縦横の比率を変えず、切り取りせずに、できるだけ大きく表示(もし、余白がある場合、繰り返して表示される) cover 縦…

そのタグの役割が何なのかを明示することができる application: アプリケーション form: 検索以外のフォームを含む領域 search: 検索項目を含む領域 <div role="search"> <form action="" class="search-form"> <input id="" type="text" name=""> <button type"submit">検索</button> </form> </div> 参考文献 レイアウトで使うランドマークのrole属性【アクセシビリティ】【WAI-ARIA】 - E-rivers…

IOS端末でautocapitalize属性はユーザーが入力した文字列の先頭の文字を大文字にするかどうかの設定 offにしておけば、大文字にならない(初期値ではoff) <input type="text" autocapitalize="off"> IOS端末だとなるのかな？ See the Pen QmJzXL by tamago (@tamago324) on CodePen. 追記：iPhoneから…

Progateに書いてあったことを自分なりにまとめてみる 画面サイズによって横並びにするコンテンツ数を変更する paddingとborderもwidthに含める width: 100%;にする floatの解除 フォントサイズもレスポンシブ化 最大の横幅を指定する 画面サイズによって横並…

すべての子要素にfloatが設定されていると、親要素の高さは0pxになってしまう。そのため、子要素の高さに合わせて親要素も設定してくれるようにfloatを解除しないといけない See the Pen 子要素がすべてfloatしていると親要素の高さは0px by tamago (@tamago…

レスポンシブデザインをするために必須のもの ブラウザの画面サイズに対応して、CSSのスタイルを変更したいときに使う 書き方 @media(条件) { /* 条件がTrue時に適用させるスタイル */ } CSSで@mediaというキーワードを使う。指定した条件がTrue時に適用させ…

ウェブアクセンシビリティを意識したWebアプリを作るときに使う！ アクセシビリティとは、特にWebサイト上における、情報やサービスへのアクセスのしやすさのことである。 アクセシビリティは、高齢者や障害者なども含めたあらゆる人が、どのような環境（う…

HTML5からはタグの中にdata-*属性といったような「独自データ属性」というものを定義できるらしい。data-*に遭遇したときには「自分で定義してる属性だー」って思えばいい JavaScriptからはHTMLElement.datasetプロパティでアクセスできる JavaScriptなどに…

zfitで折りたたみ zaで折りたたみ切り替え zRですべての折りたたみを解除 参考文献 Vim as a HTML Editor - Dark Matter in Cyberspace

以下の記事を見て、「すでにあるページを作ることで学べる」みたいなことが書いてあったから、やってみた 2018年の最先端フロントエンドエンジニアになろう - Qiita Twitterのログインページを書いてみることにした(HTMLのみ、CSSはまだ書いていない) 書いた…

HTML5で登場したタグ fieldsetはフォーム部品をまとめるために使う legendはそのまとまりのタイトル <form action=""> <fieldset disabled> <legend>注文依頼</legend> <div> 商品名：<input type="text" name="" id=""> </div> <div> 数量：<input type="text" name="" id=""> </div> </fieldset> </form> See the Pen fieldsetとlegend by tamago (@tamago324) on CodePen.

角を丸くするにはborder-radiusプロパティを使う Emmentのショーットカットはbdrs(border-radius) border-radius: 半径; 指定する値は半径となる また、４つの角それぞれで指定することもできる 値 説明 Emment border-radius すべての角、それぞれ指定 bdrs…

インラインボックスとブロックボックス 要素 ├── インラインボックス └── ブロックボックス ├── コンテンツに意味づけ └── 情報を整理・グループ化 インラインボックス 横並び display: inline; コンテンツがぎりぎり収まる大きさのボックス 主にテキストを…

letter-spacingで文字の間隔を設定できる。 .test1 { letter-spacing: 2px; } .test2 { letter-spacing: -2px; } デフォルトは0px マイナス値を設定すると、デフォルトの表示よりも間隔が狭くなる。 See the Pen 文字の間隔 by tamago (@tamago324) on CodeP…

中央に配置する widthを指定 marginの左右をautoに設定 .main { /* 横幅を指定 */ width: 100px; /* 中央に配置 */ margin: 0 auto; } See the Pen wmEavW by tamago (@tamago324) on CodePen. 参考文献 Progate

Python正規表現を使った置換 reモジュールのsub()メソッドを使った >>> import re >>> re.sub(r'aa', 'bb', 'aabbccdd') 'bbbbccdd' 検索する文字列はr'対象'という感じで書かないといけないことに注意する 参考文献 Pythonで文字列を置換する：replace(), r…

例えば、aタグでクリックできる範囲を親要素内にしたいとき display: block;とする See the Pen xWaKEM by tamago (@tamago324) on CodePen. displayをblockにすることで、親要素いっぱいに要素の範囲が広がる 参考文献 Progate

ボタンを押したときにへこんだように見せることがCSSで実現可能 ポイントは以下の3つだけ box-shadowで影をつける 押下時に、box-shadowを消す 押下時に、影の分だけ表示位置を下にずらす これだけでへこんでいるように見える！！ See the Pen ボタンを押し…

変数に代入したA関数をB関数に渡すときには()はつけない！！！ ()をつけると、関数の戻り値を渡すことになってしまうため、()はつけないこと 例）1秒ごとにhelloとコンソールに表示する const aa = () => { console.log('hello'); } setInterval(aa(), 1000)…