今さら聞けないHTML　2023年10月08日

aタグの挙動は上書きできる

# TL;DR
a タグはクリック時にデフォルトで別のリンクへ移動するという挙動をするが、JS側でその挙動を書き換えることができる。

# きっかけ
あるWebシステムのスクレイピングをしていた時に、aタグなのに遷移されないサイトを発見した。
内部実装が気になり調べてみた。

# jQueryでの実装
実装部を確認したところ、jQueryで実装されていた。
以下が該当部分である。
“`js
// ドキュメントの読み込み終了時
$( document ).ready( function (){
// リンククリック時
$(‘.play_vod’).live(“click”,function(event){
// 行いたい挙動をここに記述
return false;
});
});
“`

# 素のJSでの実装
jQueryを用いずに実装する場合、以下のようにできるらしい。
`preventDefault` でDefaultな挙動を防止。
“`js
// 要素の取得 & リスナーの設定の
document.getElementById(‘myLink’).addEven

新しいダブでリンクを開く方法 【HTML】

以下のように`a`タグを記述することでリンクを新しいタブで開けます。

“`html

“`

【HTML】Google Mapの縮尺を変更してみよう！

?埋め込んだGoogle Mapの縮尺変更方法

?埋め込みコードの中にある
「!4f13.1」の「13.1」を変更すればOK！

・「1～180」まで指定可能
・1：狭い範囲を表示
・180：広い範囲を表示（世界地図）

試してみてくださーい✨！

See the Pen
Google mapで縮尺変更 by tomok7 (

HTMLフォームタグのinputタグで使うname属性名って結局何？

# まとめ
HTMLフォームのinputタグで指定するnameは
「nameで指定した名前 = 値」
がリクエストパラメータとして送られる。
これはGETでリクエストパラメータで送り、URLを確認するとよくわかる。

## 経緯
~~~html
\

あなたの名前は？\

名前:\
\

~~~
このようなHTMLのフォームがあったとして、input属性の値は
どのような形で送られているか分からなくなったので調べてみた。

## 確認方法
POSTでは内部で処理が行われるため見た目では何が起きているか分かりにくいが
GETにするとURLの末尾にリクエストパラメータが表示されるので、どのような形でデータが送られているか分かるのでないかと考えた。

実際に送り方をGETに変え(method=GET)実行してみた。
テキスト欄にtanakaを入力して実行すると、URLの後半は
`…ファイル名.jsp?namae=tanak

高校生が約1か月で電車の自動運転を作った話

# はじめに
　この論文？は筑波大学の受験のために作成したが、残念ながら落ちてしまい、そのままこの論文？を放置するのは勿体ないと思い、公開するのことにした。
現在は、大学進学を考えているが、Jetsonを使用してスマート農業や、運搬ロボットなどを研究している会社があれば、就職したいと考えている。
~~もし、この記事を見たくださった方でJetsonなどの小型デバイスを使用したロボットなどの研究、開発をしておられる企業様がいらっしゃれば、連絡待ってます…~~
[@Neko_syashin](https://twitter.com/Neko_syashin)
## １. これまでの画像処理関係の活動
　私は、高校在籍時に独学でYoloを使用した画像認識を作成していた。そのときは、カメラや動画などを使い、人や車などを判別しカウント(図1)をしたり、カメラにサーボモータを取り付け、人が動いた方向に追尾するというシステム(図2)を開発していたり、車がバックするときにカーナビに表示される、空から見たような映像の開発(図3)などを行っていた。以下の画像がそのときに作成していたものである。
![画

WEBサイトのリンク切れは、一括でチェックしちゃおう！

長くWEBサイトを運用してページ数が増えたり、昔に作成したページなんかは気を付けないといつの間にかページ内のリンクが切れてたりなんてことがあります。

外部リンクを入れてたのに、リンク先のURLが変わってたりページが削除されたりもあるため、定期的に確認する必要があります。

ただ、ページ数が多いと１ページ１ページ見ているとものすごく大変なうえ、恐らく見落としが発生します。

そんな時はリンク切れをチェックする簡単なツールが存在するのでご紹介します。

私が最も利用しているものがリンクチェッカーです。
操作が凄く簡単なのでオススメです。

詳細な使い方はこちらの記事でご紹介しているので、ぜひご確認ください。

https://web-create-kokusyo.com/technique/link-broken/

javascriptでのソート機能について

## はじめに
この記事ではtableタグの一覧をjavascriptでソートするだけの機能を備忘録もかねて記載しています。

## ソース内容
百聞は一見に如かず、ソースは以下の通りです。
“`index.html

name	num	price
りんご	3個	HTMLの属性を、何となく使っていませんか？ ## 学習したいと思ったきっかけ 要素の後に属性を指定したけど、どんな役割があるかを知りたかった。 ## 属性を調べて分かったこと ①**要素は文章に意味を持たせる(マークアップをする)のに対し、属性は更に情報を追加したもの** 例えば、ハイパーリンクの機能を持つ<a>要素の場合 [before] 要素を指定しただけだと、ハイパーリンクの機能を持たない “`HTML Qiitaのホームページ “`  [after] そこに追加情報として、URLを指定するhref属性を付ければ、ハイパーリンクとして機能する “`HTML Qiitaのホームページ “` 。 ## 関数例 “`php 元記事を表示 LPをコーディングする(特に特集記事など)に気をつけるべきこと 表題の通りLPコーディング時に気をつけるべきことを残します。 # フォント指定があった場合の対応 * web-fontをlinkタグでインポートする。 * importをする。 以下のサイトでフォントの検索ができるので、link or importで対応できる。 https://fonts.google.com/ ※やり方は後日別の記事に書きます。 # metaタグのtitle, descriptionの内容をあらかじめ確認 * 後からでも別に問題はないけど、先に確認しておいた方がベター。 * パンくずリストがあった場合は、それも調整しておく。 # 既存のヘッダーやフッターが存在する場合 * 影響範囲も考えてsectionを作ること。 →ヘッダーやフッターにマージンが指定されていた場合は打ち消さないといけない。 その際に他の場所にも影響が及ぶ可能性があるので、最初に確認しておくとGoodかも。 # GoogleSpeedInsghtでスピードチェック サイトが完成したらGSIでスピードチェックを行う。 合格表示されればOK SEOに関しての分析や改善点も表示されるので、それを確 元記事を表示 [HTML][CSS] FlexBoxの適用方法とプロパティまとめ # 本記事で紹介したいこと CSSでレイアウトを組むためのFlexBoxの説明。 HTMLの要素をFlexBoxという箱でくくり、その中で要素の位置や並べ方を変更することができるイメージです。 # 適用元のHTMLとCSS 今回の実例で使用するソースコードです。 ここからFlexBoxを適用してレイアウトを変更していきます。適用前後の見た目が分かりやすいようにchildren要素の背景や文字色を変更しているだけという状態になります。 **HTML** “`html:flexboxTest.html 元記事を表示 CSS flexbox の基本を学んでみた ～Flexboxを学習した際の備忘録～ 前提知識 ・HTML、CSSの基礎 ### Flexboxとは Flexbox は、CSS の Flexible Box（Flexbox）というプロパティの一部で、Flexbox を使うと、コンテンツの配置、方向、サイズなどを柔軟に制御できるようになる。 ### 基本的な flex の使い方 **コンテナを flex または inline-flex に設定する** まず、子要素をFlexアイテムとして配置する親要素（コンテナ）を指定。 “`css .container { display: flex; /* または ‘inline-flex’ */ } “` **コンテナ内での主軸の方向を設定する** flex-direction で主軸の方向を指定。 “`css .container { flex-direction: row; /*row はデフォルト */ } “` デフォルトは row になっているが、他にも下記が選択可能。 ・row : 左から右への横並び ・column : 上から下への縦並び ・r 元記事を表示 【ハマりポイント解説】CSSでアイコン付きボタンを作る # はじめに Web制作においてボタンを実装する際にアイコンつきのボタンを実装するケースが多いかと思います。 加えて、最近はTailwindやUIテンプレートを使用することもあり、なかなか素のCSSを書く機会が減ってきました。 そんな中、久しぶりにCSSを書く機会があり、個人的にホバー時の挙動やアイコンの位置調整で少し躓いたので改めて作り方をざっくりまとめます。 :::note この記事ではCSSを使ったアイコン付きボタンの作り方を学べます ::: # 今回作るボタン（完成形） gridでつくる不揃いの画像ギャラリー # はじめに 画像ギャラリーをgridで実装しました。 7枚の画像が不揃いに並んでいるレイアウトです。  デザインカンプに準じて、 ①gridを使う、 ②画像の増減でレイアウト崩れしないように、 という指示のもと行ったコーディングです。 「画像が不揃い」というだけでも難しかったのですが、 「画像の増減でレイアウトが崩れないようにする」というのがさらに難しく、時間がかかりました。 その時のコードを見直し、違いを比較してみました。 # 読者対象 ・HTML/CSSでコーディングをしている人 ・gridレイアウトに不慣れな人 # 開発環境 用意するファイルはindex.htmlとstyle.cssです。 index.htmlからstyle.cssを読み込みます。 # 実装手順 ・gridで画像を不揃いに並べる。 ・画像の増減でレイアウトが崩れない 元記事を表示 OTHERカテゴリの最新記事 2024.11.09 iOS関連のことを調べてみた 2024.11.09 JAVA関連のことを調べてみた 2024.11.09 JavaScript関連のことを調べてみた 2024.11.09 Rails関連のことを調べてみた 2024.11.09 Python関連のことを調べてみた 2024.11.09 Lambda関連のことを調べてみた