20210507のHTMLに関する記事は12件です。

切り抜く要素のサイズに合わせてSVGでclip-pathする

発生した問題 何も考えずSVGで要素をclip-pathすると、切り抜きたい要素のサイズに合わせて切り抜いてくれませんでした。 こうなって欲しいのに... こうなる... 問題発生時のコード この問題が発生しているとき、みなさんのソースコードも以下と似た状態だと思います。 JSXなので少し記述がHTMLと異なりますが、読み替えていただけると幸いです。 // 切り取りたいSVGの形 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 103.758 103.758" height={0} width={0} > <clipPath id="super-ellipse"> <path d="M64.36,13c35.815,0,52.4,15.545,52.4,51.36s-16.583,52.4-52.4,52.4S13,100.175,13,64.36,28.545,13,64.36,13Z" transform="translate(-13 -13)" fill="none" /> </clipPath> </svg> // 切り取る対象の要素 <img src={profileImageSrc} style={{ clipPath: 'url(#super-ellipse)' }} /> 解決方法 clipPathにclipPathUnits="objectBoundingBox"をつける pathのサイズを0-1に正規化する 1.はそのままなのですが、2.のpathのサイズを正規化するというのが重要です。clipPathUnits="objectBoundingBox"をつけると、pathがviewBoxの範囲ではなく、0-1の範囲で描画されるようになります。 pathの項目一つ一つの数値をviewBoxの数値で割ることでも可能ではありますが、手っ取り早くtransformでscaleを指定しましょう。 scaleで指定する数値は、以下の計算で求めることができます。 1 / viewBoxの数値 transformでtranslate等が指定されていれば、その数値もviewBoxの数値で割る必要があります。 上記のコードの場合は、scaleに指定する数値は、 scale = 1 \div 103.758 = 0.009637 transformの数値は、 transform = -13 \div 103.758 = -0.125281 です。 解決後のコード <svg> <clipPath id="super-ellipse" clipPathUnits="objectBoundingBox"> <path d="M64.36, 13c35.815, 0, 52.4, 15.545, 52.4, 51.36s-16.583, 52.4-52.4, 52.4S13, 100.175, 13, 64.36, 28.545, 13, 64.36, 13Z" transform="translate(-0.125281 -0.125281) scale(0.009637)" /> </clipPath> </svg> // 切り取る対象の要素は同じ 切り抜けました! ちなみに今回切り抜いたSVGの形は、スーパー楕円という図形です。 丸よりも丸みを感じる!? スーパー楕円の魅力とデザイン
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

【初心者でもわかる】ページ読み込み時に任意の位置までスクロールした状態にする方法

どうも7noteです。ページを読みこんだら一番上でなくページの途中を最初に表示する方法です。 ページ遷移をするときに、特定のリンクからはページの途中を表示させることができます。 指定も1行で簡単。 ページの途中から表示させる方法 例)「index.html」から「hogehoge.html」の途中へリンクさせる index.html <a href="hogehoge.html#contentsC" >ページhogehogeのコンテンツCへリンクする</a> hogehoge.html <div id="contentsA">コンテンツA</div> <div id="contentsB">コンテンツB</div> <div id="contentsC">コンテンツC</div> <div id="contentsD">コンテンツD</div> <div id="contentsE">コンテンツE</div> 解説・ポイント とび元(ページ遷移する前のページ)のリンクのURLの最後に【#(id名)】を指定し、 とび先のページにそのidを指定した要素(最初に表示させたい要素)を用意するだけ。 ピッタリ上にくっついてしまうので、それを避ける場合にはjavascriptなどで制御する方法があります。 まとめ classではできず、idでしかできませんのでご注意を。 同一ページ内でも移動させることが可能です。指定方法は一緒。 おそまつ! ~ Qiitaで毎日投稿中!! ~ 【初心者向け】WEB制作のちょいテク詰め合わせ
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

WordPressちゃんとやろうと思ってVScodeにphpcs入れたらめっちゃ怒られた

この記事は 久しぶりにWordPressに触れる機会があったのでちゃんとしようと思ってVScodeにphpcsていうプラグイン入れたら早速めっちゃ怒られたので一個ずつ解決していくぅ ちなみに普段ほとんどWordPress触らないからマジで初心者向けです。 phpcsはこれ https://marketplace.visualstudio.com/items?itemName=ikappas.phpcs エラー内容と解決方法 共通 1. 改行前スペース Whitespace found at end of line 改行前に半角スペースが入っていたりするとこう怒られる。 半角スペースを消すと怒られなくなる。 2. コード後の改行 File must end with a newline character コードのあとに改行がないときの怒られ方。改行を足すと機嫌は直る。 3. コメントの下の空改行 There must be no blank lines after the function comment コメントの下に空の改行があるとこれが出る。空改行を消すとエラーが消える。 4. ドットの左右は半角スペースを Contact operator must be surrounded by a single space ドットの左右に半角スペースを入れないとこうなる。入れると直る。 5. コメントが見つからない Missing file doc comment WordPressのファイルは、それぞれがなんのファイルなのかをコメントで記す必要があるらしい。 それがないって怒っているのが上記のエラーメッセージ。 /** * Header * @package ThemeName */ こんな感じで、概要と@package ほにゃららを入れてあげると直る。 @package以下はなんでもよいらしい。テーマの名前。 このサイトわかりやすかった WordPress コーディングスタンダードの正式な書き方をまとめてみる – ミルログ functions.php 1. コメントが見つからない その2 Missing file doc comment 一個前のエラーと一緒だけど、関数を作成している場合には関数ごとにもコメントが必要 //functions.phpのDoc /** * Functions * * @package ThemeName */ //関数$my_enqueue_scripts(任意の関数名)のDoc /** * $my_enqueue_scripts. */ 2. バージョン記載 Resource version not set in call to wp_enqueue_style(). this means new versions of the style will not always be loaded due to browser caching. 読み込んだCSSファイルにバージョン記載がない場合の内容。何らかバージョン情報を記載してあげると機嫌が直った。 //怒られる wp_enqueue_style( 'common-css', get_template_directory_uri() . '/assets/css/styles.min.css', ''); //怒られない wp_enqueue_style( 'common-css', get_template_directory_uri() . '/assets/css/styles.min.css', '', '1.0.0' ); header.php 1. スタイルシート等の読み込み方法 Stylesheets must be registered/enqueued via wp_enqueue_style スタイルシートはwp_enqueue_styleで読み込んでねという。 JSもwp_enqueue_scriptsで読み込んでないと同じように怒られる。 2. 読み込みはfunctions.phpに All output should be run through an escaping function (see the Security sections in the WordPress Developer Handbooks), found 'get_template_directory_uri.' JS,jQuery,CSS周りの記述をheadに入れていたら言われた。 これは主にURLをエスケープ処理してない場合に出る文言らしい。 そもそもfunctions.phpに入れてしまえば怒られなくなったから大人しくfunctions.phpにほっぽった。 まとめ とりあえずここまで。まだいっぱい出る気がするのでそのときは追記していくぅ(2021/05/07)
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

カラーサンプル (HTML) 作ってみた

はじめに PythonやRで作図をするときに好きな色を16進数表記で指定したい時があります。 これまで、パワポやエクセルを開いてカラーパレット(って言うんですかね?)で色を選んで、その16進数表記をコピペ・・ とかやっていましたが、いちいち面倒だなぁと思ったのでパレットから色を選んで16進数をコピーできるHTMLを作ってみました。 真ん中のパレットは横が「色相」縦が「明度」、右の細長い部分は「彩度」になっています。 彩度はパレット上からマウスホイールでも調整可能です。パレット上でクリックした色が「選択した色」になり、16進数が表示され「Copy」ボタンでコピーできます。 使い方 メモ帳に以下のcolor_sample.htmlをコピペ color_sample.html等の任意の名前で保存 ウェブブラウザで開く→上記画像のような画面が開く※color_sample.htmlをブックマークに登録するか、デスクトップに置いておくと便利かも知れません color_sample.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Color Sample</title> </head> <body> <div> <!-- 選択した色を表示するためのブロック --> <div id="selected_color_wrapper_w" style="display:flex;"> <div id="selected_color_wrapper" style="display:flex;flex-direction:column;align-items:center;padding:0px 3px 0px 0px;"> <canvas id="selected_color" style="border:1px solid gray"></canvas> <div> <p style="display:inline;">選択した色:</p> <p id="selected_color_character" style="display:inline;"></p> <button id="selected_color_copy">Copy</button> </div> </div> <div id="current_color_wrapper" style="display:flex;flex-direction:column;align-items:center;"> <canvas id="current_color" style="border:1px solid gray"></canvas> <div> <p style="display:inline;">現在の色:</p> <p id="current_color_character" style="display:inline;"></p> </div> </div> </div> </div> <!-- カラーパレット部分 --> <!-- クリック判定用の透明なやつ --> <div id="pallet_wrapper3" style="display:inline-block;"> <div id="pallet_wrapper2" style="display:flex;flex-direction:column;align-items:center;"> <div id="pallet_wrapper1"> <canvas id="color_pallet_dummy" style="position:absolute;cursor:crosshair;z-index:5;"></canvas> <canvas id="color_pallet" style="display:inline-block;"></canvas> <canvas id="pallet_marker" width=10 height=10 style="position:absolute;z-index:1;"></canvas> </div> <p>色相 / 明度</p> </div> </div> <div id="satu_bar_wrapper3" style="display:inline-block;"> <div id="satu_bar_wrapper2" style="display:flex;flex-direction:column;align-items:center;"> <div id="satu_bar_wrapper1"> <canvas id="saturation_bar_dummy" style="position:absolute;display:inline-block;cursor:crosshair;z-index:5;"></canvas> <canvas id="saturation_bar" style="display:inline-block;"></canvas> <canvas id="satu_marker" style="position:absolute;z-index:1;"></canvas> </div> <p>彩度</p> </div> </div> </body> </html> <script type="text/javascript"> // -------------------------------------------------- // // html要素の変数への格納 var color_pallet=document.getElementById("color_pallet"); var color_pallet_dummy=document.getElementById("color_pallet_dummy"); var pallet_marker=document.getElementById("pallet_marker"); var saturation_bar=document.getElementById("saturation_bar"); var saturation_bar_dummy=document.getElementById("saturation_bar_dummy"); var satu_marker=document.getElementById("satu_marker"); var selected_color=document.getElementById("selected_color"); var current_color=document.getElementById("current_color"); var selected_color_character=document.getElementById("selected_color_character"); var current_color_character=document.getElementById("current_color_character"); var selected_color_copy=document.getElementById("selected_color_copy"); // 要素の調整(値取得順序の関係で先にやる必要があるものがある) selected_color.widht=window.innerWidth*0.1; selected_color.height=window.innerHeight*0.1; current_color.widht=window.innerWidth*0.1; current_color.height=window.innerHeight*0.1; // -------------------------------------------------- // // 必要変数の定義+オブジェクトの調整 // パレットの縦横の分割数 var pallet_nrow=100; var pallet_ncol=300; // パレットと彩度バーの左上の座標 var pallet_left=color_pallet.getBoundingClientRect().left; var pallet_top=color_pallet.getBoundingClientRect().top; // パレットと彩度バーのマーカーの座標 var pallet_x_cord=0; var pallet_y_cord=0; var pml=pallet_marker_length=5; var bar_y_cord=0; // 現在選択している色の値 var current_selected_color=""; var current_selected_hue=1; var current_selected_value=1; var current_selected_satu=1; var current_selected_alpha=0; var current_hovering_color=""; var current_hovering_hue=1; var current_hovering_value=1; var current_hovering_satu=1; var current_hovering_alpha=0; // マウスの現在座標 var mouse_x=0; var mouse_y=0; //----- カラーパレット描画用の変数+調整 -----// var pallet_width=Math.round(window.innerWidth*0.9); var pallet_height=Math.round(window.innerHeight*0.7); pallet_width=pallet_width-(pallet_width % pallet_ncol); pallet_height=pallet_height-(pallet_height % pallet_nrow); color_pallet.width=pallet_width+1; color_pallet.height=pallet_height+1; // ダミーパレットの位置、サイズ調整 color_pallet_dummy.style.top=pallet_top+'px'; color_pallet_dummy.style.left=pallet_left+'px'; color_pallet_dummy.width=pallet_width+1; color_pallet_dummy.height=pallet_height+1; var unit_width=pallet_width/pallet_ncol; var unit_height=pallet_height/pallet_nrow; var unit_hue=360/pallet_ncol; var unit_value=1/pallet_nrow; var current_left=0; var current_top=0; var current_hue=0; var current_value=1; var convert_xToHue=360/(unit_width*pallet_ncol); var convert_yToValue=convert_yToSatu=1/(unit_height*pallet_nrow); // タイマー付きでカラーパレットを描画するためのオブジェクト var pallet_timer; //----- 彩度バー描画用の変数+調整 -----// var bar_width=Math.round(window.innerWidth*0.05); var bar_height=pallet_height; saturation_bar.width=bar_width; saturation_bar.height=bar_height; saturation_bar_dummy.width=bar_width; saturation_bar_dummy.height=bar_height; var unit_satu=1/pallet_nrow; // ホイールで彩度マーカーを動かす際の刻み幅 var unit_satu_maker_move=Math.round(pallet_nrow/20); // マーカーが取れる上限下限。処理が進まないと決められないため下で値は代入 var satu_maker_upper_limit=0; var satu_maker_lower_limit=0; // -------------------------------------------------- // // 関数定義 // hsvをrgbに変換するための関数の定義 function hsvToRgb(arg_h,arg_s,arg_v){ // hue|色相 // saturation|彩度 // value|明度 // h,s,vの値を引数にとって、rgbの16進数表記を返り値とする var c=arg_v*arg_s; var h_dash=arg_h/60; var x=c*(1-Math.abs(h_dash%2-1)); var v_c=arg_v-c var red=v_c; var green=v_c; var blue=v_c; switch(Math.floor(h_dash)){ case 0: red=red+c; green=green+x; break; case 1: red=red+x; green=green+c; break; case 2: green=green+c; blue=blue+x; break; case 3: green=green+x; blue=blue+c; break; case 4: red=red+x; blue=blue+c; break; case 5: red=red+c; blue=blue+x; break; case 6: red=red+c; green=green+x; break; default: } red=Math.round(255*red); green=Math.round(255*green); blue=Math.round(255*blue); rgb="#"+("0"+red.toString(16)).slice(-2)+("0"+green.toString(16)).slice(-2)+("0"+blue.toString(16)).slice(-2); return rgb } // カラーパレットを描画する関数(彩度(s)と透明度(alpha)が引数) function drawPallet(arg_s,arg_alpha){ console.log(current_selected_satu); var context=color_pallet.getContext("2d"); var current_left=0; var current_top=0; var current_hue=0; var current_value=1; for(i_row=0;i_row<pallet_nrow;i_row=(i_row+1)|0){ current_left=0; current_hue=0; for(i_col=0;i_col<pallet_ncol;i_col=(i_col+1)|0){ // パスの初期化 context.beginPath(); // 四角のの座標(x,y)とサイズ(幅,高さ)を指定 context.rect(current_left,current_top,unit_width,unit_height); // 色の指定 context.fillStyle=hsvToRgb(current_hue,arg_s,current_value); // 塗り潰しの実行 context.fill(); current_left=current_left+unit_width; current_hue=current_hue+unit_hue; } current_top=current_top+unit_height; current_value=current_value-unit_value; } // 外側の枠線を描画 context.beginPath(); context.rect(0,0,pallet_width,pallet_height); context.strokeStyle="gray"; context.lineWidth=1; context.stroke(); } // 彩度バーを描画する関数(色相(h)、明度(v)、透明度(alpha)が引数) function drawSatuBar(arg_h,arg_v,arg_alpha){ context=saturation_bar.getContext("2d"); current_left=0; current_top=0; var current_satu=1; for(i_row=0;i_row<pallet_nrow;i_row=(i_row+1)|0){ context.beginPath(); context.rect(current_left,current_top,bar_width,unit_height); context.fillStyle=hsvToRgb(arg_h,current_satu,arg_v); context.fill(); current_top=current_top+unit_height; current_satu=current_satu-unit_satu; } // 外側の枠線を描画 context.beginPath(); context.rect(0,0,bar_width,bar_height); context.strokeStyle="gray"; context.lineWidth=1; context.stroke(); } // パレット内にマウスがある時座標の取得+色の再計算の関数 function hover_color_pallet(e){ //座標を取得する var mX=e.pageX; var mY=e.pageY; //座標を表示する mouse_x=mX; mouse_y=mY; current_hovering_hue=(mouse_x-pallet_left)*convert_xToHue; current_hovering_value=1-(mouse_y-pallet_top)*convert_yToValue; current_hovering_color=hsvToRgb(current_hovering_hue,current_hovering_satu,current_hovering_value); current_color.style.backgroundColor=current_hovering_color; // 彩度バーの再描画 drawSatuBar(current_hovering_hue,current_hovering_value,current_selected_alpha); } // パレット内をクリックした際の挙動の関数 function click_color_pallet(){ // パレット内のマーカーの位置を変える pallet_marker.style.top=mouse_y-pml-1+'px'; pallet_marker.style.left=mouse_x-pml-1+'px'; // クリックした個所の色を取得する // クリックした色に変更する current_selected_hue=current_hovering_hue; current_selected_value=current_hovering_value; current_selected_color=hsvToRgb(current_selected_hue,current_selected_satu,current_selected_value); selected_color.style.backgroundColor=current_selected_color; selected_color_character.innerText=current_selected_color; // 彩度バーの再描画 drawSatuBar(current_selected_hue,current_selected_value,current_selected_alpha); } // 彩度バー内にマウスがある時の座標の取得+色の再計算の関数 function hover_satu_bar(e){ //座標を取得する var mX=e.pageX; var mY=e.pageY; //座標を表示する mouse_x=mX; mouse_y=mY; current_hovering_satu=1-(mouse_y-satu_top)*convert_yToSatu; current_hovering_color=hsvToRgb(current_selected_hue,current_hovering_satu,current_selected_value); current_color.style.backgroundColor=current_hovering_color; } // 彩度バー内をクリックした際の挙動の関数 function click_satu_bar(){ // 彩度バー内のマーカーの位置を変える satu_marker.style.top=mouse_y+'px'; // satu_marker.style.left=satu_left+'px'; // クリックした色に変更する current_selected_satu=current_hovering_satu; current_selected_color=hsvToRgb(current_selected_hue,current_selected_satu,current_selected_value); selected_color.style.backgroundColor=current_selected_color; selected_color_character.innerText=current_selected_color; // カラーパレットの再描画 drawPallet(current_selected_satu,current_selected_alpha); } // カラーパレット内でマウスホイールでサイドバーを動かすための関数 function wheel_satu_bar(e){ var delta=e.deltaY // 現在のマーカーのy座標 var current_satu_maker_y=Number(satu_marker.style.top.split("px")[0]); // 更新後のマーカーのy座標 var new_satu_maker_y=0; if(delta>0){//delta>0 → ホイールは下向き new_satu_maker_y=Math.min(current_satu_maker_y+unit_satu_maker_move,satu_maker_upper_limit); }else{ new_satu_maker_y=Math.max(current_satu_maker_y-unit_satu_maker_move,satu_maker_lower_limit); } // 彩度マーカーの位置の更新 satu_marker.style.top=new_satu_maker_y+'px'; // 現在の彩度を設定 current_selected_satu=current_hovering_satu=1-(new_satu_maker_y-satu_top)*convert_yToSatu; // 選択した色と現在の色を更新する current_hovering_color=hsvToRgb(current_hovering_hue,current_hovering_satu,current_hovering_value); current_selected_color=hsvToRgb(current_selected_hue,current_hovering_satu,current_selected_value); current_color.style.backgroundColor=current_hovering_color; selected_color.style.backgroundColor=current_selected_color; selected_color_character.innerText=current_selected_color; // 連続で描画すると非常にもっさりと重くなるため、ホイールが止まったら描画する様にする clearTimeout(pallet_timer); pallet_timer=setTimeout(function(){drawPallet(current_selected_satu,current_selected_alpha)},50); } // マウスの位置を追尾する // ホバー中カラーパレット、彩度バーの再描画をする window.onload=function(){ color_pallet_dummy.addEventListener("mousemove",hover_color_pallet); saturation_bar_dummy.addEventListener("mousemove",hover_satu_bar); } // カラーパレットからマウスが出たタイミングで、彩度バーの再描画をする color_pallet_dummy.addEventListener("mouseout",function(){ drawSatuBar(current_selected_hue,current_selected_value,current_selected_alpha); }); // ホイールで彩度の変更を可能にする color_pallet_dummy.onwheel=wheel_satu_bar; // -------------------------------------------------- // //----- カラーパレットの描画 -----// // キャンバスサイズの調整(描画するタイル数で割り切れる様に調整) drawPallet(current_selected_satu,current_selected_alpha); //----- マーカーの描画(初期位置は左上) -----// context=pallet_marker.getContext("2d"); // moveTo|始点。lineTo|終点 // 白線 context.lineWidth=2; context.strokeStyle="white"; // 横線 context.beginPath(); context.moveTo(0,pml); context.lineTo(pml*2,pml); context.stroke(); // 縦線 context.beginPath(); context.moveTo(pml,0); context.lineTo(pml,pml*2); context.stroke(); // パレットのマーカーを初期位置(左上)にセット pallet_marker.style.top=pallet_top-pml+1+'px'; pallet_marker.style.left=pallet_left-pml+1+'px'; // パレット内をクリックした際の挙動を設定 color_pallet_dummy.onclick=click_color_pallet; // -------------------------------------------------- // //----- 彩度バーの描画 -----// drawSatuBar(current_selected_hue,current_selected_value,current_selected_alpha); //----- 彩度マーカーの描画 -----// // 彩度バーの左上 var satu_left=saturation_bar.getBoundingClientRect().left+window.pageXOffset; var satu_top=saturation_bar.getBoundingClientRect().top+window.pageYOffset; // 彩度マーカーの上限下限の設定 satu_maker_upper_limit=satu_top+bar_height; satu_maker_lower_limit=satu_top; // 彩度バーのサイズ調整 satu_marker.width=bar_width; satu_marker.height=2; satu_marker context=satu_marker.getContext("2d"); // moveTo|始点。lineTo|終点 // 白線 context.lineWidth=2; context.strokeStyle="white"; // 横線 context.beginPath(); context.moveTo(0,1); context.lineTo(bar_width,1); context.stroke(); // 彩度バーのマーカーを初期位置(左上)にセット satu_marker.style.top=satu_top+'px'; satu_marker.style.left=satu_left+'px'; // 彩度バー内をクリックした際の挙動を設定 saturation_bar_dummy.onclick=click_satu_bar; // -------------------------------------------------- // // 現在の選択色の見本とRGBの表記の表示 selected_color.style.backgroundColor=hsvToRgb(1,1,1); selected_color_character.innerText=hsvToRgb(1,1,1); current_color.style.backgroundColor=hsvToRgb(1,0,1); // コピーボタンをクリックしたらコピー selected_color_copy.onclick=function(){ navigator.clipboard.writeText(selected_color_character.innerText); } </script> おわりに 今回作った様なものは既にありそう感じがするのですが、探しても見つからなかったためGWの暇つぶしを兼ねて作ってみました。 またライブラリ等は使用せずフルスクラッチで作ったため、想像以上にコードが長くなり予期せず400行越えのコードとなってしまいました。(ライブラリを使うとライブラリの仕様変更に振り回されることもあるかと思い使用しませんでした。) 処理速度等も気にして多少は工夫してコーディングしていますが、もしアドバイス等あれば頂けると幸いです。 お読みいただきありがとうございました。
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

静的なToDoリスト

概要 HTMLとCSSでToDoリストを作りました。 JSで動きを付ける前の静的なサイトです。 ①タスク入力欄 ②タスクの優先度をラジオボタンで作りました。 ③inputから入力された値がテーブルタグに追加されます。 ④完了したタスクはチェックボックスをクリックすることにより削除されます。 HTML(入力欄) ToDo入力欄です。 index.js <section1> <div class="form"> <label for="todo" class="todos">ToDo</label> <input type="text" placeholder="タスクを入力してね" id="todo"> <input type="radio" name="todo" value="high" class="radio1"> <label>高</label> <input type="radio" name="todo" value="medium" class="radio2"> <label>中</label> <input type="radio" name="todo" value="low" class="radio3"> <label>低</label> <button class="submit">DO</button> </div> </section1> 1,ラジオボタン input要素のtype属性にradioを追加するとラジオボタンになります。ラジオボタンは、複数の選択項目のうち1つだけ選択できる形式のボタンです。共通項目に使用するラジオボタンにはすべて同じ名前を指定する必要があります。 またデータが送信されたときにどの項目が選択されたのかを判別するためにvalue属性には個別の値を指定します。 今回のnameはtodo、valueは優先度の高さheigh,medium,lowとしました。 HTML(テーブル) 次にデータ追加後のデータが反映される、テーブルです。 index.html <section2> <table> <caption>リスト</caption> <tr> <th class="col-1">日付け</th><th class="col-2">ToDo</th><th class="col-3">重要度</th><th class="col-4">完了</th> </tr> <tr> <td>5/5</td><td>ご飯を食べる</td><td>高い</td><td><input type="checkbox" name="do" value="Done"></td> </tr> </table> </section2> 1,trタグ テーブルタグの行に当たります。 2,th table headerの略です。 このリストの見出しに当たります。また,各見出しの幅を設定するためにclass属性を付与しました。 CSSでは以下のように設定しました。 style.css .col-1 { width: 10%x; } .col-2{ width: 60%; } .col-3 { width: 10%; } .col-4{ width: 10%; } 3,td テーブルタグのデータです。 ToDoフォームに入力されたデータが反映されます。 4,チェックボックス input属性にcheckboxを指定するとチェックボックスになります。チェックボックスは、複数の選択項目の中で個数を限定せずに選択できるようにする場合に使用します。 name,value属性はラジオボタン同様です。
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

ドロップダウンメニューをHTML+CSSで実装

一階層のみのドロップダウンメニューをHTML+CSSで実装する方法です。 こちらを参考にしました。
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

Java HTMLをPDFに変換 

今日は Spire.PDF for Javaという無料のライブラリを使って、HTMLをPDFに変換する方法を紹介します。今回はSpire.PDF for Java 3.6.6以上のバージョンが必要なので、要注意です。また、従来の方法とは違って、今度はGUI機能も必須だから、Xvfbといったようなプログラムをダウンロードしておいてください。 下準備 1.E-iceblueの公式サイトからFree Spire.PDF for Java無料版をダウンロードしてください。   2.IDEを起動して新規プロジェクトを作成してから、インストールされたファイルにあった相応しいSpire.PDF.jarを参照に追加してください。 import com.spire.pdf.graphics.PdfMargins; import com.spire.pdf.htmlconverter.qt.HtmlConverter; import com.spire.pdf.htmlconverter.qt.Size; public class HtmltoPDF { public static void main(String[] args) { //HTML を名付ます。 String url = "https://www.google.com/"; String fileName = "Result.pdf"; String pluginPath = "D:/Qt/plugins_32"; HtmlConverter.setPluginPath(pluginPath); //PDFで保存ます。 HtmlConverter.convert(url, fileName, true, 1000000, new Size(600f, 900f), new PdfMargins(0)); } } 実行結果  
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

C# PowerPointをHTMLに変換

今日はC#についての話です。そして、Spire.Presentationという無料のライブラリを使って、PowerPointをHTMLに変換する方法を紹介します。 下準備 1.E-iceblueの公式サイトからFree Spire. Presentation無料版をダウンロードしてください。 2.Visual Studioを起動して新規プロジェクトを作成してから、インストールされたファイルにあった相応しいSpire. Presentation.dllを参照に追加してください。 (Net 4.0を例としたら、デフォルトパスは“Bin→NET4.0→Presentation.dll”というようになります。) 元のファイル using Spire.Presentation; namespace ConsoleApplication1 { class Program { static void Main(string[] args) { //PowePoint Objectを作成します。 Presentation ppt = new Presentation(); //ファイルをロードします。 ppt.LoadFromFile(@"Sample.pptx"); //HTMLで保存します。 ppt.SaveToFile("ConvertPPTtoHtml.html", FileFormat.Html); } } } 実行結果  
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

【2021年現在】初心者でもご安心。chartkickのインストールの仕方(rails 6)

アプリケーションにグラフを差し込むのに便利なchartkickの説明(導入メイン)となります。 1.Chartkickの導入 gemfileに gem 'chartkick' を記述。その後忘れずにbundle installも! 続いて % yarn add chartkick chart.js ※こちらのコマンド忘れずに そしてapp/javascript/packs/application.js内に import "chartkick/chart.js" を記述する! ※もしグラフが上手く表示されない場合は app/javascript/packs/application.js内の記述を import "chartkick/chart.js"ではなく require("chartkick") require("chart.js") としてみてください。 rails5以前 の方は //= require chartkick //= require Chart.bundle こちらを。 2.グラフ表示 いよいよグラフ表示です! グラフを表示させたい「○○.html.erb」に <%= pie_chart [['赤', 50], ['青', 50]]%> と記述。 この段階で画面上に円グラフが表示されているか確認することで、chartkickがちゃんと導入できているか確認することができます。 ※もし上手く表示されない場合、『サーバー閉じてからのrails s』  もしくは『js内の記述を変更』してみてください 3.グラフについて pie_chartの部分を変更すればグラフの種類も変更可能です column_chart(縦棒グラフ) bar_chart(横棒グラフ) line_chart(折れ線グラフ) 今回は速攻でグラフが表示されるかを確認するためコントローラーを経由せず、ビュー内に直接データ記述(赤50青50)しました。 一般的な使い方としては コントローラ内にデータ記述する方法など色々ありますので下のリンクをご参考に。 参考サイト chartkick 【Rails】Rails完結!グラフを簡単に作成できるライブラリChartkickについて簡単にまとめてみた
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

ページトップリンク+スムーススクロール【作成中】

概要 下記3つの方法で実現します jQuery CSS JavaScript jQueryでの実現方法 参考書籍 動くWebデザイン アイディア帳 実現方法 ページトップリンク aタグでトップ(#)にリンクする -----省略----- <p id="page-top"><a href="#">Page Top</a></p> ページトップリンクをクリックするとjQuery animate scrollTop:0 へ移動させる $('#page-top').click(function () { $('body,html').animate({ scrollTop: 0 }, 500); return false; }); 結果 思った通りに動作しました return falseの意味は下記で確認しました 【JavaScript】return falseの意味について総まとめ。コード付で解説 CSSでの実現方法 参考 CSSのみ!簡単にスムーズスクロールを導入する htmlはjQueryの場合と同じです html { scroll-behavior: smooth; } 結果 思った通りに動作しました 注意点 Safari、Opera、IEには対応していません JavaScriptでの実現方法 参考 【脱jQuery】Javascriptのみでスムーススクロールを実装【コピペ】 htmlの内容はjQueryに加えてid要素を付与 -----省略----- <p id="page-top"><a id = "page_top_link" href="#">Page Top</a></p> JSでaタグのクリックでスムースクロールする ※思っていたより簡単 const smoothScrollTrigger = document.getElementById("page_top_link"); smoothScrollTrigger.addEventListener('click', function(e) { e.preventDefault(); window.scrollTo({ top: 0, behavior: 'smooth', }); });
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

ページトップリンク+スムーススクロール

概要 下記4つの方法で実現します jQuery CSS JavaScript JavaScript+Vue.js jQueryでの実現方法 参考書籍 動くWebデザイン アイディア帳 実現方法 ページトップリンク aタグでトップ(#)にリンクする -----省略----- <p id="page-top"><a href="#">Page Top</a></p> ページトップリンクをクリックするとjQuery animate scrollTop:0 へ移動させる $('#page-top').click(function () { $('body,html').animate({ scrollTop: 0 }, 500); return false; }); 結果 思った通りに動作しました return falseの意味は下記で確認しました 【JavaScript】return falseの意味について総まとめ。コード付で解説 CSSでの実現方法 参考 CSSのみ!簡単にスムーズスクロールを導入する htmlはjQueryの場合と同じです html { scroll-behavior: smooth; } 結果 思った通りに動作しました 注意点 Safari、Opera、IEには対応していません JavaScriptでの実現方法 参考 【脱jQuery】Javascriptのみでスムーススクロールを実装【コピペ】 htmlの内容はjQueryに加えてid要素を付与 -----省略----- <p id="page-top"><a id = "page_top_link" href="#">Page Top</a></p> JSでaタグのクリックでスムースクロールする ※思っていたより簡単 const smoothScrollTrigger = document.getElementById("page_top_link"); smoothScrollTrigger.addEventListener('click', function(e) { e.preventDefault(); window.scrollTo({ top: 0, behavior: 'smooth', }); }); JavaScript+Vue.jsでの実現方法 htmlはクリックイベント追加 <footer id="footer"> <p id="page-top"><a v-on:click = "page_top_click" href="#">Page Top</a></p> -----省略----- </footer> var footer = new Vue({ el:"#footer", methods:{ page_top_click:function(e){ e.preventDefault(); window.scrollTo({ top: 0, behavior: 'smooth', }); } } })
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

検索ボックスの中にアイコンを入れる

某サイトのこれを真似してみたくなったので、備忘録として書きます。 <header> <div class="header-inner"> <h1>TESTタイトル</h1> <form> <input type="text" placeholder="アニメタイトルや声優で検索♪"> <button>あ</button> </form> </div> </header> あ はアイコンとします まだ程遠いですね。 1. form周りを整える .header-inner form input { width: 300px; height: 100%; display: block; padding: 0px 20px; border-radius: 20px; border: 1px solid black; font-size: 20px; line-height: 1; } inputタグはインライン要素なので、扱いやすいようにblock要素にします。 border-radiusでフォームを丸くします。 文字の打ちはじめの位置が左端スタートになってしまうので、input内の両端にゆとりを持たせるため padding を指定します。 2. placeholderに対してCSSを当てる .header-inner form input::placeholder { font-size: 14px; position: relative; bottom: 2px; } 3. ボタンを 検索窓の中に持ってくる .header-inner form { display: block; position: relative; height: 40px; } .header-inner form button { position: absolute; right: 7px; top: 50%; font-size: 25px; transform: translateY(-50%); } ここで、 position:relative, position:absolute が出てきます。 position:relative の起点は、現在いる位置からになります。 position:absoluteは、何も指定していなければページ全体になります。しかし、親要素にposition:relativeを加えることで、親要素を起点にすることができます。 なので今回のケースだと、 - formに対して position:relative を指定する - buttonに対して position:absolute を指定して、 formを親要素として、位置を決める ことによって、ボタンの位置をform内で自由に動かすことができます。 top: 50%; transform: translateY(-50%); を指定することによって、親要素の高さが可変になっても button の位置が真ん中をキープするようになります。 だいぶ近くなりました。
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む