20210511のHTMLに関する記事は4件です。

備忘録 Goでginを使う時に、cssやjsのファイルが読み込めない問題の解決

書いた理由 go言語でginを使っていたら、htmlからjsが読み込めない問題が発生したので、忘れないようにメモっておきます。また、ginを使わない場合でも同様の操作が必要らしいです。 cssの読み込みも同様にやるので、省略します。 ディレクトリについて githubに今回のコードはおいてあります。 correct.goが正常に動作するプログラムで、incorrect.goが正常に動作しないプログラムです。 ./ ├── correct.go ├── incorrect.go └── src ├── index.html └── js └── main.js htmlとjs ボタンを押すと、alertでPushed!!と出るだけの簡単なプログラムです。 index.html <html> <head> <title>gin-js</title> <script defer="defer" src="./js/main.js" ></script> </head> <body> <button id="btn">Push!!</button> </body> </html> main.js document.getElementById("btn").onclick=function(){ alert("Pushed!!") } 失敗するプログラム /に接続すると、index.htmlが表示されるいたって簡単なプログラムです。 incorrect.go package main import "github.com/gin-gonic/gin" func main() { router := gin.Default() router.LoadHTMLGlob("src/*.html") router.GET("/", func(ctx *gin.Context) { ctx.HTML(200, "index.html", gin.H{}) }) router.Run() } 実行すると/js/main.jsにGETリクエストをして、404が返ってきています。 成功するプログラム correct.go package main import "github.com/gin-gonic/gin" func main() { router := gin.Default() router.Static("/js", "src/js/") // ここを追加するだけ! // router.Static("HTMLで読み込むURL","読み込むファイルがあるディレクトリの場所") router.LoadHTMLGlob("src/*.html") router.GET("/", func(ctx *gin.Context) { ctx.HTML(200, "index.html", gin.H{}) }) router.Run() } 実行すると/js/main.jsにGETリクエストをして、200が返ってきて成功しています! 静的なファイルにはこのメソッドを使用するらしいです。(詳しくは自分で調べて...) router.Static("HTMLで読み込むURL","読み込むファイルがあるディレクトリの場所") 最後に 調べても全然出てこなく、30分ぐらいかかったので備忘録&周知のために記事を書きました。 誰かの役に立ったら幸いです。 今回のリポジトリ
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

【初心者でもわかる】マウス操作だけで動きをつけたり見た目が変わるHTML、CSSたち

どうも7noteです。JavaScriptを使わなくてもマウス操作だけで見た目に動きをつけたり変化ができるHTML・CSSについて。 HTMLやCSSの中には、マウス操作によって見た目を変える方法がいくつかあります。 JavaScriptを使ってCSSを変更したり、クラスを付与して変化をつけなくても、HTML、CSSだけでこれだけできるんだっていうのを共有できたらと思います。 マウス操作で変化するHTML・cssたち。 「マウスホバー(:hover)」 style.css a:hover { text-decoration: none; } 「フォーカス(:focus)」 style.css input[type="text"]:focus { background: #fcc; } 「チェック(:checked)」 style.css input[type="checkbox"] { display: none; } input[type="checkbox"] + span { position: relative; } input[type="checkbox"] + span::before { content: '□'; } input[type="checkbox"]:checked + span::after { content: '✓'; color: #f00; position: absolute; left: 0; bottom: -2px; } 「details & summary」 index.html <details> <summary>みだし</summary> 内容内容<br>内容内容 </details> 「#idでスクロール」 index.html <div><a href="#hogehoge">ほげほげへ移動</a></div> <div id="fugefuge">ふがふが</div> <div id="hogehoge">ほげほげ</div> まとめ JavaScriptを使わなくても、簡易的な動きをつけるだけならHTML・CSSだけでも十分可能です。 とくに:checkedを使ったチェックボックスの方法は自由度が高いので、覚えておくと使えるタイミングがあるかなと思います。 他にもあるような気がするので、思いつき次第追記していきます。 おそまつ! ~ Qiitaで毎日投稿中!! ~ 【初心者向け】WEB制作のちょいテク詰め合わせ
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

AR.jsで簡単なARを作る!

用意するもの ・マーカーになるpattファイル ・htmlファイル 以上!超簡単 pattファイルの作成 以下で簡単に作成できる。 https://jeromeetienne.github.io/AR.js/three.js/examples/marker-training/examples/generator.html pattファイルとimgファイルを両方ダウンロードするのがベター。 htmlファイルの作成 <!DOCTYPE html> <html> <script src="https://aframe.io/releases/1.0.0/aframe.min.js"></script> <script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar.js"></script> <body style="margin: 0px; overflow: hidden;"> <a-scene embedded arjs> <a-marker type="pattern" url="patt.patt"> <a-box position="0 -1 0" scale="1 1 1" color="grey"></a-box> </a-marker> <a-entity camera></a-entity> </a-scene> </body> </html> <a-marker type="pattern" url="patt.patt">に作成したpattファイルのパスを上げる。 ARを体験してみる。 上記で作成したhtmlにアクセスすると、カメラが起動する。 そのカメラでpattファイルを作成した時にダウンロードしたimageファイルを映してみると、3DのBOXが出てくる。 すっごい簡単。
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

videoタグの操作色々

概要 videoタグの属性やJSでの操作について、実務で使用したものをまとめる。 属性 muted : 音声をミュートにする autoplay : 自動再生 playsinline : iOSだと自動再生されないので、これが必要 上記3つはほぼ確定で設定しておくべき(自動再生をさせたい場合) JSの操作 メソッド element.play() : 動画を再生 element.pause() : 動画を停止 イベント ended : 動画の終了時に発生するイベント その他 iPhoneの場合(アンドロイドはわからない。。)、省電力モードがONになっていると動画の自動再生はされないので注意。 スマホで一度ブラウザからホームに戻って、その後またブラウザを開いても動画は停止したままになる。
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む