20210417のHTMLに関する記事は6件です。

【初心者でもわかる】CSSで「✕」の作り方

どうも7noteです。CSSオンリーで「✕」を作ります CSSを使って✕を作ります。 コピペで使えますよ。 線の端を丸くすることも可能 cssで✕の作り方 .batten { width: 20px; /* 線の長さ */ position: relative; /* 基準位置に指定 */ } .batten::before, .batten::after { content: ""; /* 疑似要素に必須 */ width: 100%; /* 幅いっぱいを指定 */ height: 2px; /* 適度な太さを指定 */ display: inline-block; /* 高さを持たせるためにinline-blockを指定 */ background: #aaa; /* 線の色を指定 */ border-radius: 2px; /* 線の端を丸くしたいなら指定する */ position: absolute; /* 相対位置に指定 */ top: 0; /* 表示位置を上から0pxに指定 */ left: 0; /* 表示位置を左から0pxに指定 */ } .batten::before { transform: rotate(45deg); /* 時計回りに45度回転させる */ } .batten::after { transform: rotate(-45deg); /* 反時計回りに45度回転させる */ } ハンバーガーメニュー(3本線メニュー)から✕に変わるやつ こちらは過去の記事で紹介しているので以下からご覧ください。 まとめ テキストで✕にしてもいいのですが、線1本ずつに装飾したり、アニメーションをさせるならcssで✕を作ったほうが勝手がいいですね。 あとはborder-radiusで線の端を丸くできるので、デザイン的にも◎。 おそまつ! ~ Qiitaで毎日投稿中!! ~ 【初心者向け】WEB制作のちょいテク詰め合わせ
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

自己紹介サイト作成で学んだこと

自己紹介サイト制作で学んだこと HTML CSS vscodeの使い方 拡張機能   素材やテンプレサイト HTML - 画像挿入方法 htmlファイルと同じところにimagesフォルダがある場合 <img src="/images/ロゴ.png" alt="ロゴ画像" width="111" height="20" /> - 構成の提案(自分がやりやすいのが一番ですが) <html lang="ja"> <head> </head> <body> <header> <div class="header-container"> /*上バナー:/ </div> <div class="header-content"> /*大きなタイトル*/ </div> </header> <main> <section class="comment"> </section> <section class="profile"> </section> <section class="target"> </section> </main> <footer></footer> </body> </html> CSS - 感覚的にdivのサイズを整える方法 paddingとborderを変更してもwidth50%をちゃんと画面の半分としてくれる 下のをccsファイルに貼り付けるだけ *, *:before, *:after { -webkit-box-sizing: border-box; box-sizing: border-box } 【CSS】box-sizing:border-boxの使い方|効かない時は? - 便利なbodyの設定 body { margin: 0; /*ページ左や上のスペースをなくす*/ display: flex; flex-direction: column; min-height: 100vh; /*3行で直下のdivをタテにきれいに並べる*/ } HTMLとCSSだけでフッターの隙間を解消する方法 - タイトルの背景画像設定 header { margin: 0; height: 400px; background-image: url("./images/背景用画像.jpg"); /*画像の指定*/ background-size: cover; /*スペースを画像で埋める*/ background-repeat: no-repeat; /*画像の繰り返しなし*/ background-color: rgba(255, 255, 255, 0.5); /*0.5をいじって濃さ変更できます*/ background-blend-mode: lighten; /*2行で画像をうすくする*/ } - divを上手く配置する .horizontal { display: flex; /*直下のdivをflex-boxにする*/ flex-wrap: wrap; /*flex-boxの横幅に応じて新しい行を追加*/ /*width:50%;を4つなら2列2行で配置*/ } .horizontal div{ width: 50%; /*2つ綺麗に並ぶ*、border-boxと併用すると〇*/ height: 300px; /*高さご自由に*/ } - 画像の挿入 divに入れるとわかりやすい .horizontal img { width: auto; height: 100%; /*縦横比そのまま高さがdivの100%逆もしかり*/ } vscode 1ウィンドウにつき1フォルダーを開きましょう 左上のfileからnew windowで新しいwindow開けます mdファイル作ってみましょう file→new fileから作成、名前変更で拡張しを.mdに 参考動画 vscodeでのマークダウンの使い方 ___ 拡張機能 コードを綺麗に整えたい「prettier」 prettier onSave vscode 動かない時の対処法 上のタグを変えたら下も変わってほしい「Auto Rename Tag」 いいクラス名考えてほしい「codic」 変数のネーミングに悩む方にお勧め!プログラマーのためのネーミング辞書「codic」 ここを一気にdivタグでくくりたい「htmltagwrap」 Visual Studio Codeでhtmltagwrapを使って選択した文字列をタグで囲む インデントをわかりやすくしてほしい「indent-rainbow」 一度使ったクラス名を簡単に入力したい「IntelliSense for CSS class... 」 便利なフリー素材サイト アイコンサイト FLAT ICON DESIGN 写真サイト O-DAN プロフィールテンプレ WiX-プロフィールテンプレート
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

セレクトボックスで選んだ数だけ要素を追加する

セレクトボックスで数字を選び、選んだ数字の数だけ要素を追加する方法。 liタグの数を変える。 html <select name='addNumber'> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> </select> <ul id="addTarget"> <li>最初の要素</li> </ul> jquery $('[name=addNumber]').on('change', function(){ //追加要素をいったん全部消す $(".addContent").remove() //セレクトボックスから数字を取ってくる let num = $('[name=addNumber]').val() //セレクトボックスの文字を数字にする num = Number(num) //追加するコンテンツ let add_content = '<li class="addContent">追加</li>' //要素数が2個以上は追加 if(num > 1){ for (let i=1; i<num; i++) { $('#addTarget').append(add_content) } } });
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

Simple URL Copy [F]のaタグ生成ものぐさコマンド

はじめに この記事は以下の人に有益……かもしれません。 Simple URL Copy [F] - Chrome ウェブストアをインストールしている人 今もなおHTML個人サイトを運用しているいにしえの民 HTMLサイトにリンクを貼りたいけど、いちいちaタグを書いてURIコピペするのが面倒だと思っている人 MarkDownにリンク貼るのが地味に面倒だと感じている人 Simple URL Copy [F] とは URIをタイトルごとコピーできる拡張機能です。 MarkDownの[タイトル](URI)のフォーマットでコピーすることもできます。Qiitaにリンクを貼るのが便利になりますよ! Simple URL Copy [F] - Chrome ウェブストア HTML<a>リンク生成コマンド 以下の文をSimple URL Copy [F]のOption欄に貼り付けてください。ラベルは自由に設定してください。 <a href="{url}" target="_blank">{title}</a> Option画面はこれです。 使ってみた コピーしたHTMLタグ <a href="https://www.hanmoto.com/bd/isbn/9784065166796" target="_blank">方言の地図帳 佐藤 亮一(編集) - 講談社 | 版元ドットコム</a> Chromeじゃないだろって?私はVivaldi派です。タブスタックは正義。 中身はChromeなので拡張機能も同じように使えます。
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

PS5の抽選販売の申し込みが始まったら通知する

今週頭にビックカメラで抽選販売の申し込みがあったようなんですが、気付いた時には〆切を過ぎていて申し込めませんでした。 そこで、抽選販売の最新情報をまとめたページが更新されたら通知するようにしよう、というお話です。 もくじ IFTTTでは無理 DOS + VBScript おわりに IFTTTでは無理 こういうのは IFTTT だろーと思ったんですが、無理でした。 RSSの更新チェックは出来ますが、既存のページの更新は追えず。。。 かわりにコチラのサービス(VisualPing)を使おうと思ったんですが、ただでさえPS5買うために色んなショップのアカウントを作っているのにさらに増やすのか、ということで見送り。 DOS + VBScript 困ったときはこいつらの出番ですね。PS5の抽選の通知を受け取るだけのために時間かけてもしょうがないし、自宅のPCは基本的に電源を落とさないし、ということで。 (PowerShell なら単体でダイアログを出せそうですが、あまり触る機会もなく) -- 方法は curl でページの HTML を取得して <time datetime= という文字列を探して変更があったらメッセージボックスを出すだけです。 ※ 送られてくる HTML が minified されてると上手く動かないかも @echo off ::: Settings ::: set TARGET_URL="https://gamewith.jp/ps5/article/show/1255" set TARGET_STRING="<time datetime=" set DIALOG_TITLE="PlayStation 5" set DIALOG_MSG="Press OK to see PlayStation 5 Lottery Details." set INTERVAL_SEC=1200 ::: Do it ::: set UPDATED="NULL" set LAST_UPDATED=%UPDATED% set VBS_FILENAME=%TEMP%\%~n0_MsgBox.vbs goto :MAIN pause goto :EOF :MAIN for /f "delims=" %%I in ('curl %TARGET_URL% ^| find /i %TARGET_STRING%') do set UPDATED="%%I" echo. echo %UPDATED% if "" equ "%UPDATED:"=%" ( echo Target String is not found in specified URL... pause goto :EOF ) if "%LAST_UPDATED:"=%" neq "%UPDATED:"=%" ( set LAST_UPDATED=%UPDATED% echo if 1 = msgbox^(%DIALOG_MSG%,vbOkCancel+vbExclamation+vbApplicationModal,%DIALOG_TITLE%^) then > "%VBS_FILENAME%" echo WScript.CreateObject^("Shell.Application"^).ShellExecute^(%TARGET_URL%^) >> "%VBS_FILENAME%" echo end if >> "%VBS_FILENAME%" "%VBS_FILENAME%" ) goto :INTERVAL :INTERVAL timeout %INTERVAL_SEC% >nul goto :MAIN <time> タグとかなんやねん細かいなって思ってましたが、こういう時には便利ですね。GameWith のページもこのあたりシッカリ作られていて助かります。 おわりに ローカルにコンテナ?を建てて似たようなものを作る → コンテナのホスティングサービスに出来たものを乗っける。 て感じで簡単にウェブサービス化できたりするんですかねー? 気が向いたら調べたいところです。 以上です。お疲れ様でした。
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

Canvas要素の使い方

ご注意! この記事は学生の勉強備忘録です。 曖昧な表現や、誤りが含まれる可能性があります。 閲覧いただく際は、あくまで参考程度に… また、修正やご意見などはドシドシいただけると大変うれしいです。 宜しくお願い致します。 Canvas要素とは Canvas要素とは、HTML5で追加されたウェブページ上でグラフィックスを描くための要素です。 従来、図形などを表示させたい場合、JPEG等の画像を埋め込むか、Flashなどを使っていた表現をHTMLとJavaScriptを用いて表示させることが出来ます。 Canvas要素の基本的な使い方 HTML <canvas id="ID" width="200" height="200"></canvas> まずは、HTMLでCanvasを用意します。 idは自由に変更して記入してください。 キャンバスの大きさは必要であれば記入してください。 次にJavaScriptです。 JavaScript var canvas = document.getElementById( "ID" ) ; var context = element.getContext( "2d" ) ; context.beginPath () ; この3行はほぼセットで必ず書くものとして覚えておいて大丈夫です。 一行目でcanvas要素のDOMオブジェクトをdocument.getElementByID()メソッドを用いて取得します。 二行目では、getContext()メソッドを用いて、canvasに描いていく準備としてコンテキストの参照を取得します。引数にある“2d”は、平面図形のことを指します。現状、3dなど他の値の指定はできません。 三行目のbeginPathメソッドは、主に複数の図形を描画するときに使用します。 「それまでのパスをリセットして新たにパスを始めますよ~」というような意味になります。 その為、2つ目の図形を描く際に、1つ目に書いたパスの影響を受けないようにするために書くものという感じです。 実際に試してみてみたい方はコチラ ➡ w3c scools 『HTML canvas beginPath() Method』 (↑2つ目の図形のbeginPathメソッドをコメントアウトすると、1つ目の図形も、2つ目の図形の色になります。) では、ここから実際に図形を描いてみましょう。 四角形の描画 HTML <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <script type ="text/javascript" src = "practive.js"></script> <title>Canvas要素を使って図形を描いてみよう</title> </head> <body> <canvas id = 'ID' width = "600" height ="200"></canvas> </body> </html> JavaScript window.onload = function(){ var canvas = document.getElementById('ID'); if(canvas.getContext){ var context = canvas.getContext('2d'); //塗りつぶしの四角形 context.fillRect(50,50,100,100); //線画の四角形 context.strokeRect(200,50,100,100); //塗りつぶしと線で色の変える四角形 context.beginPath(); context.rect(350,50,100,100); context.fillStyle = "yellow"; context.fill(); context.strokeStyle = "red"; context.lineWidth = 3; context.stroke(); } } 結果↓ ※if(canvas.getContext){ は、ブラウザがcanvas要素に非対応だった場合の実行を事前に防止するためのものです。 ※window.onload = function(){ は、HTMLを実行してからJSを実行するためのコードです。 ☆ 塗りつぶしの図形描画のメソッド:fillRect(X,Y,幅,高さ) 初期値では、塗りつぶしや線の色は#000(black)になります。 ※X,Y = 左上からの位置座標 ☆ 線だけの図形描画のメソッド:strokeRect(X,Y,幅,高さ) ☆ 四角形を作るメソッド:rect(X,Y,幅,高さ)  ↑このメソッド単体だと、透明なままで可視化することが出来ません。  strokeメソッドやfillメソッドを併用して、描画していきます。  それぞれ、strokeStyleやlineWidth、fillStyleを指定することで、  塗りつぶしと線の色が異なる四角形を描画することが出来ます。 多角形の描画 JavaScript context.moveTo(100,50); context.lineTo(20,130); context.lineTo(180,130); context.closePath(); context.fillStyle="rgba(0,0,255,0.1)"; context.fill(); context.strokeStyle = "rgb(0,0,0)"; context.stroke(); 結果↓ ☆最初の点の位置 : moveTo(X,Y) ☆2つ目、3つ目(ect)の点の位置 : lineTo(X,Y) ☆始点と終点を繋いでパスを閉じる : closePath() 円弧の描画 JavaScript context.arc(100,100,70,0,2*Math.PI); context.stroke(); context.beginPath(); context.arc(270,100,70,0,1*Math.PI); context.stroke(); context.beginPath(); context.arc(440,100,70,0,1*Math.PI,true); context.stroke(); 結果↓ ☆円弧の描画 : arc(X,Y,半径,円弧の開始地点,終了地点,時計回りor反時計回り) ※座標は、中心点の位置座標。 ※第5引数を2*Math.PIに指定することで円を描画できる。 ※第6引数は、指定しない場合「時計回り(false)」となる。  反時計回りにしたい場合は、「true」を指定する。 ◎参考:MDN『CanvasRenderingContext2D.arc()』 その他の使用方法について 簡単な図形は上記のメソッドを組み合わせることで描画できます。 ベジェ曲線など、ほかにも沢山あるCanvas要素の使い方は以下のサイトを紹介させていただきます… 参考:HTMLリファレンス『canvas』 おわりに ここまで読んでくださりありがとうございました。 ご指摘や参考サイト、アドバイスなどコメントもお待ちしております。
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む