今さら聞けないHTML　2022年01月30日

はじめに


はじめまして。maruquiです。
現在沖縄県の宮古島市にて、HTMLコーダーとして勤務をしております。
HTMLコーダーとしての実務経験は1年程度で、まだまだ修行が多い日々です。

この記事では、なぜQiitaに投稿しようと思ったのかや、Qiitaでどのようなことを投稿していく予定なのかをまとめています。
今回は特に有益な情報を発信するようなことはないので、その点ご了承ください。

## Qiita に投稿しようと思った経緯

宮古島に移住することに決まったときに、専用のブログを用意していました。
宮古島の観光スポットやグルメなどをまとめつつ、コーダーとしての毎日を記録していくものでした。

一週間かかさずに投稿していたのですが、7月ごろから更新が途絶えてしまいました。会社での業務が単調になってしまったことが主な原因で

multipart/form-dataでファイルをPOSTするとファイル名の\n・\r・”はエスケープされる

# 結論
タイトル通り、HTTPのmultipart/form-dataでファイルをPOSTすると、ファイル名（とフィールド名）に含まれる `\n`(LF)・`\r`(CR)・`”`は以下のように置換される。

| 置換前(16進数表記) | 置換後 |
|-|-|
| `\n` (0x0A) | `%0A` |
| `\r` (0x0D) | `%0D` |
| `”` (0x22) | `%22` |

`%`自体は置換されないので、例えば `%22.txt` と `”.txt` は同じファイル名で送られる。

仕様：[HTML Standard](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#multipart-form-data)

# 仕様発見までの流れ

ユーザーから受け取ったファイルのファイル名をKeyに使ってAWS S3に保存するとき、いたずらされるか調査しよう！
↓
ダブルクォーテーション逝ったあああああああああああああああああああ
↓
開発者ツールで見るとリ

Youtube動画などのiframeタグの中身を縦横比を維持したままレスポンシブにする

## 概要

Youtube動画を埋め込んだ時に`width`と`height`が固定になっていて、スマホで表示した時に横幅が画面からはみ出していました。

メモとして、変更点のみ記載します。

## 修正前

“`

“`

## 修正後

“`

“`

下記でもOKみたい。

“`

“`

`aspect-ratio`は便利ですね?

※Mac Safari(14.1.2)で`aspect-ratio`が効いてないから調べてみたら、対応してるバージョンは15(2021.9リリース)からなのか…
まだしばらく`padding-top: ~%`使った方がいいのかな。

HTML　テンプレート

コピペで活用する用です。

“`php:hello.php

“`

エラー500って何？

オンラインの教材にて「PHP+MySQL(MariaDB)」を学習しているときに遭遇した正体不明の「error 500」。

このページは動作していません
localhostでは現在このリクエストを処理できません。
HTTP ERROR 500

という表示が出てしまいました。それを解決するために活躍するのが、

というエラーチェック用のコード。こちらをおそらくエラーを起こしているであろうページに入力（コピペ）してブラウザで実行するとエラーの原因となっている箇所を教えてくれます。
アップデートで使われなくなった記法であったり、記述ミスであったりするのですが、初見では「どこが悪さしているのか分からない」という状況になるため、すぐにでも上記のコードで原因箇所の特定をしたいですね！

ではまた！

【HTML/CSSのみ】ぬるっと動くスムーススクロールの実装

#はじめに
スムーススクロールは、同じページ内を滑らかに移動させる機能のことです。
何か項目をクリックすると、画面がぬるっと動くWebサイトをよく見かけると思いますが、あの動きを実現するためのものです。

サイトに動きをつける際、個人的にこれまでは主にJavaScriptを使っていたのですが、スムーススクロールはHTML/CSSだけで実装できると知ったので、実際に試してみました。

#ソースコード・動作
“`index.html

Top

• パスワード入力フォーム表示・非表示

  ##はじめに

  現在、自己学習の為、既存サイトを模倣したサイトを作成しています。
  調べて実装した内容を自分なりにまとめてみました。
  ※参考にさせて頂いた記事・サイトは[最後](https://qiita.com/meowave/items/465fcb91a9fd06c4a8b3#%E5%8F%82%E8%80%83%E5%BC%95%E7%94%A8)に記載しております。

  ####今回の目標
  目のマークを押すと表示・非表示が切り替わる パスワード入力欄の実装
  
  色々なサイトで見かける機能ですが、今まであまり気にせず利用していました。
  改めて、何故こんな機能が必要なの？？と思い調べると、パスワードは表示すべきか非表示にすべきか、過去、思った以上にたくさんの議論が交わされていた問題のようでした。知らなかった。。。
  表示・非表示はどちらにもメ

VaccImage SQLを如何にHTML側に反映させるか

今回は、部署の入力ページについて。
患者さん、職員、職員家族などの分類のみならず。
外来なのか、入院ならどこの病棟なのか、どこの部署の所属職員なのか。
`分類`というものが必須です。
そこで、下記を作りました。

“`
CREATE TABLE departments (

dpts_symbol VARCHAR(120) NOT NULL,
dpts_name VARCHAR(120) NOT NULL,
PRIMARY KEY(dpts_symbol)

);
“`

簡単ですね。
部署のシンボルをプライマリーキーにしました。
患者登録のページから、当然ながら患者のみならず職員について、部署を入れないといけませんよね。
部署については、下記SQLにあります。

“`

select * from departments;
+————-+———–+
| dpts_symbol | dpts_name |
+————-+———–+
| gairai | 外来 |
| k

[flexbox]media queryなしでレスポンシブ対応

# やったこと
今回はflexboxを使ってmedia queryを使わずにレスポンシブデザインを作りたいと思います。

幅999px以下で縦に積み上がって、1000px以上は要素が半分になるように作っていきます。

## コード
### html
htmlは簡単にしています。

“`.html

アイテム1

アイテム2

“`

### css
cssはこれだけです。

“`.css
.flexbox {
display: flex;
flex-wrap: wrap;
width: 100%;
box-sizing: border-box;
}
.flexbox__item {
background: #ddd;
padding: 8px;
flex-grow: 1;
flex-basis: 450px

Javaを使用してWordをHTMLに変換する方法

この記事では、JAVAプログラムのDocument.saveToFile（）メソッドを使用してWord文書をHTML文書に変換する方法を紹介します。コードを編集する前に、次の環境構成を参照して、jarパッケージをインポートしてください。

##プログラム環境
IntelliJ IDEA 2018（jdk 8.0）
テストドキュメント：Word 2013（.docx）
Jarパッケージ：**[Free Spire.Doc for Java 3.9.0](https://www.e-iceblue.com/Download/doc-for-java-free.html)**

次はjarをインポートする方法です。

jarパッケージをローカルにダウンロードして解凍し、ローカルのlibフォルダーにあるSpire.Doc.jarをJavaプログラムにインポートします。手順は次のとおりです。
![01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/278784/abe5b983-ad8e-6c1f-6776-67

表に自由に色を塗る_kableExtraパッケージの紹介

Excelで表を作っていたあの頃のように、Rmarkdownで作った表にも自由に色を塗りたい…。そんな方へkableExtraパッケージのご紹介です。
　ちなみに、このパッケージは、基本的にはHTMLやLatex形式での出力向けの関数のようです。Wordにも出力できるようですが、コピー&ペーストで少々めんどくさそう。ですので、今回はHTML形式で出力する場合やRでiosスライドを作成する場合を想定しています。
　
# パッケージのインストール

“`
install.packages(“kableExtra”)
“`

# 表の作成
　Rのirisのデータを使って作成します。

“`
library(kableExtra)
table.1 <- iris kableExtra::kbl(table.1) ``` 　これだけだとシンプルすぎて見づらいので、テーマの設定をします。様々なテーマがありますが、個人的にお勧めなテーマを今回は設定します。パイプ（%>%）を使って、設定を追加していきます。

“`
table.1 %>%
kableExtra::kbl() %>%

HTMLで画像が歪んだ時の対処法

## 現状の問題

– トップページ（HTML）の画像が歪む
以下の画像のように横幅が合わせるため画像が歪む

### 理想
adobe XDで作成した以下画像のように歪まないようにしたい

## 理想に近づけるために
インストラクターの方に方法と参考サイト両方を教わり、以下方法を実行
figureタグに[overflow:hidden](はみ出した部分を隠す)
imgタグに[object-fit: cover;]（中央でトリミングしてくれるらしい）
以下コード

“`html

<

@mediaの書き方は色々あるけど、あんまり気にしなくてOK

古いサイトや他人様の書いたコードを見ると
知らない@mediaの書き方が結構あったので念のため調べてみた。

##結論
`@media(max-width:500px){} `
といった一般的な書き方でＯＫ。

##他の色々な書き方
###@media screen and
@mediaの後に screen and とか all and と書いてあるのをたまに目にする。
実は、「結論」に載せた
`@media(max-width:500px){} ` という書き方は、
`@media all and (max-width:500px){}` を省略したものらしい。

allの部分はデバイスの種類を指定できるようになっており、
all（すべてのデバイス）の他に、print（プリンター）やspeech（スピーチシンサイザ）や
screen（printやspeechを除いたもの全て。一般的なＰＣやスマホ。）がある。

なので、例えば
`@media screen and (max-width:500px){} `は
デバイスの種類がscreenでなおかつその幅が500px以下の場合を表す。

rails GoogleFont導入仕方

# １．はじめに
RailsのHTML/CSSに対して、***GoogleFont適用する2つの方法***を学んでもらうのが
***`この記事のゴール`***だよ！

# 2. まずは、GoogleFontのサイトから使用するFontを選ぶ

[GoogleFontのサイト](https://fonts.google.com/)
↑ ここからサイトへ飛びます


そしたら上記のページに行くと思います。

この中から**使用したいフォント**を選択します。

今回は変化がわかりやすいように`”Comforter Brusho”`を使います。

![スクリーンショット 2021-11-23 18.57.06.png](https://qiita-image-store.s3.ap-northeast-

クリックされた丸角画像に枠を付けるCSS

# はじめに

画像をクリックして選択できる web ページを作成する機会がありました。
選択出来ていることをユーザーに示すため画像に枠線を付けようと考えたのですが、この時に普段バックエンドばかりのエンジニアが苦労して実装した方法を記載します。

画像が丸角なのが悪いよ

# 基本とするページ

本題ではないのでとりあえず画像が選択できる状態まで一気に行きます

“`html:index.html






jsxとvueの条件によってタグを表示させる方法

## 概要
最近react,vueを触る機会が多いので、メモするほどのことでもないのですが、
初心者やreact,vueってどんな感じなの？って人用に書かせてもらいます。
(シリーズ化して、小出しに記事にしていくかも？)

### vueでの条件によって表示させる方法
vueでは表示したい要素のタグの属性にv-ifを追加することで
要素を表示するか、しないかを表現できます。

“`.vue

“`

vueでの出しわけ方法は分かりやすく、
タグにv-if=”~~”というディレクティブ(※)を追加することで、簡単に出しわけができます。
もちろん、v-else-ifも使えます。

※ DOM要素に対

押したくなるボタンっぽいリンクをCSSで作る

#押したくなるボタンとは
「これリンクだな」と押してもらえそうなボタン。
スマホでもパソコンでも、リンクが大きいと押しやすくて便利なので使っています。
特にパソコンサイトでは、マウスホバーしたときに押してる感があると楽しい気がします。

##見た目
`HTML`と`CSS`をタップすると、ボタンを構成するコードを見られます。
`Result`をタップすると、ボタンの見た目を確認できます。

###特徴
* 押せる感を出す→影をつけて浮き上がらせた
* ぬるっと感を出す→マウスホバー時に0.3秒かけて変化させた
* 押し戻された感を出す→マウスを外したときも元のスタイルにぬるっと戻した

【フリップ】画像をアニメーションで切り替えたい！オシャレに！【くるっと】

[画像をアニメーションで切り替えたい！オシャレに！](https://qiita.com/drooooopp/items/5d7ef537461ae3f23c3b) の詳細記事となります。

今回は【フリップ】でクルッと回転するアニメーションです。
実際の挙動は以下のようになります。

早速実装です！

## 1. HTMLの追加

“`{html}

元記事を表示

【スライド】画像をアニメーションで切り替えたい！オシャレに！【縦 横 斜め】

[画像をアニメーションで切り替えたい！オシャレに！](https://qiita.com/drooooopp/items/5d7ef537461ae3f23c3b) の詳細記事となります。

今回は【縦 横 斜めにスライドする】アニメーションです。
実際の挙動は以下のようになります。(以下は横にスライドする挙動です。)

CSSの `mask-image` を利用しての実装になります。
早速実装です！

## 1. HTMLの追加

“`{html}

元記事を表示

SCSSのマップ型変数と繰り返し処理でModifierを一括でつくる

今までカラーを変数化するくらいしかやってませんでしたがマップ型変数と繰り返し処理をすれば一括でModifierを作れることに気づいたので備忘録。

#変数のおさらい
色コードを変数にするだけ:frowning2:

“`scss:ただの変数
// ———————————————————
// theme color
// ———————————————————
$primary: #248888;
$warning: #F0D879;
$danger: #E7475E;

.c-button{
padding: 0 1em;
line-height: 24px;
border-radius: 4px;
border: 1px solid;
&–primary{
background-color: $primary;
}
&–warning{
background-color: $warn