HTML&CSS

CSSグリッドの基本〜display:gridの使い方

Grid layoutについて これまでのfloatレイアウトで複雑なレイアウトを作成する場合には、divタグを多用するなどトリッキーな作業が必要でした。CSS3ではFlexレイアウトが開発され、フレキシブルなレイアウトが柔軟に作成できるようになりました。けれども、Flexboxによる方法も所詮は1  >>続きを読む

CSS グリッドレイアウトでコーディングするならFirefoxを使おう〜display:grid

display:gridでレイアウトするのが標準になる日も近いと思います。 さて、開発する際の検証はChromeを使う場合が多いと思いますが、グリッドレイアウトに限ってはFirefoxが強力です。 一度試してみると良いでしょう。 Firefoxの検証画面を開いて、レイアウト項目を選択します。ライン番  >>続きを読む

CSS flex〜チートシート

FlexBoxのプロパティと値をまとめたものです。 FlexBoxもfloatに代わってコンポーネントなどのレイアウトの中心的な存在になってきたと思われます。 ネット上にも団子の串刺しのようなイラストが乱立しているようです。まずはプロパティの動きを覚えましょう。 しかし、FlexBoxのキモはfle  >>続きを読む

簡単にローカルなSASS環境構築

SASSを毎日使用するような人は自分にあった環境を作り込んでいると思います。けれども時々使いたい場合、Gulpで環境作るのは面倒だし、エディタに設定していたはずのものがなぜかうまく動かないなどと困った場合に、手軽にローカルな環境構築をする方法です。 ローカルですから対象のフォルダ内だけ有効になります  >>続きを読む

自作関数について〜モダンなJavaScript

FUNCTION関数 JavaScriptの自作関数はfunction statementで定義します。 functionキーワードと、関数の名前、引数は丸括弧でくくり、カンマで区切ります。そして命令文は波括弧 { } でくくります。 デフォルト引数を指定したい場合は次のようにif文を使用して記述し  >>続きを読む

ループ文〜モダンなJavaScript

ループ文は繰り返し何かを実行するために必須のアルゴリズムです。JavaScriptで利用可能なループ処理を学習します。 for文 for文によるループは、指定された条件が「false」と評価されるまで繰り返されます。 基本的なfor文 for(let i = 0; i < 10; i++){ con  >>続きを読む

Dateオブジェクトの使い方〜モダンなJavaScript

Dateオブジェクトについて JavaScript には日付のためのデータ型がありません。そのため、日付を取り扱うためのには、「Date オブジェクト」を使います。 「Date オブジェクト」は日付の設定、取得、操作を行うメソッドがありますので、その使い方を覚えましょう。 Date オブジェクト生成  >>続きを読む

オブジェクトリテラルの使い方〜モダンなJavaScript

オブジェクトリテラルの使い方 オブジェクトリテラルの作成 オブジェクトリテラルを作成するには{}で囲みます。値の記述方法は配列に似ていますが、インデックス番号の代わりにプロパティ名を明示する必要があります。他のプログラミング言語では連想配列と呼ばれる方法です。 オブジェクトリテラルのプロパティ名を&  >>続きを読む

Anacondaのインストール〜Macでバージョン管理付き

Mac環境でAnacondaをバージョン管理付きでインストールする方法です。 すでにHomebrewがインストールされていることが条件です。 **pyenvでインストールした場合、Anaconda Navigatorから「Open terminal」でターミナルを開いてプラグインを導入するときに失敗  >>続きを読む