-
Reactにスタイルを当てる|React
当てる方法はいくつかある。 従来のHTML+CSS形式 classを設定してスタイルを適用する。 ただしclassが予約語のため使用できない。JSX中ではclassをclassNameと記述すればclassとして適用され […] -
CSS Grid Layout|省略記法|CSS
以下の記事において、CSS Grid Layoutはまずグリッドを定義して、それに基づいて各コンテンツをグリッドにはめ込んでいく形での指定方法を書いた。 上記はgrid-templateというプロパティを用いるとかなり省 […] -
CSS Grid Layout|CSS
以下の記事を参考にCSS Grid Layoutを触ってみた HTMLサンプル CSS グリッドラインの定義 CSS Gridではまず基準となるグリッドを定義する。 グリッドを幅で定義して、その境目を線と見立てて後の定義 […] -
React学習|StateとProps|React
State React.Componentで状態データを保持する変数。オブジェクトとして様々な値を持たせることができる。 setState()というメソッドを用いてプロパティを変更すると、その変更を検知して再レンダリング […] -
React学習|コンポーネント|React
ソースの一部を切り出してコンポーネント化することができる。 切り出し前ファイル 例として以下のソースからLayoutクラスを切り出して別ファイルにする。 コンポーネント用のファイルを作成。 コマンドで書いたけど普通にFi […] -
React学習|JSX|React
JSX ReactではhtmlをJSXでjs内に記述する。 複数のタグを最上位に記述することはできない。以下の記述はエラーとなる。 以下のようにラップするタグがあって、それが一つであればOK 変数、数式、関数などを{}で […] -
React学習|環境の下準備|React
下記ページを参考にまずはチュートリアル ほとんど参考サイトそのままになるが、記録のためにターミナルから入力した操作を転記。 下準備 フォルダ作成 react-turotrialというフォルダを作成し、その中にsrc/js […] -
PageSpeed Insightsの数値改善|WordPress
現在個人で運用中の八重山ブログのPageSpeed Insightsの数値改善を試みた記録 改善前 PCの数値 PCはそれほど悪くはない感じ SPの数値 SPはあまりよくない 改善策 サーバ変更 現行のさくらからCono […] -
vue-slickにyoutube|Vue
vue-slickにスライドの一つとしてyoutubeを埋め込む方法 動いたソースの必要箇所抜粋 実際に使用しているソースからの抜粋。 保存された画像一覧からデータを読み出してslickで展開する処理の一番うしろにyou […] -
thisについて|webpack
Javascriptのアロー関数について勉強していて、thisの取り扱いがよくわからなかったのでメモ。 thisの参照先 アロー関数はthisの束縛という言葉で表現される、関数を定義した時点でのthisの値を保持するとい […]