- 0.1. HTML・CSS超入門[心構え編]
- 0.2. 【初心者が絶対知るべきショートカットキー】 ⭐️作業効率ぶっ壊れ
- 0.3. HTMLタグ
- 0.4. Unicode による国旗表
- 0.5. 備忘録 (CSS float)
- 0.6. VSCodeにFlaskを導入する方法ー補足ー
- 0.7. スマホで電話番号入力の際に数字のキーボードを出す（jQuery）
- 0.8. markuplint を VSCode に導入してみた
- 0.9. XPath1.0でクラスセレクター相当の要素選択をする
- 0.10. 【コピペだけ】THE THORでキラッと光るボタンを作る【HTML・CSS】
- 0.11. MicrosoftのWeb開発教材を使ってみた ③テラリウム構築 【HTML・CSS基礎/DOM操作/クロージャ】
- 0.12. ブログでrel属性を埋め込むときのタグと埋め込み位置についてメモしておく
- 1. 前提条件
- 2. dofollow属性について
- 2.1. HTML形式で社内DMを自作（ソフトと相性悪く不採用）したときのリファレンス
- 2.2. JavaでPDFをHTMLに変換してストリーミングに保存する方法
- 2.3. ブラウザでリンクをクリック時にPDFを表示とダウンロードを同時にする
- 2.4. たった10行で簡単に絞込みセレクトボックス（Javascript無し）
- 2.5. CSSのbackdrop-filterを使ってグレーアウトした背景をくり抜く
- 2.6. リンクをクリックするとjavascriptで指定の要素にスクロールする方法
- 2.7. ぶっちゃけ、タグっていらなくね？
- 2.8. HTMLのTableタグをJavaScriptの配列に変換する
HTML・CSS超入門[心構え編]
こんにちは。
こちらの記事はこれからHTML・CSSのお勉強を始めるズブズブの初心者です！！という方や、なんとなく習ったことはあるけれどもう一回基礎から勉強し直そうかなという方向けです。
このポイントを抑えていれば、それなりのフレームは作れるようになれるくらいになる。と筆者の思うポイントを書いていきたいと思います。
言うなれば「心構え編」です。具体的な内容を知りたい方は後日UP予定の具体的編（仮）をご覧ください。
（※この記事ではあくまでポイントの紹介になります。）
あーなるほど、自分に足りなかったのはここだったのかも。とお勉強の背中を少しでも押せることができたら幸いです。#【まずは心構えが大事。】
立派なWEBデザイナーになりたい！かっこいいプログラマーになりたい！など、目標はそれぞれかと思います。
ある程度の言語やスキルを身に付けて、とりあえずいい感じに成果物が完成できればいいんでしょ？と思ってるそこのあなた！
現場に出たら痛い目見ますよ！！お医者さんや看護師さん・学校の先生など、どんな職業でも言えることかと思いますが、どれだけ一流のWEBデザイナーやプログラマーでも日々勉
【初心者が絶対知るべきショートカットキー】 ⭐️作業効率ぶっ壊れ
#対象読者
・最近プログラミングを始めた方
・ショートカットキーを普段使わない方、知らない方
・PC操作にそもそも慣れていない方#はじめに
さあプログラミング人生スタートだっ！！
まずはHTMLとCSSだっ！！
ノンノン…?
プログラミングのスタートはHTMLとCSS。そうなのかもしれません。
ただ…
ショートカットキーを知ることもまたプログラミングのスタートだと思います。
嘘は絶対つきません。私は後悔しまくりました。ショートカットキーは想像を絶するほどに便利すぎます。
この記事では、プログラミングを始めたばかりの人が**本当に毎日必ず使うショートカットキー**のみを取り上げようと思います。（タイトル詐欺しないように…）#ショートカットキー
ショートカットキーとは、キーボードの決められたキーを押すことによって、操作をするものです。早速使いまくるショートカットキーを紹介していきます！| キー | 機能 |
|—–|—-|
| ⭐️command + C | 選択箇所のコピー |
| ⭐️command + V | コピーの貼り付け |
| ⭐️command +
HTMLタグ
## small
表示：小さく太い字になる
意味：補足説明## canvas
表示：imgに同じ
意味：座標によって画像を表示
Unicode による国旗表
:::note info
国旗の表示はブラウザの対応次第です
:::# 英二文字の国名コードを使った Unicode 国旗表
二文字の英大文字アルファベット（’A’〜’Z’）を、二つの Unicode （U+1F1E6 〜 U+1F1FF）に変換した、単純な 26×26 の表です。
## セル内がアルファベット順の表
| |A
B
C|D
E
F|G
H
I|J
K
L|M
N
O|P
Q
R|S
T
U|V
W
X|Y
Z
|
|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|A|??
??
??|??
??
??|??
??
??|??
??
??|??
??
??|??
??
??|??
??
??|??
??
??|??
??
備忘録 (CSS float)
CSS floatを使用したのに要素が横並びにならなかった。
原因：親要素であるbodyタグの幅が500pxの一方で、子要素の幅が200px x3 = 600pxとなっていたため。“`HTML
box1box2box3
“`“`CSS
body{
font-family: ‘Times New Roman’, Times, serif;
width: 500px;
}
.box1{
backgrou
VSCodeにFlaskを導入する方法ー補足ー
以前の記事 [VSCodeにFlaskを導入](https://qiita.com/Euphysics/items/db0d17dbd5416c480456) では、
>
+ 手順３
hogehoge.py ファイルを作り保存する。
>
ここでは以下のモノを試した。
>
“`python:hogehoge.py
from flask import Flask
app = Flask(__name__)
>
@app.route(“/”) #当然ここでの app は2行目の app を受けて。2行目が hoge = Flask… であれば @hoge.route(…) とする。
def hello_world():
return”Hello, World!
”
“`と minimal な構成を行っていた。
以下では、@app.route(“/”) 以降について補足しておく。
以前の hogehoge.py に代わり、次のモノを用意する。“`python:hogehoge2.py
from flask import Flask,render_tem
スマホで電話番号入力の際に数字のキーボードを出す（jQuery）
WordPressのプラグイン「MW WP Form」で、電話番号入力の際にスマホで数字キーボードを出したい！
そう思ったときによくあるのは、functions.phpに下記を追加するというもの“`php:functions.php
function my_do_shortcode_tag( ) {
if ( $tag == ‘mwform_text’ && $attr[‘name’] == ‘hoge’ ) {
$output = rtrim( substr( $output , 0 , -3 ) ) . ‘ inputmode=”tel” />’ . “\n”;
}
return $output;
}
add_filter( ‘do_shortcode_tag’, ‘my_do_shortcode_tag’, 10, 4 );
“`うまくいった！と思ったのですが…
バリデーションで入力エラーが出た後にもう一度入力しようとすると、数字のキーボードが出なくなりました…type属性をtelにしたらなんか入力項目が分割されてしまうし…
なにか方法がないかな〜と
markuplint を VSCode に導入してみた
背景
—–
「HTML5」から「HTML Living Standard」に変わったことで, 変更・追加・廃止となったタグの要素・属性をチェックできる **markuplint** というリンターを発見したので導入してみた。概要
—–
**markuplint** とはその名の通り「マークアップすること」に関するlintツールで, HTML Living Standardに対応しています。
また, React や Vue などのフレームワークや, EJS などのテンプレートエンジンのためのプラグインも用意されていて, 各種ルールについても柔軟に設定できるようになっています。導入手順
—–
###VSCode に markuplint プラグイン導入
“`ruby:cmd
npm i -D markuplint
“`
###VSCode の拡張機能をインストール
1. VSCode の Marketplaceを開く
`メソッドを使うと、class属性のリストに特定の値を含む要素を抜き出すことができます。
XPathはCSSセレクターよりも柔軟で複雑な指定ができ、要素以外のノードも取得できる便利な道具ですが、単純な書き方ではクラスセレクター相当の挙動は実現できません。
しかし、式を工夫することでクラスセレクターと等価な[^1]選択ができるようになります。
[^1]: 正確に等価かどうかは自信がありません。粗があれば教えていただければ幸いです。
結論を言えば、class属性に`cls`という値を含む要素を取得したいとすると、
次のようなXPathを書けばよいです。“`XPath
//*[contains(concat(‘ ‘,@class,’ ‘),’ cls ‘)]
“`厳密にHTMLの仕様に従うなら、`@class`を`normalize-space()`で囲います。
“`XPath
【コピペだけ】THE THORでキラッと光るボタンを作る【HTML・CSS】
https://10to1travel.com/thethor-affinger6-btn-36135.html
MicrosoftのWeb開発教材を使ってみた ③テラリウム構築 【HTML・CSS基礎/DOM操作/クロージャ】
# はじめに
**「Web Development For Beginners」**というMicrosoftがGithubに公開している教材についての記事です。
教材の紹介・選んだ理由など
### この教材を選んだ理由
https://github.com/microsoft/Web-Dev-For-Beginners
– HTML/CSS/JavaScriptを触れるいい感じの教材が欲しかった
– そこそこのボリュームがあり、作りながら学べるタイプの教材
– 基礎的なトピックが一通り網羅されている
– 質が高そう
– なにせあのMicrosoftなので、きっと良いものでしょう。
– 題材が**面白そう**
– 軽く調べた感じだとチュートリアルでよくある題材として「TODOアプリ」「クイズアプリ」などがあるみたいですが、どれもどう実装するのか想像がついてしまって、余り興味がわきませんでした。
– しかしこの教材は「テラリウム」「タイピングゲーム」「ブラウザ拡張機能」「ブログでrel属性を埋め込むときのタグと埋め込み位置についてメモしておく
特に、Googleの検索エンジン向けなのですが、rel属性の理解やアップデートは結構重要な部分でもあるのでメモしておきます。
ベタ打ちというか、コピペでrel属性を埋め込んでいきたいときに利用する用のメモ記事です。
内容的には外部リンクを埋め込む時のrel属性についてです。
rel属性のタグは正確に記述するように努力しますが、その効果についての見解は公式を参照していただき、それ以外の個別に書いてあることは筆者の見解であって100%正解ではないことをご理解ください。
文献、参照については本文の最後に外部リンクをdofollowのまんま載せておきます。
前提条件
- CMSはWordPress
- 埋め込むときは「カスタムHTML」を使用
- WordPressテーマやSEOプラグインによってはリンクのrel属性をプルダウンで設定出来たりするので意味ない場合もあり
dofollow属性について
dofollowは、特にrel属性を指定しなければdofollow扱いとなりますので、打ち込む必要
HTML形式で社内DMを自作（ソフトと相性悪く不採用）したときのリファレンス
社内DMをHTMLメールでソフトを利用して配信する、ということで自作HTMLを作ってました。
結果的にHTMLを書くわけではなく画像を貼り合わせるだけで送信できるということが判明したのと自作HTMLはソフトと相性が悪くバグるため破棄するにいたりました。。ひさびさにHTMLを書いたので引用した情報をまとめておきます。
HTMLページはゴリゴリコーディングするほうがはやい人で、スタイルシートには疎いレベルです。
（いにしえの2000年代にYahoo!のホームページビルダーをいじっていた口です。）##HTMLメールの学習
HTMLページとHTMLメールは違うらしいことを学習。
HTMLでtableタグで万全を期す文化らしい。
（ブラウザや端末、メーラーのバリエーションが多すぎてスタイルシートが効かない等あるとのこと）区切り線のTipsも書かれている かんばらあい
JavaでPDFをHTMLに変換してストリーミングに保存する方法
この記事では、Javaバックエンドコードを使用してPDFファイルをHTMLに変換し、変換されたHTMLファイルをストリームに保存する方法について説明します。変換を実装する場合、SVGを埋め込むかどうか、画像を埋め込むかどうかなど、関連する変換プロパティを設定できます。変換を実現するための方法と手順は次のとおりです。
##1.jarパッケージをインポート
今回の変換の方法は、**[Free Spire.PDF for Java](https://www.e-iceblue.com/Download/pdf-for-java-free.html)**の中のSpire.Pdf.jar free jarをインポートすることで実現されます。jarパッケージをローカルにダウンロードして解凍し、libフォルダーでSpire.Pdf.jarファイルを見つけることができます。そして、次の手順を実行してインポートを完了します。
](https://developer.mozilla.org/ja/docs/Web/API/Window/open)この2つがどう相互に作用するか実際に試したところ、問題なく動きました。
以下がサンプルコードです。“`html:HTML
PDFはこちら
“``
たった10行で簡単に絞込みセレクトボックス（Javascript無し）
# 親子セレクトボックス
1番目のセレクトボックス（ドロップダウンリスト）で選択すると、2番目のセレクトボックスで選択肢が絞り込まれる、あれです。（正式にはなんというのかわかりませんでした。ドリルダウン？）（とりあえず、１番目を親セレクタ、２番目を子セレクタと呼びます）
例としては、親セレクタで都道府県名を選択すると、その都道府県内の市町村に子セレクタの選択肢が絞り込まれるというありがちなパターンです。
その親子セレクタが、Rails ７ で採用された [Turbo](https://turbo.hotwired.dev/)（[Hotwire](https://hotwired.dev/)） であれば、**ものすごく簡単**に実装できます。トータルで10行くらいです。Javascript は使いません（HTML と Javascript の知識は必要。）
環境を Rails 7.0.1 と Ruby 3.1 として、例を作成しながら説明します。
なお、Turbo 自体は Rails に依存しません。→[【Hotwire】HTMLだけで分かる Turbo ?](https://qiCSSのbackdrop-filterを使ってグレーアウトした背景をくり抜く
##はじめに
あなたは下画像のようなviewを作ってくれと言われたことはありますか？私はあります。
特定の部分を目立たせるために、その他全体をグレーアウトした背景を実装したかったのですが、なかなか出来ませんでしためげずに色々やってはみたのですが(clip-pathや背景を細かく切って繋げる、背景の上に要素を乗せるなど)、どれもピンと来ず再現できているとは言い難い出来で、もうこんなview作るのは無理ゲーだと考えた私は先輩エンジニアに相談しました。
そこで先輩に言われたアドバイスが今回の実装方法です。
「backdrop-filter: brightnessを使ったらいいんじゃない？」
リンクをクリックするとjavascriptで指定の要素にスクロールする方法
## やりたいこと
* リンクをクリックすると、指定の要素にスクロールする
* javascriptで実現する## イメージ
「About」というリンクをクリックすると
「About」のh2にスクロールする
## ソースコード
### HTML
“`
About
・・・ぶっちゃけ、
#初めに
HTMLにはルビを振るための要素がいくつかある。– ``（ルビを振る要素全体）
– `以前作成した記事から例を若干修正して再掲する。
青眼の白龍
これをhtmlで書くとこうなる。“`ルビ一例.html
青眼の白龍
“`この中で今回は`
##`
HTMLのTableタグをJavaScriptの配列に変換する
HTMLのTableをcsvに変換するために色々調べてたんですが、その過程のJavaScriptでTable要素を配列に変換する方法をまとめておきます。
##HTML
HTMLの構造は以下の形を想定しています。“`jsx
title 1 2 3 4 1 2 3 4 1 2 OTHERカテゴリの最新記事
- 2024.09.19
JavaScript関連のことを調べてみた
- 2024.09.19
JAVA関連のことを調べてみた
- 2024.09.19
iOS関連のことを調べてみた
- 2024.09.19
Rails関連のことを調べてみた
- 2024.09.19
Lambda関連のことを調べてみた
- 2024.09.19
Python関連のことを調べてみた
