HTML
コーディング用のテキストエリアを簡単に実装できるライブラリを見つけたので使ってみた textareとリンクさせて使うのが一般的な気がするけど、今回はすでにある要素と置き換えるようにしてみた CodeMirror まずは、http://codemirror.net/ にアクセスしてダ…
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…
親要素の横幅いっぱいに表示しようと思ったときに、つまづいたのでメモ 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などに…
以下の記事を見て、「すでにあるページを作ることで学べる」みたいなことが書いてあったから、やってみた 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
ボタンを押したときにへこんだように見せることがCSSで実現可能 ポイントは以下の3つだけ box-shadowで影をつける 押下時に、box-shadowを消す 押下時に、影の分だけ表示位置を下にずらす これだけでへこんでいるように見える！！ See the Pen ボタンを押し…
XMLHttpRequestというオブジェクトを使うことによって、ページを更新しなくても、ページ内のデータを反映することができる ツイキャスのコメビュに使えそうだから、少し使ってみた 今回やったことは「ページ表示時にサーバーへリクエストし、サーバーでJSON…
marginは周りのボックスとの距離 marginの相殺 これのせいでややこしくなるらしい。今はよくわかっていない。 上下のmarginは重なることもある(条件が揃わないと重ならない) CSSのmarginとは？paddingとは？余白の指定方法まとめの4.marginの相殺にも書いて…
いちばんよくわかるHTML5&CSS3デザインきちんと入門 (Design&IDEA)のChapter6のsection4のめも div自体に意味はなく、要素をまとめたり、グループ化するために使われる デザインをもとにdivで囲むのではなく、情報のまとまりをもとにdivで囲む 見出しとその…
いちばんよくわかるHTML5&CSS3デザインきちんと入門 (Design&IDEA)のChapter6のSection2と3のまとめ ul：順序なしリスト ol：順序ありリスト リストにはデフォルトでCSSが設定されている。(デフォルトCSS) list-style-typeで・や番号がつく marginとpadding…
パンくずリストを作るにはリストを使う HTMLでの記述でのポイント olを使う CSSでの記述でのポイント インラインボックスにする：横並びになる 各要素の後ろに”»”をつける：階層になる 最後の要素だけ"»"はつけない "»"は好きなものに変えられる .breadcrumb…
これに関してはあまり理解できていないと思う。(2018/3/19) floatとoverflowの2つのプロパティを使って、実装する Emmentでは以下のようになる .float-clear>.float-box,p .float-clear { overflow: hidden; } .float-box { float: left; } <div class="float-clear"> <div class="float-box"> <img src="google.com" alt=""> </div> <p>回り込み回り</p></div>…
imgタグをaタグで囲むだけ a>img <a href="http://google.com"> <img src="google.jpg" alt="Googleへ"> </a> 画像の下のテキストも含めてリンクとする 画像だけだと、それがリンクなのかがわからないため、テキストを表示するとよい aタグの中にテキストを表示することで、画像とテキストがリンクになる a>div>img<p <a href="http://google.com"> <div> <img src="google.jpg" alt="Googleへ"> </div> <p>Googleへ行く</p> </a>…
imgタグを使うことで画像を表示できる <img src="画像のパス" alt="画像が表示できなかった場合に表示するテキスト" width="横幅" height="高さ"> 例) <img src="images/asakusa.jpg" alt="浅草の風景" width="900", height="600"> width属性とheight属性 画面サイズによって画像のサイズを変えることが多いため、widthとheightは指定しないらしい？ 画像の表示サイズはできるだけ指定するようにしましょう。画像サイズを指定することで、画像…
リンクを作成するにはaタグを使う。 リンクのテキストはaタグの開始タグと終了タグの間に記述する リンク先のURLはhref属性に書く 別タブで開くにはtarget属性に_blankをつける
Google Maps APIというもので簡単にGoogle Mapを表示できるらしいからやってみた！ 今回は「Google Maps Embed API」を使って表示してみる。 JavaScriptを使う「Google Maps JavaScript API」もあるらしい。 4つのモード Google Maps を表示するときは4つモ…
bタグとstrongタグの使い分けの仕方 bタグ：重要ではないか太字にしたい strongタグ：重要な部分 参考文献 いちばんよくわかるHTML5&CSS3デザインきちんと入門 (Design&IDEA)作者: 狩野祐東出版社/メーカー: SBクリエイティブ発売日: 2016/10/27メディア: 単…
