CSS
テーブルにtable-layout: fixedをやると横幅がうまく設定できた .sample-table { table-layout: fixed; } 参考文献 tableでwidthを指定しても幅が固定されない場合の対処法|クロノドライブ
ぷるんと回転するアニメーションを写経して、改良してみた See the Pen ぷるんと回転 by tamago (@tamago324) on CodePen. サンプルではmatrix3d()で実装されていたが、matrix()でもいいんじゃないかと思ってmatrix()で実装し直してみた その次に、rotateで…
SassのコンパイルをするときにGulpというものを使うといいって聞いたことあるからインストールとコンパイルを行ってみた Gulpはめんどくさいことを自動で行ってくれたりするらしい。 環境 コンパイル プロジェクト設定ファイルの作成 SCSS記法のSassのコンパ…
transitionとは プロパティを変更するときにどのように変化させるかを設定できるプロパティ! .boxに定義された値・・・transitionのスタート値 .box:hoverに定義された値・・・transitonのゴール値 CSSアニメーションの基礎【Transitionを使ってみる】 | キ…
codepen.io これを作ったときに知ったことを書いていく ソース wihte-space: nowrap;で折り返しをしない :nth-child()を使うことで指定の要素にスタイルを適用できる box-shadowのinsetで内側に影を作れる border-radius: 50%;で円を作れる z-indexが効かな…
position: relativeをつける 参考文献 css 重なり z-index 効かない 解決法 - Qiita
nth-childを使うことで「2番目だけ」とか「5番目以降」にスタイルを適用するみたいなのができるようになる。 偶数番目の要素だけとか!! nth-childはセレクタに追加して条件を指定する擬似クラスのひとつで、子要素のn番目(nth)にスタイルを適用させること…
グラデーションの表示をするにはlinear-gradient関数を使う。 cssアニメーションでグラデーションをしようとしていたときに見つけたこのサイトで知った このlinear-gradientは線形グラデーションと呼ばれるらしい。他には円形グラデーション(radial-gradient…
flexでタイトルの通りのことをしたい こんな感じ 右寄せしたい要素にmargin-left; auto;とする!!! 左のmarginが自動になって、右寄せになる感じ! <div class="parent"> <div class="child"></div> <div class="child"></div> <div class="child f-right"></div> </div> .parent { display: flex; background-color: rgba(200, 200, 200, 0.8); } .child { background-col…
コーディング用のテキストエリアを簡単に実装できるライブラリを見つけたので使ってみた textareとリンクさせて使うのが一般的な気がするけど、今回はすでにある要素と置き換えるようにしてみた CodeMirror まずは、http://codemirror.net/ にアクセスしてダ…
CSSだけでタブを表示するやつを昨日書いたけど、他にもいい方法がないか探していたところ、JavaScriptで追加し他要素にも対応できそうな書き方があったため、実装してみた ↓昨日書いたやつ タブの表示 - CSS - TIL See the Pen dmEGry by tamago (@tamago324…
こっちの書き方のほうが好き タブの表示 2 - 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…
親要素の横幅いっぱいに表示しようと思ったときに、つまづいたのでメモ 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 縦…
すべての子要素にfloatが設定されていると、親要素の高さは0pxになってしまう。そのため、子要素の高さに合わせて親要素も設定してくれるようにfloatを解除しないといけない See the Pen 子要素がすべてfloatしていると親要素の高さは0px by tamago (@tamago…
レスポンシブデザインをするために必須のもの ブラウザの画面サイズに対応して、CSSのスタイルを変更したいときに使う 書き方 @media(条件) { /* 条件がTrue時に適用させるスタイル */ } CSSで@mediaというキーワードを使う。指定した条件がTrue時に適用させ…
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: 半径; 指定する値は半径となる また、4つの角それぞれで指定することもできる 値 説明 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
例えば、aタグでクリックできる範囲を親要素内にしたいとき display: block;とする See the Pen xWaKEM by tamago (@tamago324) on CodePen. displayをblockにすることで、親要素いっぱいに要素の範囲が広がる 参考文献 Progate
ボタンを押したときにへこんだように見せることがCSSで実現可能 ポイントは以下の3つだけ box-shadowで影をつける 押下時に、box-shadowを消す 押下時に、影の分だけ表示位置を下にずらす これだけでへこんでいるように見える!! See the Pen ボタンを押し…
background-attachmentスクロール時に背景画像もスクロールするかどうかを設定できる。 指定できる値 fixed:スクロールしても画像はスクロールしない scroll:スクロールに合わせて画像もスクロールする デフォルト値はscroll 実際にfixedを指定してスクロ…
背景画像のパスを指定する。url()を使って、パスを指定する .main { background-image: url(../../images/ponta.jpg); } 相対パスで指定する場合、CSSを外部ファイルに記述しているときにはCSSからの相対パスになることに注意 設定できる値 URL:画像のURL n…
background-positionプロパティを使うことで画像を表示する開始位置を設定できる。 background-repeat: no-repeat;のときに使うことが多いらしい。 background-position: xの位置 yの位置;と記述する 値の指定方法 値の指定方法は3つある キーワードで指定 …
背景画像の繰り返し表示の設定をする。 指定できる値 値 説明 repeat 縦横に繰り返し表示 repeat-x 横に繰り返し表示 repeat-y 縦に繰り返し表示 no-repeat 繰り返し表示しない デフォルト値はrepeatになっている。 参考文献 background-repeat - CSS | MDN …
背景色を変えるにはbackground-colorプロパティを使う。 .main { background-color: #fafafa; } 値にtransparentを設定すると透過色という意味になる。 .main { background-color: transparent; } 色を透過するとき 背景色と文字を透過:opacityプロパティを…
opacityプロパティは要素全体の透明度を設定できる 文字色を透過したい場合には色を設定するときにrgbaで設定する。 設定する値 0〜1の数値を設定する。0に近づくほど透明になる。初期値は1になっている。 例)少し透過する .main { opacity: 0.8; } 参考文献…