HTML・Javascript・CSS

CSSとjqueryでフェードインアニメーションを作る 上下左右からフェードインするアニメーションを作る方法です。 サンプル See the Pen fadein by take it easy (@take-it-easy) on CodePen. CSS /* フェードイン　トリガークラス */ .fadein-r...

CSSで吹き出しを作る方法 最近、吹き出しで会話形式で説明をするページがあります。Wordpressを使用していたらプラグインで簡単に作れますが、CSSで簡単に作ることもできます。 今回は、以下のような吹き出しを作る方法です。 上向きの吹き出し サンプル See the Pen speech-bubble(top)-c...

jQueryでメールアドレスの入力チェックを行う jQueryでメールアドレスの入力チェックをする方法です。 テキスト入力欄よりフォーカスが外れた時に、入力チェックをします。 See the Pen form-email by take it easy (@take-it-easy) on CodePen. HTML ...

jQueryで氏名の入力チェックを行う jQueryで氏名の入力チェックをする方法です。 テキスト入力欄よりフォーカスが外れた時に、入力チェックをします。 氏名（入力欄が１つ）の場合 See the Pen form-name1 by take it easy (@take-it-easy) on CodePen. H...

タイトルの付いた囲み枠のサンプル よく見るタイトルの付いた囲み枠のサンプルです。 必要になるときに、CSSを考えるのと、Font Awesome アイコンを探すのが面倒なのでメモとして残します。 今回は、インフォメーション、警告、ポイントの３種類ですが、基本的には、タイトル部分のアイコンと文言違い、色違いしか代わりはあ...

お問い合わせボタンなど、ボタンのサンプルです。 お問い合わせボタン 問い合わせフォームへのリンクボタン aタグをCSSでボタン風に表示。また、「Font Awesome」のアイコンの配置。 See the Pen contact-btn1 by yuichi (@yhamada1205) on CodePen. 問い合...

リストを横に並べてメニューを作成するサンプル。 区切りありのシンプルなメニュー 「display: inline-block;」とすることでリストタグを横並びにすることが可能。また、「list-style: none;」とすることで、リストの先頭プレフィックスを非表示にすることが可能。 See the Pen navi...

基本的な使い方 CSSで、「display: flex;」を設定することで横並びにレイアウトをすることが可能。 See the Pen bGqEEjq by yuichi (@yhamada1205) on CodePen. 配置方向の設定 配置方向の設定は、「flex-direction」で設定をする。 flex-d...

HTML5のCanvasを使うと、マウスやタッチペンなどで文字や絵を描くことができます。 今回はサイン（署名）ができるような簡単な機能を作る方法です。 ※ コピペでそのまま動くと思いますが、自己責任で使用して下さい。 サンプル 以下の枠内にマウスやタッチペンなどで文字を書いたり絵を描いたりすることができます。クリアボタ...

前回、Canvasで文字や絵を描ける機能だけでしたが、さらに描いた内容を画像表示する方法、ダウンロードできるようにする方法です。 ※ コピペでそのまま動くと思いますが、自己責任で使用して下さい。 https://take-it-easy.site/html-js-css/draw_on_canvas/ サンプル 以下の...