コンピュータHTMLエレメントがWordPress(Cocoon)の記事でどう見えるか確認
div <div>ブロックレベル要素</div> ブロックレベル要素 span <span>インライン要素</span> インライン要素 ol <ol> <li>食パン</li> <li>スライスチーズ</li> <li>ベーコン</li>...
HTML
コンピュータ コンピュータCSSでデバイスが縦長か横長で文字の色を変えてみる。
デバイスが縦長の場合文字の色を黒く横長の場合灰色にします。 デバイスが横長の場合、縦長の反対の振る舞いになるようにCSSを記述してみます。 cssの内容 @media screen and (orientation: portrait) {...
コンピュータHTMLにSVG画像を埋め込むサンプル2
SVGのサンプルの続き 二次ベジェ曲線 pathでベジェ曲線を描画していて曲線部分になります。 <path d="M 32 32 S 128 48 32 64" stroke="black" stroke="black" fill="tra...
コンピュータHTMLにSVG画像を埋め込むサンプル
SVG要素 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>SVGのサンプル</title> </head> <body> <svg x="100"...
コンピュータHTMLとjQeryで作る生年月日リストボックスのサンプル
年月日を選択式で指定する入力項目のサンプルです。生年月日を想定して実行日から100年前まで範囲で50年前の年を初期値にしています。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset=...
コンピュータJavascriptファイルをドラッグアンドドロップ出来るアップロードフォーム
アップロードするファイルをドラッグアンドドロップするフォームを良く見受けます。サンプルを作成してみました。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <ti...
コンピュータPHPでHTTPリクエストの確認とCSSで作った送信ボタン
HTTPリクエスがGETなのかPOSTなのか、はたまたDELETEなのか確認する方法を調べてみました。また、CSSとJavascript(jQuery)で送信ボタンを作成してみました。 <?php ?> <!DOCTYPE html> <h...
コンピュータ【HTML・CSS】文字列を右寄せする。
右寄せに表示することで数値などを見やすくしたい。 <div style='text-align:right;'>1,000,000</div> <div style='text-align:right;'>1,000</div> 1,000...
コンピュータjQueryでHTMLの要素を動的に追加する。
項目数が可変の入力フォームを作成する必要があり、jQueryをつかって要素を動的に追加するコードを試作してみました。 追加ボタンをおすと入力項目が追加され、削除ボタンを押すと項目が一つ削除されます。 入力項目の値が変更されるとalertで、...
コンピュータJavaScriptとCanvasで画像の一部を切り出して表示
HTMLのCanvasで座標を指定して画像ファイルを表示することが出来るようなので、一つの画像ファイルを6分割し一コマ一コマ表示してみました。 表示された画像をクリックすると次のコマが表示されます。 動くサンプルへのリンク ソースコード <...
コンピュータJavaScriptでHTML5のcanvasを使って図形を描画
HTML5ではcanvasで図形を描くことが出来るので試してみます。 扇形 四角形 ソース window.onload = function() { var c = document.getElementById("cv").getCont...