HTML&CSS CSSでクリッピングマスクを使う方法
CSSでマスキングするにはクリピングマスクを使うことができます。
指定した要素にCSSで図形を描いて重ねることで、その図形以外の部分が非表示になります。
E { clip-path: shape }
shapeはcircle(...
HTML&CSS 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に代わってコンポーネントなどのレイアウトの中心的な存在になってきたと思われます。
ネット上にも団...
HTML&CSS 簡単にローカルなSASS環境構築
SASSを毎日使用するような人は自分にあった環境を作り込んでいると思います。けれども時々使いたい場合、Gulpで環境作るのは面倒だし、エディタに設定していたはずのものがなぜかうまく動かないなどと困った場合に、手軽にローカルな環境構築をする方...
JavaScript 自作関数について〜モダンなJavaScript
FUNCTION関数
JavaScriptの自作関数はfunction statementで定義します。
functionキーワードと、関数の名前、引数は丸括弧でくくり、カンマで区切ります。そして命令文は波括弧 { } でくくります。
...
JavaScript ループ文〜モダンなJavaScript
ループ文は繰り返し何かを実行するために必須のアルゴリズムです。JavaScriptで利用可能なループ処理を学習します。
for文
for文によるループは、指定された条件が「false」と評価されるまで繰り返されます。
基本...
JavaScript Dateオブジェクトの使い方〜モダンなJavaScript
Dateオブジェクトについて
JavaScript には日付のためのデータ型がありません。そのため、日付を取り扱うためのには、「Date オブジェクト」を使います。
「Date オブジェクト」は日付の設定、取得、操作を行うメソッドがあり...
JavaScript オブジェクトリテラルの使い方〜モダンなJavaScript
オブジェクトリテラルの使い方
オブジェクトリテラルの作成
オブジェクトリテラルを作成するには{}で囲みます。値の記述方法は配列に似ていますが、インデックス番号の代わりにプロパティ名を明示する必要があります。他のプログラミング言語では連想...