JavaScript ES6で classを使う方法
JavaScriptにはclassの概念がありませんでした。オブジェクト指向はprototypeを使ってそれらしいことを行なっているのですが、他言語をマスターした人にとっては奇々怪界なものです。
しかしながらES6ではclassの仕組みが...
JavaScript JavaScript 変数の宣言 letとconstの使い方〜モダンなJavaScript
変数宣言のキーワード
モダンなJavaScriptでは変数宣言する場合、「var」,「let」,「const」を使えるようになりました。
旧来よりJavaScriptで変数を宣言する場合は、「var」キーワードが使われてきました。そして...
HTML&CSS CSSのbackground-clipでテキストをグラデーションに
CSSのbackground-clipでテキストをグラデーション加工することができます。
本来は「background-clip」プロパティは、要素の背景がcolor又はimageの時、境界の下まで拡張するかどうかを指定するものです。
...
HTML&CSS CSSで立体的に回転するカードの作り方
div要素などで作成されたカード型のグリッドをマウスホバーで回転させる仕組みです。
回転はy軸を基準に回転して表面と裏面を入れ替えるもので、この仕組みをCSSで実現します。
完成サンプル
GitHubソース
カードの作成...
HTML&CSS CSS〜 object-fitでアスペクト比を保持しながら画像を拡大縮小
HTMLのimgタグで挿入した画像を拡大縮小をするには、img要素に対して「width:100%」とすればアスペクト比を保ちながら拡大縮小を行うことができます。このような仕組みの画像のことをフルードイメージと言います。
フルードイメージは...
HTML&CSS CSSでクリッピングマスクを使う方法
CSSでマスキングするにはクリピングマスクを使うことができます。
指定した要素にCSSで図形を描いて重ねることで、その図形以外の部分が非表示になります。
E { clip-path: shape }
shapeはcircle(...
HTML&CSS headerのコーディング例〜CSS
シンプルなヘッダー領域のコーディング例です。古典的な手法からFlexBoxを活用した方法の例です。
古典的な方法
要素を水平方向に中央揃えする方法は簡単に行えます。
例えばdisplay:blockの要素なら、幅を決めてから左右の...
HTML&CSS CSSグリッドの基本〜display:gridの使い方
Grid layoutについて
これまでのfloatレイアウトで複雑なレイアウトを作成する場合には、divタグを多用するなどトリッキーな作業が必要でした。CSS3ではFlexレイアウトが開発され、フレキシブルなレイアウトが柔軟に作成できる...
HTML&CSS CSS グリッドレイアウトでコーディングするならFirefoxを使おう〜display:grid
display:gridでレイアウトするのが標準になる日も近いと思います。
さて、開発する際の検証はChromeを使う場合が多いと思いますが、グリッドレイアウトに限ってはFirefoxが強力です。
一度試してみると良いでしょう。
...
HTML&CSS CSS flex〜チートシート(動画あり)
flexBoxの主軸と交差軸についての動画
FlexBoxのプロパティと値をまとめたものです。
FlexBoxもfloatに代わってコンポーネントなどのレイアウトの中心的な存在になってきたと思われます。
ネット上にも団...