TIL

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

CSS

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…

親要素の横幅いっぱいに表示 - 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 縦…

floatの解除 - HTML

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

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

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

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; コンテンツがぎりぎり収まる大きさのボックス 主にテキストを…

文字の間隔 letter-spacing - CSS

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

ブロック要素を左右の中央に配置 - CSS

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

インラインブロックを親要素いっぱいに範囲を広げる - CSS

CSS

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

ボタンをへこませる - CSS

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

背景画像のスクロール設定 background-attachment - CSS

CSS

background-attachmentスクロール時に背景画像もスクロールするかどうかを設定できる。 指定できる値 fixed:スクロールしても画像はスクロールしない scroll:スクロールに合わせて画像もスクロールする デフォルト値はscroll 実際にfixedを指定してスクロ…

背景に画像を設定する background-image - CSS

CSS

背景画像のパスを指定する。url()を使って、パスを指定する .main { background-image: url(../../images/ponta.jpg); } 相対パスで指定する場合、CSSを外部ファイルに記述しているときにはCSSからの相対パスになることに注意 設定できる値 URL:画像のURL n…

画像の表示位置の設定 background-position - CSS

CSS

background-positionプロパティを使うことで画像を表示する開始位置を設定できる。 background-repeat: no-repeat;のときに使うことが多いらしい。 background-position: xの位置 yの位置;と記述する 値の指定方法 値の指定方法は3つある キーワードで指定 …

背景画像の繰り返し background-repeatプロパティ - CSS

CSS

背景画像の繰り返し表示の設定をする。 指定できる値 値 説明 repeat 縦横に繰り返し表示 repeat-x 横に繰り返し表示 repeat-y 縦に繰り返し表示 no-repeat 繰り返し表示しない デフォルト値はrepeatになっている。 参考文献 background-repeat - CSS | MDN …

背景色を変える background-colorプロパティ - CSS

CSS

背景色を変えるにはbackground-colorプロパティを使う。 .main { background-color: #fafafa; } 値にtransparentを設定すると透過色という意味になる。 .main { background-color: transparent; } 色を透過するとき 背景色と文字を透過:opacityプロパティを…

透明度を指定する opacityプロパティ - CSS

CSS

opacityプロパティは要素全体の透明度を設定できる 文字色を透過したい場合には色を設定するときにrgbaで設定する。 設定する値 0〜1の数値を設定する。0に近づくほど透明になる。初期値は1になっている。 例)少し透過する .main { opacity: 0.8; } 参考文献…

回り込みをさせない - CSS

横並びにして、回り込みをさせないようにしたい!! 結論 overflow: auto;を使う!! イメージこんな感じ アイコンの下の部分にはテキストが回りこないようにしたい まずは失敗例から 失敗例 See the Pen 回り込みをさせない(悪い例) by tamago (@tamago324)…

marginについて - CSS

marginは周りのボックスとの距離 marginの相殺 これのせいでややこしくなるらしい。今はよくわかっていない。 上下のmarginは重なることもある(条件が揃わないと重ならない) CSSのmarginとは?paddingとは?余白の指定方法まとめの4.marginの相殺にも書いて…

リストの使い方

いちばんよくわかるHTML5&CSS3デザインきちんと入門 (Design&IDEA)のChapter6のSection2と3のまとめ ul:順序なしリスト ol:順序ありリスト リストにはデフォルトでCSSが設定されている。(デフォルトCSS) list-style-typeで・や番号がつく marginとpadding…

パンくずリスト(ナビゲーション)を作る

パンくずリストを作るにはリストを使う HTMLでの記述でのポイント olを使う CSSでの記述でのポイント インラインボックスにする:横並びになる 各要素の後ろに”»”をつける:階層になる 最後の要素だけ"»"はつけない "»"は好きなものに変えられる .breadcrumb…

リンクにカーソルが重なったときだけ下線を引く

text-decorationプロパティを使う a { text-decoration: none; } a:hover { text-decoration: underline; } カーソルが重なったときだけ、下線を引くようにしている! 色を変えるとかもするといいのかもね! See the Pen MVJLGW by tamago (@tamago324) on C…

画像の周りにテキストを表示する - CSS

これに関してはあまり理解できていないと思う。(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>…

画像にリンクを付ける - HTML

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タグ - HTML

imgタグを使うことで画像を表示できる <img src="画像のパス" alt="画像が表示できなかった場合に表示するテキスト" width="横幅" height="高さ"> 例) <img src="images/asakusa.jpg" alt="浅草の風景" width="900", height="600"> width属性とheight属性 画面サイズによって画像のサイズを変えることが多いため、widthとheightは指定しないらしい? 画像の表示サイズはできるだけ指定するようにしましょう。画像サイズを指定することで、画像…

疑似要素 - CSS

CSS

::afterみたいなものを擬似要素という。 疑似要素 (Pseudo-elements) - CSS | MDN ::after: 選択した要素の後ろに装飾を行う ::before: 選択した要素の前に装飾を行う contentプロパティを使って、装飾する内容を設定する 例)メインとサブにそれぞれ装飾を…