今さら聞けないHTML　

ペライチWebサイトを実現するための方法についてのメモ書き

# 背景・目的

少し前に、個人経営の飲食店さんからHP作成の依頼をいただきました。
ただ、個人経営なのでなるべくコストをかけたくない点、開発費用もそこまで出せないというもの。
開発費用分は、ほぼ納期を気にしなくていいというお言葉(笑)でかなり薄くやることとお店の応援という意味で極力協力しようとは思いますが、問題は運用。
負担が小さく、かつランニングコストが低い運用方法はないか、と考えさっくり調査してみました。

# 要件
– 先方
– コストが低いこと。　(可能ならただがいい)
– 1ページ。
– 凝ったものでなくてもよく、店の概要が分かる程度でOK。
– 予約等は別サイトで既に準備済みのため、そこへのリンクを設けてほしい。
– SEOは気にしなくてOK。
– 開発者目線
– 運用負担が極力かからないこと　(理想はページ改修ない場合、ノーメンテ)
– 使用するサービスが数年くらい使用可能。
– 定期的にOSやサービスが落ちて通信不能になることがない。
– クラウドのサービス使用する場合、一時的なメンテナンスや障害は許容する。

# 対応

WebP拡張子に変換して画像ファイルを圧縮しよう

# WebP（ウェッピー）ってなに

まず、これウェッピーって読むらしいです。（私はウェブピーと読んでました笑）

2010 年に Google が開発した画像の形式らしいです。普段利用する画像の形式である、`jpg`や`png`などよりも圧縮率が高く、さらに特に画質が劣化する印象もないらしい！！

WebP に変換するツールとして、Google が開発した、Squoosh(スクワッシュ)というものがあり、プレビューなどをみながら変換することができるので、圧縮しすぎると粗くなってしまいますが、適度に圧縮すると特に見た感じ影響はなさそうです。

https://squoosh.app/

ただ、こちらは画像を一枚ずつしか変換することができないようなので、こちらのサイトもおすすめです。

https://saruwakakun.com/tools/png-jpeg-to-webp/

ぜひご活用ください。

元記事を表示

AIの影の部分: リスクとその対策

# AIに潜むリスクとはなにか？

とても便利なAIですが、AIには**様々なリスク**があります。
その為使うことに抵抗を感じる方も多いのではないでしょうか。
**実際にどのようなリスクがあり、対策法があるのか**調べてみました。

### 潜んでるリスク
:::note
**・情報漏洩：AIに入力された情報が第三者に漏れる可能性がある**

**・著作権：生成AIが他人の著作を基にコンテンツを生成し著作権侵害のリスクがある**

**・誤情報の拡散：AIが間違った情報を提供しその結果として誤解が生まれることがある**

**・プライバシーやセキュリティの問題：AI利用によって個人情報が不適切に扱われる可能性がある**
:::
他にも**人種差別**などの**社会的問題**にも影響があります。

今回は**上の二つ**について書こうと思います。

## 情報漏洩

AIは入力されたデータを処理する際に、そのデータが**適切に管理されていないと、意図せず第三者に漏れるリスク**がありま

元記事を表示

フロントのみで簡単なログイン機能を作る

## はじめに
javascriptとhtml、cssを使って簡単なログイン機能を書いてみました。

## ファイル構成
```
login |--html
| |
| |--login.html
| |--profile.html
| |--create-account.html
|
|--app.js
|
|--styles.css

```

## HTML

### login.html
```

元記事を表示

【CSS】position: sticky で固定ヘッダーを実装する

## はじめに

こんにちは。HRBrainでオウンドメディア・ランディングページの開発を担当している渡邉です。

Webサイト制作でよく使う固定ヘッダー。

この記事では、 `position: sticky` で固定ヘッダーを実装するメリットについての解説と、実装例を紹介します。

https://developer.mozilla.org/ja/docs/Web/CSS/position

## position: fixed の問題点

`position: fixed` は、要素をビューポート（ブラウザの表示領域）に対して固定表示する際に便利なプロパティです。

しかし、 `position: fixed` を使用すると、固定された要素が他の要素の上に重なって表示されてしまうため、コンテンツが隠れる問題が発生します。

これは、`position: fixed` を適用することで**ヘッダーが通常フローから外れる**ためです。

例えば、以下のようなHTML構造とCSSスタイルシートを考えてみましょう。

動画の埋め込みで使う source 要素の codecs パラメータ付き type 属性って何者？ 「なにもわからない」から「チョットデキル」に

## はじめに : HTML 上での動画の扱い方のおさらい

HTML で動画を埋め込むには、`video` 要素を使用します。また、ブラウザが新しい動画形式 (あえてここでは曖昧な表現を使用します) に対応していないことを考慮するため、`video` 内に `source` 要素を使用して、複数の動画形式のリストを用意することができます。

ブラウザはそのリストから、`source` 要素の `type` 属性を参考にし、上から順番に「**デバイスで再生してもよい動画形式**」を選んで、そのファイルを再生しようとします。

※ここでいう「デバイスで再生してもよい動画形式」というのは、必ずしも「**最初に見つかったデバイスで再生できる動画形式**」が選ばれるわけではありません。例えば、再生可能であるものの GPU によるハードウェアデコードに対応していないファイルを (消費電力削減のため) スルーする、というようなブラウザが存在する可能性があります。

## codecs パラメーター付き type 属性とは

しかし、このような `type` 属性による動画形式の設定は、欠点がありま

HTMLについて調べてみた

# 背景・目的
　こんにちは．プログラミング初心者です．現在私は大学生で，インターンシップ型アルバイトに参加させていただいており，その中でAngulrを用いたアプリケーション開発をすることとなり，急遽HTML/CSS, JS, Angulrの勉強をすることになりました．
　社会に出たら今までやってきたこととは違うことなんていくらでも挑戦するよなということで，さっさと切り替えて勉強していきましょう．
　とりあえず今回の目的は，HTMLの軽い実装と基本的（ド偏見）なことを図書館で借りてきなtextを中心に分からないことなどを適宜，web情報で学んでいくものとします．

## 使用環境
Windows11
VScode
※VS環境は昔html/cssは触ったことがあり，構築済みだったのでここでは省略します
## 参考文献
> https://x.gd/7CFdo

## 学んだ内容
### HTML
- 基本文法
- タグ
- テーブル
- 入力ボックス

## HTML
### 基本文法
　基本的にはタグという，日本語の会話文でいうところの括弧（「」）の様なものを挟むことにより，コード