TIL

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

CSS

ぷるんと回転するアニメーションの実装(写経して改良) - CSS

ぷるんと回転するアニメーションを写経して、改良してみた See the Pen ぷるんと回転 by tamago (@tamago324) on CodePen. サンプルではmatrix3d()で実装されていたが、matrix()でもいいんじゃないかと思ってmatrix()で実装し直してみた その次に、rotateで…

【Gulp】インストールからSassのコンパイルまで - CSS

SassのコンパイルをするときにGulpというものを使うといいって聞いたことあるからインストールとコンパイルを行ってみた Gulpはめんどくさいことを自動で行ってくれたりするらしい。 環境 コンパイル プロジェクト設定ファイルの作成 SCSS記法のSassのコンパ…

transitionについてのメモ

CSS

transitionとは プロパティを変更するときにどのように変化させるかを設定できるプロパティ! .boxに定義された値・・・transitionのスタート値 .box:hoverに定義された値・・・transitonのゴール値 CSSアニメーションの基礎【Transitionを使ってみる】 | キ…

Wi-Fiハンカチ(青海波柄)を作ったとき知ったこと - CSS

codepen.io これを作ったときに知ったことを書いていく ソース wihte-space: nowrap;で折り返しをしない :nth-child()を使うことで指定の要素にスタイルを適用できる box-shadowのinsetで内側に影を作れる border-radius: 50%;で円を作れる z-indexが効かな…

z-index がきかないとき - CSS

CSS

position: relativeをつける 参考文献 css 重なり z-index 効かない 解決法 - Qiita

指定の子要素に対してスタイルを適用 nth-child - CSS

CSS

nth-childを使うことで「2番目だけ」とか「5番目以降」にスタイルを適用するみたいなのができるようになる。 偶数番目の要素だけとか!! nth-childはセレクタに追加して条件を指定する擬似クラスのひとつで、子要素のn番目(nth)にスタイルを適用させること…

線形グラデーション linear-gradient関数 - CSS

CSS

グラデーションの表示をするにはlinear-gradient関数を使う。 cssアニメーションでグラデーションをしようとしていたときに見つけたこのサイトで知った このlinear-gradientは線形グラデーションと呼ばれるらしい。他には円形グラデーション(radial-gradient…

1つだけ右寄せでそれ以外は左寄せ flex - CSS

CSS

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…

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)…