JavaScript

Vue.jsの基本(3)computedとmethodsの違い

Vue.jsの基本(1)Vue.jsの基本的な使い方 Vue.jsの基本(2)dataプロパティについて Vue.jsの基本(3)computedとmethodsの違い Vue.jsの基本(4)監視プロパティについて Vue.jsの基本(5)コンポーネント作成 Vue.jsの基本(6)親コンポーネン  >>続きを読む

Vue.jsの基本(2)dataプロパティについて

Vue.jsの基本(1)Vue.jsの基本的な使い方 Vue.jsの基本(2)dataプロパティについて Vue.jsの基本(3)computedとmethodsの違い Vue.jsの基本(4)監視プロパティについて Vue.jsの基本(5)コンポーネント作成 Vue.jsの基本(6)親コンポーネン  >>続きを読む

CSS shape-outsideプロパティを使ってみよう

画像に対してfloatをかけて、テキストを流し込みをする場合、通常の写真なら特に問題はないのですが、画像の形を丸くした場合テキストもその円形に沿わせたくなります。 下図参照 このようにするには「shape-outsideプロパティ」を使います。 まず、画像を円形にするにはCSSのプロパティで「bor  >>続きを読む

色々なWindow Object 〜モダンなJavaScript

高さと幅の取得 知っておくと便利に使えるWindow Objectのまとめです。 ブラウザウィンドウの外側の高さと幅 「window.outerHeight」 はブラウザウィンドウの外側の高さを取得します。外側とはツールバー、ウィンドウ chrome を含む、ブラウザウィンドウ全体の高さのことです。  >>続きを読む

DOM操作まとめ〜JavaScript

JavaScriptでDOM操作を行うまとめです。 JavaScriptの「Documentインターフェイス」はJavaScriptが記述、または読み込まれたHTMLのノード情報を保有しています。そのため、console.log(document)でDOM情報を見ることができます。 console.  >>続きを読む

ES6で classを使う方法

JavaScriptにはclassの概念がありませんでした。オブジェクト指向はprototypeを使ってそれらしいことを行なっているのですが、他言語をマスターした人にとっては奇々怪界なものです。 しかしながらES6ではclassの仕組みが用意されました。とはいえ根本的に他の言語のようなclassの仕  >>続きを読む

変数の宣言 letとconstの使い方〜モダンなJavaScript

変数宣言のキーワード モダンなJavaScriptでは変数宣言する場合、「var」,「let」,「const」を使えるようになりました。 旧来よりJavaScriptで変数を宣言する場合は、「var」キーワードが使われてきました。そしてES6から「let」,「const」が使えるようになりました。モ  >>続きを読む

CSSのbackground-clipでテキストをグラデーションに

CSSのbackground-clipでテキストをグラデーション加工することができます。 本来は「background-clip」プロパティは、要素の背景がcolor又はimageの時、境界の下まで拡張するかどうかを指定するものです。 ところが、この値には「text」があり、この値を設定するとテキス  >>続きを読む

CSSで立体的に回転するカードの作り方

div要素などで作成されたカード型のグリッドをマウスホバーで回転させる仕組みです。 回転はy軸を基準に回転して表面と裏面を入れ替えるもので、この仕組みをCSSで実現します。 完成サンプル GitHubソース カードの作成 簡単な赤の300 x 500pxのカードを作成します。 <div cla  >>続きを読む