JavaScript DOM操作まとめ〜JavaScript
JavaScriptでDOM操作を行うまとめです。
JavaScriptの「Documentインターフェイス」はJavaScriptが記述、または読み込まれたHTMLのノード情報を保有しています。そのため、console.log(do...
lecture
JavaScript JavaScript ES6で classを使う方法
JavaScriptにはclassの概念がありませんでした。オブジェクト指向はprototypeを使ってそれらしいことを行なっているのですが、他言語をマスターした人にとっては奇々怪界なものです。
しかしながらES6ではclassの仕組みが...
JavaScript 変数の宣言 letとconstの使い方〜モダンなJavaScript
変数宣言のキーワード
モダンなJavaScriptでは変数宣言する場合、「var」,「let」,「const」を使えるようになりました。
旧来よりJavaScriptで変数を宣言する場合は、「var」キーワードが使われてきました。そして...
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 flex〜チートシート(動画あり)
flexBoxの主軸と交差軸についての動画
FlexBoxのプロパティと値をまとめたものです。
FlexBoxもfloatに代わってコンポーネントなどのレイアウトの中心的な存在になってきたと思われます。
ネット上にも団...
JavaScript 自作関数について〜モダンなJavaScript
FUNCTION関数
JavaScriptの自作関数はfunction statementで定義します。
functionキーワードと、関数の名前、引数は丸括弧でくくり、カンマで区切ります。そして命令文は波括弧 { } でくくります。
...