css レスポンシブ対応がカンタンに！CSS aspect-ratioプロパティの使い方
レスポンシブ対応がカンタンにできる、CSSのaspect-ratioプロパティの使い方です。YouTubeの動画を埋め込む場合でもレスポンシブ対応できます！css関連記事aspect-ratioプロパティとはaspect-ratioは、要素...
css
css 
jQuery jQuery UIのsortableを使ってリストをドラッグで並び替える
jQuery UIのsortableを使って、リストをドラッグで並び替えをし、並び順を書き換えてからSQLで送信します。js関連記事sortableのサンプルsortableで並べ替えができるリストの作成HTMLjQueryを読み込んでから...
jQuery HTMLのsvgタグとJavaScriptで円グラフの画像をつくる
HTMLのsvgタグとJavaScriptをつかって、svgタグ内に円グラフの画像を作成してみます。php/DBと連動することで、パーセンテージを変更できて円グラフも自動で変更が反映されるようにします。js関連記事svgタグとは？サイト上で...
jQuery select・optionタグをjQueryで、プルダウンの選択値を取得、変更する
selectタグと、optionタグ(プルダウン)をcssとjQueryでカスタマイズしていきます。cssで見た目を、jQueryで選択されている値の変更・取得などまとめました。jQuery関連記事select要素とは？「select要素」...
jQuery placeholderを見やすく！jQuery+css3でつくるフローティングラベル
入力すると消えてしまうinputタグのplaceholderを見やすくするjQuery+css3でつくるフローティングラベルjQuery関連記事サンプルを用意しました。htmlhtmllabelの中に入力中に表示したい項目名を入れます。pl...
css 効率よくセレクタを指定してcss効かせるサンプル！21選
first-childや、nth-of-type()などを使って、効率よくセレクタを指定してcss効かせるサンプル！21選css関連記事サンプルはこちらから。1.タグで指定cssタグを指定してstyleを適用します。2.idで指定cssid...
css 楽天スマホで使える！classを使わずにcssを適用する裏技
使用可能タグが限られた楽天スマホで使える！classを使わず、属性値に任意の値を指定してcssを適用する裏技楽天Tips関連記事楽天スマホで使用可能なタグ使用可能なタグはとても少なく、aタグやpタグ、table関連程度しか使えません。div...
css cssのkeyframesで画像に動きや変化のアニメーションをつけるサンプル10選
cssのkeyframesをつかって、要素や画像に対して、ふわふわ上下・左右に移動する動きや、ゆらゆら揺れる動き、ゆっくりズームするなどのアニメーション・動きをつけるサンプルを7種類紹介します。今回は、画像にアニメーションを付けたいのでim...
css cssで要素に動きや変化をアニメーションでつける、keyframesの使い方
cssで要素に動きや変化をアニメーションでつける、keyframesの使い方css関連記事今回、imgタグにアニメーションを付けてみます。htmlkeyframesの使い方cssanimation_testがアニメーションの名前を任意でつけ...
css SVG画像をcssのプロパティで色や大きさなどのスタイルを変更する
SVG画像をhtmlに埋め込み、cssのプロパティで色や大きさなどのスタイルを変更する方法css関連記事svgのデータは「icooon-mono」さんからのデータをsvgでお借りしました。デモを用意しました。1.svgをhtmlに反映するダ...