JS 配列要素の読み込みと表示 プレーンJavaScriptでJSONを非同期通信(AJAX)で読み込み表示するサンプルです。 jQueryなどのライブラリを使うともっと記述は減らせますが、あえて使いたくないときは以下のように書きます。 XMLHttpRequestはJSONも対応しているため、JS... 2023-01-15 17:46:25
JS Ajaxをプレーンで実装 プラグインを使わずにプレーンのJavaScriptで非同期通信Ajaxを実装するサンプルです。 XMLHttpRequestの関数を利用します。 XMLとありますが、JSONを使うケースが多いためJSONの例を掲載します。 [[ const xhr = new XMLHttpRequest();... 2023-01-06 00:12:08
JS タブボタンで要素切り替え プレーンJSでタブの表現を実装するサンプルです。 jQueryなどを使わずにボタンを押すと、コンテンツを入れ替える表現を実装しました。 一つ目の要素がデフォルトで表示されます。 ボタン1... 2023-01-04 00:15:20
laravel JS,CSSをまとめる laravel-mixを利用して、複数のJSやCSSをそれぞれ一つにまとめるサンプル。 laravelをインストールするとpackage.jsonにあれば、laravel-mixもインストールされる。 repository直下にあるwebpack.mix.jsを開く。 CSSを束ねたい場... 2022-11-11 06:41:01
CSS スタイルの非同期の外部参照 重要なCSSと、後から読み込んでもよいCSSを分けて実装するサンプルです。 昨今、表示の速さは検索エンジンが細かく評価するようになりました。 ページを表示する際に必要なスタイルだけ読み込み、重要でないスタイルは後で読み込むよ... 2022-11-06 10:07:47
SVG カンマのサンプル カンマ(コンマ)マークをSVGで描くサンプルです。 引用するときのマークやちょっとした用途で大きなカンマを使うときのSVGを用意しました。 3つの大きさがあるので、調整してお使いください。 大きなカン... 2022-09-18 16:43:48
HTML 文章の引用 文章を引用するときのサンプルです。 別のサイトや本など、制作物から引用するときのコードとスタイルのサンプルです。 引用マークはCSSなどで文字を追加するのではなく、SVGで記述しています。... 2022-09-18 09:52:27
HTML 文字を小さくする 文字を小さくしたいときのコーディングの記述のサンプルです。 デフォルトの文字が少し大きい時、いろいろな方法で文字を小さくできます。 普通のサイズの文字 [[<p>普通のサイズの文字</p>]] こ... 2022-09-15 16:23:08
HTML 斜体のいろいろ HTMLで斜体を表現するサンプルです。何種類かあります。 斜体といえばiタグと思いきや、他にも同じ斜体のタグがHTMLにはあります。 いわゆる斜体、イタリックで有名なiタグ このタグは区別するときに使います... 2022-08-31 22:25:07
CSS webフォントの読み込み CSSでwebフォントを使うことが増えてきたが、フォントデータを読み込む方法は複数ある。 ウェブフォントの外部参照は通信速度の速い今では、よく利用されています。 HTMLのlinkタグで読み込む場合 [[ <link rel="preconnect" href... 2022-08-30 22:45:37