Gutenbergで気になるポイント1〜WordPress

CSS Gridの導入 「ブロックをインタラクションのパラダイム (枠組み) として受け入れる」と本家がいうようにブロックでレイアウトしていくことができます。その辺の仕組みは多くのライターの人が書くでしょうからそちらを見  >>続きを読む

Pythonでスクレイピング(3)seleniumで画像収集

特定の要素を取得できるようになったら、Pythonの画像処理ライブラリ「Pillow」を使った画像の収集を行ってみましょう。 簡単な画像の読み込み方法 Jupyter notebookのファイルと同じフォルダにサンプル画  >>続きを読む

Pythonでスクレイピング(2)seleniumの使い方

seleniumとブラウザ用driverを導入します。ブラウザはChromeを使用する事とします。 情報収集するサンプルページ

seleniumを使った要  >>続きを読む

JavaScript,PHP,Pythonの型についてまとめ

JavaScriptの型 プリミティブデータ型 真偽値 (boolean) null値 (Null) 未定義 (Undefined) 数値 (Number) 文字列 (String) シンボル (Symbol (ECMA  >>続きを読む

click()の使い方〜JavaScript

jQueryでクリックイベントを設置するには、on()を使ったりclick()を使ったりします。 今回はclick()の使い方の説明です。 通常、click()は次のような記述をします。jQuery基礎で学ぶおなじみの書  >>続きを読む

object-fitプロパティとobject-positionプロパティを活用した正円形の画像表示

CSSのborder-radiusプロパティを使用すると簡単に角丸を作成することができます。 border-radiusプロパティの使い方は MDN web docs ページを参考にしてください。 border-radi  >>続きを読む

Pythonでスクレイピング(1)seleniumの導入とh1要素のテキストを取得する

スクレイピングとは クローラーとスクレイピングは似たようなことをするので混同されてしまいますが、大きく違いがあります。 クローラーとは自動的にWebページの情報を収集して回るプログラムのことをいいます。そしてスクレイピン  >>続きを読む

ajaxやfetch、axiosをPOSTでAPI接続する方法〜リクルート A3RTのTalk APIを取得例

ajaxやfetch、axiosなどでAPI接続するための方法をリクルートのA3RTで試しました。 getなら比較的簡単に取得できますが、post指定の場合はちょっと難易度が上がります。参考にしてください。 今回はリクル  >>続きを読む

chart.jsで描いた円グラフにラベルと値を表示する方法

chart.jsを使うと簡単にグラフが描けます。 chart.js公式ページ ところで、どういうわけかグラフ上にラベルの表示ができないようになっています。 デフォルトの円グラフ ラベルと値を追加した円グラフ ラベルと値を  >>続きを読む

スプレッド演算子〜モダンなJavaScript

スプレッド演算子は…(ピリオド3つ) で記述します。スプレッド演算子を使った構文では配列では0 個以上の要素として展開され、Objectの場合に0 個以上の keyとvalueでオブジェクトを展開します。 ス  >>続きを読む

Vue.jsの基本(6)親コンポーネントから子コンポーネントへデータを渡す方法

コンポーネントのデータのやりとりについて コンポーネントを作成するときにコンポーネント間のデータをやりとりする方法は重要な概念となります。 この仕組みをいい加減にすると混乱の原因となります。そのため、Vue.jsでは親コ  >>続きを読む

Vue.jsの基本(5)コンポーネント作成

Vue.jsはコンポーネントを作成するのに都合の良いライブラリです。 再利用可能なコンポーネントを作成することは作業の効率化に貢献します。そして何よりもVue.jsの使いやすさが魅力です。複雑な環境設定も必要なく、学習し  >>続きを読む

Vue.jsの基本(4)監視プロパティについて

Vue.jsでは特定のデータやcomputedの状態を監視して、変化があるとその処理を実行する機能があります。このことを監視プロパティは行います。監視プロパティは別にウオッチャーと呼ばれています。 監視プロパティの記述は  >>続きを読む

レスポンシブ画像の作成とアートディレクション

今回はレスポンシブ画像の表示方法についてです。 HTML5からimgタグで複数の画像を選択できる2つの新しい属性ができました。 それは「srcset」 と 「sizes」属性です。 サンプル 具体的なコード [crayo  >>続きを読む

Twitterのタイムラインをホームページに埋め込む方法〜2018年更新版

2018年夏に埋め込みタイムラインをtwitter.comのアカウント設定で管理することはできなくなりました。 代わりに、publish.twitter.comで埋め込みコンテンツを設定するようになっています。 publ  >>続きを読む

「width:100%」と「max-width:100%」の違い

今回は「width:100%」と「max-width:100%」の違いについて焦点を当ててみます。 「width:100%」について 次のサンプルを見てください。 全体を囲むdiv要素に「width: 100%」を指定し  >>続きを読む

ブレイクポイントは「em」で指定〜スマホサイト作成

メディアクエリの設定でブレイクポイントの単位を「px」で指定することが多いと思いますが、「px」で指定するとSafariで思わぬ不具合に遭遇します。 これは2016年頃に広がったネタですが、いまだにSafariでは同様の  >>続きを読む

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

computedは日本語では算出プロパティと呼ばれています。 computedはdataプロパティに対して何らかの処理を行いたい場合に使用します。 computedの記述方法としては何らか処理をしたデータを返す関数として  >>続きを読む

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

Vue.jsの最大の特徴はリアクティブシステムであることです。 そして、もっとも重要なことはデータをリアクティブデータにすることで、あるデータを新たに加えたり、変更したり、削除すると即座にそのデータの表示を変更することが  >>続きを読む

CSS〜インライン要素に使えるbox-decoration-breakプロパティについて

インライン要素に対してCSSで装飾することは珍しいかもしれません。 box-decoration-breakプロパティとは、要素の断片が複数の行、段、ページに渡る場合に描画する方法を指定します。 具体的にはインライン要素  >>続きを読む

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

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

色々なWindow Object 〜モダンなJavaScript

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

DOM操作まとめ〜JavaScript

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

ES6で classを使う方法

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

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

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

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

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

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

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

CSS〜 object-fitでアスペクト比を保持しながら画像を拡大縮小

HTMLのimgタグで挿入した画像を拡大縮小をするには、img要素に対して「width:100%」とすればアスペクト比を保ちながら拡大縮小を行うことができます。このような仕組みの画像のことをフルードイメージと言います。   >>続きを読む

CSSでクリッピングマスクを使う方法

CSSでマスキングするにはクリピングマスクを使うことができます。 指定した要素にCSSで図形を描いて重ねることで、その図形以外の部分が非表示になります。 E { clip-path: shape } shapeはcirc  >>続きを読む

headerのコーディング例〜CSS

シンプルなヘッダー領域のコーディング例です。古典的な手法からFlexBoxを活用した方法の例です。 古典的な方法 要素を水平方向に中央揃えする方法は簡単に行えます。 例えばdisplay:blockの要素なら、幅を決めて  >>続きを読む