TIL

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

型の取得 - JavaScript

typeofで取得できる > typeof "aa"; < "string" > typeof 1; < "number" 参考文献 JavaScriptの「型」の判定について - Qiita

要素の削除 - JavaScript

要素を削除するには2通りあるらしい(今のところ知っている範囲だと) removeChild():親要素から子要素を削除する remove():自分自身を削除する 例)child1というidをもった要素を削除したいとき removeChild() 親要素を取得し、子要素である自分を削除する…

自動補完(Autocomplete)の追加

エディタのいろいろな設定 CodeMirror - JavaScript - TIL の続き www.youtube.com 自動補完機能はaddonを使うことで実装できる。でも、CSSとJavaScriptとHTMLだけなのかな? addonフォルダ内にアドオンは入っている。ダウンロードしたフォルダに入っているa…

エディタのいろいろな設定 CodeMirror - JavaScript

テーマの設定 CodeMirror - JavaScript - TIL の続き www.youtube.com コンストラクタに渡すことで簡単にいろいろな設定ができる タブのサイズの設定 tabSizeで指定できる。デフォルトは4 tabSize: integer 例)タブのサイズを8に設定 const conf = { tabSiz…

テーマの設定 CodeMirror - JavaScript

シンタックスハイライトの設定 CodeMirror - JavaScript - TIL の続き www.youtube.com この動画を見て、実際にテーマの変更をしてみた すごい簡単にできてびっくりした themeフォルダにテーマ(.cssファイル)は格納されている 以下のようにthemeフォルダをコ…

シンタックスハイライトの設定 CodeMirror - JavaScript

それっぽいテキストエディタを簡単に実装 CodeMirror - JavaScript - TIL の続き www.youtube.com この動画でCodeMirrorのエディタのシンタックスハイライトの設定を学んだ フォルダ構造は以下のようになっている . ├── index.html ├── lib └── mode シンタ…

それっぽいテキストエディタを簡単に実装 CodeMirror - JavaScript

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

CodeMirrorを使ってみた - JavaScript

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

ある要素の前に追加 insertBefore - JavaScript

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

classを操作 - JavaScript

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

親要素の取得 - JavaScript

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 - ユニトピ -

タブの表示 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…

イベントの追加 addEventListener() - JavaScript

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

イベントのキャンセル 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…

比率を変えずに画像をいっぱいに表示 - CSS

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

role属性 - HTML

そのタグの役割が何なのかを明示することができる 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…

autocapitalize属性 - HTML

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

レスポンシブデザインで気にすること - HTML

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

floatの解除 - HTML

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

メディアクエリ(@media) - HTML

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

aria-labelについて - HTML

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

data-*属性 - HTML

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

タグの折りたたみ - Vim

vim

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

Twitterのログインページを書いてみた - HTML

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

fieldsetとlegend - HTML

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 - CSS

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

ボックス - CSS

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