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

JavaScriptでの関数について、知ったこと 可変長引数 ファーストクラスファンクション アロー関数 コールバック関数と高級関数