css-filterで画像を暗く表示する

CSS,CSS 画像

CSSでfilterプロパティを利用して画像・写真を暗く加工した状態で表示する方法のサンプル集です。 「暗くする」という見出しですが、シンプルに暗転できるbrightness(明度)から、暗くするとは意味合いが少し違ってきますがgraysc ...

cssで画像のドラッグを無効にする

CSS,CSS 制御

CSSで画像のドラッグ移動を無効・禁止にするサンプルコードの紹介です。 See the Pen CSS | Disable image drag by yochans (@yochans) on CodePen. 画像のドラッグを無効にする ...

css-テキストの選択を無効にする

CSS,CSS 制御

CSSでページ全体または特定のHTML要素内で、マウスドラッグやモバイル端末の操作でのテキスト選択を無効・禁止にする方法の紹介です。 See the Pen CSS | Disable text selection by yochans ( ...

日本語に対応したGoogleフォントの表示サンプル一覧

2021-02-05CSS,CSS テキスト 基本

日本語に対応しているGoogleフォントの表示サンプル一覧です。 フォント別に@importと、フォントファミリー指定のCSSも紹介しています。 最終更新日 2021/2/4 See the Pen CSS | How to use Goo ...

Googleフォントの使い方

CSS,CSS テキスト 基本

See the Pen CSS | Adjust the size and position of the checkbox by yochans (@yochans) on CodePen. Googleフォントを選択する Browse ...

チェックボックスのサイズと位置を調節する

CSS,CSS フォーム

CSSでフォームパーツのチェックボックスのサイズと位置を調節するサンプルです。 チェックボックスやラジオボタンはデフォルトの表示が小さい場合が多い事もあり、綺麗にデザインされたCSSが人気ですが、とりあえず大きさを変更して位置を調節するだけ ...

text-decorationのデザインサンプル集

CSS テキストデザイン サンプル集,CSS

CSSでtext-decorationでの下線などのスタイルを変更する方法の紹介です。 デフォルトの下線(underline)はリンクテキストに使われる事が多く、その他のテキストには利用しにくい状況ではありますが、text-decorati ...

css-iframeのスクロールバーを非表示にする

2021-02-05CSS,CSS 制御

iframeのスクロールバーを非表示にする方法の紹介です。 See the Pen CSS | Hide the iframe scrollbar by yochans (@yochans) on CodePen. iframeのスクロール ...

css-テキストエリアのサイズ変更を不可にする

2021-02-05CSS,CSS 制御,CSS フォーム

CSSでテキストエリアのサイズ変更を不可にするサンプルコードです。 See the Pen CSS | Disable resizing of textarea by yochans (@yochans) on CodePen. テキストエ ...

CSSデザイン-虹

2021-02-10CSS,CSS デザイン サンプル集

CSSのborderを利用して作成した虹(レインボー)のデザインです。 See the Pen CSS | Rainbow circle by yochans (@yochans) on CodePen. HTMLには「container」 ...

HTML要素にclassが指定されているか確認する

JavaScript,javascript CSSセレクタ

JavaScriptでHTML要素にclassが指定されているか確認するサンプルコードです。 See the Pen JavaScript | Check if the element has a class by yochans (@yo ...

js-メールアドレスかどうか判別する

JavaScript,JavaScript 判別

JavaScriptで文字列がメールアドレスかどうか判別するサンプルコードです。 対象の文字列が正規表現でパターンを調べて、メールアドレスであればtrue、メールアドレスでなければfalseを返します。 'abc-abc@gmail.com ...

親要素から子要素を取得するパターン集

JavaScript,javascript CSSセレクタ

JavaScriptでHTMLの親要素から子要素を取得するのサンプルコードのパターン集です。 このページではquerySelectorAll()を利用した方法を紹介しています。 See the Pen JavaScript | get ch ...

js-音声ファイルを再生する方法

JavaScript,JavaScript Audio

HTML5のaudioをJavaScriptで制御して音声ファイルを再生する方法の動作サンプルとサンプルコードです。 See the Pen JavaScript | Play an audio file by yochans (@yoch ...

テキストエリアを文章の行数に応じて拡縮する方法

2021-02-03JavaScript,JavaScript フォーム

テキストエリアを入力されている文章の行数に応じて自動で拡縮(サイズを広げる、またさ縮める)させる実装サンプルです。 See the Pen JavaScript | Create a random string by yochans (@y ...

js-ランダムな文字列を生成する方法

2021-02-03JavaScript,JavaScript 文字列

JavaScriptで英数字のランダムな文字列を生成するサンプルコードです。 See the Pen JavaScript | Create a random string by yochans (@yochans) on CodePen. ...

HTML要素の大きさを比較する方法

2021-02-03JavaScript,JavaScript 数値・計算

JavaScriptで要素の幅と高さから計算したpx単位の面積から、2つのHTML要素の大きさを比較するサンプルコードです。 See the Pen JavaScript | Calculate the area of the elemen ...

配列を逆順にする方法

2021-02-03JavaScript,JavaScript 配列

JavaScriptで配列の値の順番を逆順にする方法のサンプルです。 reverse()とArray.prototype.reverse.call()を使った配列の逆順ソートについて紹介しています。 See the Pen JavaScri ...

変数名や関数名には使えない予約語一覧

JavaScript,JavaScript 変数

JavaScriptで変数や関数、クラスの名前には利用できない予約語の一覧です。 これらの名前を利用しようとすると以下のコンソールエラーが表示されます。 Uncaught SyntaxError: Unexpected token 'xxx ...

js-親要素のidやclassを取得する方法

JavaScript,javascript CSSセレクタ

JavaScriptで指定したHTML要素を持つ親要素を取得してそのidやclassを取得する方法のサンプルです。 See the Pen JavaScript | Get id and class of parent element by ...

js-文字列を一文字単位で逆順にする方法

2021-02-08JavaScript,JavaScript 文字列

JavaScriptで文字列を文字単位で逆順にする方法のサンプルコードです。 See the Pen JavaScript | Reverse the strings by yochans (@yochans) on CodePen. 文字 ...

cursorプロパティで指定可能な値一覧

CSS マウスカーソル,CSS

cursorプロパティで指定可能な値一覧と指定時の動作サンプルです。 See the Pen JavaScript | List of cursor properties by yochans (@yochans) on CodePen. ...

マウスカーソルを指(手)にする方法

2021-02-08CSS マウスカーソル,CSS

CSSで特定のHTML要素上でマウスカーソルを指(手)にするサンプルコードです。 divやp要素などaタグ以外のHTML要素に対して、CSSやJavaScriptなどでボタン的な機能を実装する場合、マウスカーソルを指(手)にする事はユーザー ...

要素の幅と高さから面積を計算する方法

2021-02-08JavaScript,JavaScript 数値・計算

JavaScriptでHTML要素の幅と高さを取得して、そのピクセル単位の面積を計算する方法のサンプルです。 See the Pen JavaScript | Compare element sizes by yochans (@yocha ...

javascript-get-the-scroll-position

2021-02-08JavaScript,JavaScript 取得

JavaScriptで現在のスクロールの位置(高さ、ポジション)を取得する方法のサンプルです。 See the Pen JavaScript | get scroll position by yochans (@yochans) on Co ...