人気のあるUIサンプル

• CSS webフォントの読み込み
• CSSでwebフォントを使うことが増えてきたが、フォントデータを読み込む方法は複数ある。 ウェブフォントの外部参照は通信速度の速い今では、よく利用されています。 HTMLのlinkタグで読み込む場合 [[ <link rel="preconnect" href...
• 2022-08-30 22:45:37

• HTML 斜体のいろいろ
• HTMLで斜体を表現するサンプルです。何種類かあります。 斜体といえばiタグと思いきや、他にも同じ斜体のタグがHTMLにはあります。 いわゆる斜体、イタリックで有名なiタグ このタグは区別するときに使います...
• 2022-08-31 22:25:07

• HTML 文字を小さくする
• 文字を小さくしたいときのコーディングの記述のサンプルです。 デフォルトの文字が少し大きい時、いろいろな方法で文字を小さくできます。 普通のサイズの文字 [[<p>普通のサイズの文字</p>]] こ...
• 2022-09-15 16:23:08

• HTML 文章の引用
• 文章を引用するときのサンプルです。 別のサイトや本など、制作物から引用するときのコードとスタイルのサンプルです。 引用マークはCSSなどで文字を追加するのではなく、SVGで記述しています。...
• 2022-09-18 09:52:27

• SVG カンマのサンプル
• カンマ（コンマ）マークをSVGで描くサンプルです。 引用するときのマークやちょっとした用途で大きなカンマを使うときのSVGを用意しました。 ３つの大きさがあるので、調整してお使いください。 大きなカン...
• 2022-09-18 16:43:48

• CSS スタイルの非同期の外部参照
• 重要なCSSと、後から読み込んでもよいCSSを分けて実装するサンプルです。 昨今、表示の速さは検索エンジンが細かく評価するようになりました。 ページを表示する際に必要なスタイルだけ読み込み、重要でないスタイルは後で読み込むよ...
• 2022-11-06 10:07:47

• laravel JS,CSSをまとめる
• laravel-mixを利用して、複数のJSやCSSをそれぞれ一つにまとめるサンプル。 laravelをインストールするとpackage.jsonにあれば、laravel-mixもインストールされる。 repository直下にあるwebpack.mix.jsを開く。 CSSを束ねたい場...
• 2022-11-11 06:41:01

• JS タブボタンで要素切り替え
• プレーンJSでタブの表現を実装するサンプルです。 jQueryなどを使わずにボタンを押すと、コンテンツを入れ替える表現を実装しました。 一つ目の要素がデフォルトで表示されます。 ボタン1...
• 2023-01-04 00:15:20

• JS Ajaxをプレーンで実装
• プラグインを使わずにプレーンのJavaScriptで非同期通信Ajaxを実装するサンプルです。 XMLHttpRequestの関数を利用します。 XMLとありますが、JSONを使うケースが多いためJSONの例を掲載します。 [[ const xhr = new XMLHttpRequest();...
• 2023-01-06 00:12:08

• JS 配列要素の読み込みと表示
• プレーンJavaScriptでJSONを非同期通信（AJAX）で読み込み表示するサンプルです。 jQueryなどのライブラリを使うともっと記述は減らせますが、あえて使いたくないときは以下のように書きます。 XMLHttpRequestはJSONも対応しているため、JS...
• 2023-01-15 17:46:25