JavaScript DOM操作まとめ〜JavaScript JavaScriptでDOM操作を行うまとめです。 JavaScriptの「Documentインターフェイス」はJavaScriptが記述、または読み込まれたHTMLのノード情報を保有しています。そのため、console.log(do... 2018.10.19 JavaScriptlecture
JavaScript ES6で classを使う方法 JavaScriptにはclassの概念がありませんでした。オブジェクト指向はprototypeを使ってそれらしいことを行なっているのですが、他言語をマスターした人にとっては奇々怪界なものです。 しかしながらES6ではclassの仕組みが... 2018.10.17 JavaScriptlecture
JavaScript 変数の宣言 letとconstの使い方〜モダンなJavaScript 変数宣言のキーワード モダンなJavaScriptでは変数宣言する場合、「var」,「let」,「const」を使えるようになりました。 旧来よりJavaScriptで変数を宣言する場合は、「var」キーワードが使われてきました。そして... 2018.10.15 JavaScriptlecture
HTML&CSS CSSで立体的に回転するカードの作り方 div要素などで作成されたカード型のグリッドをマウスホバーで回転させる仕組みです。 回転はy軸を基準に回転して表面と裏面を入れ替えるもので、この仕組みをCSSで実現します。 完成サンプル GitHubソース カードの作成... 2018.10.09 HTML&CSSlecture
HTML&CSS CSS〜 object-fitでアスペクト比を保持しながら画像を拡大縮小 HTMLのimgタグで挿入した画像を拡大縮小をするには、img要素に対して「width:100%」とすればアスペクト比を保ちながら拡大縮小を行うことができます。このような仕組みの画像のことをフルードイメージと言います。 フルードイメージは... 2018.10.05 HTML&CSSlecture
HTML&CSS CSSでクリッピングマスクを使う方法 CSSでマスキングするにはクリピングマスクを使うことができます。 指定した要素にCSSで図形を描いて重ねることで、その図形以外の部分が非表示になります。 E { clip-path: shape } shapeはcircle(... 2018.10.03 HTML&CSSlecture
HTML&CSS headerのコーディング例〜CSS シンプルなヘッダー領域のコーディング例です。古典的な手法からFlexBoxを活用した方法の例です。 古典的な方法 要素を水平方向に中央揃えする方法は簡単に行えます。 例えばdisplay:blockの要素なら、幅を決めてから左右の... 2018.10.01 HTML&CSSlecture
HTML&CSS CSSグリッドの基本〜display:gridの使い方 Grid layoutについて これまでのfloatレイアウトで複雑なレイアウトを作成する場合には、divタグを多用するなどトリッキーな作業が必要でした。CSS3ではFlexレイアウトが開発され、フレキシブルなレイアウトが柔軟に作成できる... 2018.09.26 HTML&CSSlecturenote_web
HTML&CSS CSS flex〜チートシート(動画あり) flexBoxの主軸と交差軸についての動画 FlexBoxのプロパティと値をまとめたものです。 FlexBoxもfloatに代わってコンポーネントなどのレイアウトの中心的な存在になってきたと思われます。 ネット上にも団... 2018.09.18 HTML&CSSlectureWeb動画動画
JavaScript 自作関数について〜モダンなJavaScript FUNCTION関数 JavaScriptの自作関数はfunction statementで定義します。 functionキーワードと、関数の名前、引数は丸括弧でくくり、カンマで区切ります。そして命令文は波括弧 { } でくくります。 ... 2018.09.12 JavaScriptlecture