今さら聞けないHTML　2022年03月19日

【Laravel】Web開発初心者が1週間で入門チュートリアルを実施した記録(5), (6)

以下の続き。

https://qiita.com/yotty19911207/items/c4dc76d8c4146899a364

フォルダに続き、タスク一覧の作成もできた。
■(4)の復習：
・外部キー制約の設定

// 外部キーを設定する
$table->foreign(‘folder_id’)->references(‘id’)->on(‘folders’);

・Laravel が提供するクエリビルダの機能を使用したデータ操作

// 選ばれたフォルダに紐づくタスクを取得する
$tasks = Task::where(‘folder_id’, $current_folder->id)->get();

・モデルクラスにおけるリレーションを意識した記載
上記はリレーションを意識してモデルクラスを記載することで以下のように表現できる。

$tasks = $current_folder->tasks()->get();

リレーションを意識したモデルクラスの記載

class Folder extend

Bootstrap5でCardsを利用して画像や文字を重ねる方法

## はじめに
備忘録
Bootstrap5で画像や文字を重ねる方法の一例です。
こんな風にもできるんだなーくらいに思ってください。
誰かのお役に立てれば幸いです。

## 実装方法
Cardsの「[card-img-overlay](https://getbootstrap.jp/docs/5.0/components/card/#image-overlays)」を使います。

cardクラスの中身に「card-img-overlayのみ」を書くことによって背景に設定した色をそのまま表示することができます。

リファレンスには、
>コンテンツは画像の高さを超えないようにしてください。もしコンテンツが画像より大きい場合、画像をはみだしてコンテンツが表示されます。

とあるので、これを逆手に取ります。

つまりcardクラスは使いますが、card-img-overlayがわざとcardの範囲をはみ出すようにすることで、自由にレイアウトができるようにしています。

また、cardクラスと一緒にborder-0クラスを指定することで、cardクラスに初期設定されている囲いの線を消すことができ

LightBox 画像ポップアップ表示

　
“`

“`
上記をhead内最下部に挿入。

“`


“`

Bootstrapをモバイル端末で見たとき小さくなる時の対処法

# 症状
スマホなどの端末で見るとアイコンが小さくなる。
# 解決法
before
~~~ HTML




~~~
after
~~~ HTML


　　

【３日目】電卓の見た目にこだわる

# １．本日の課題
今日は前回までにできた電卓を普通の電卓のように近づけるためにHTMLとCSSを活用する。
レイアウトはCSSのFlexboxとgridをどちらとも調べて実装してみてという指定があった。

まずは前回のプログラムを修正し、Flexboxとgridを試してみる。

– HTML
“`html

【Lightbox2】画像をクリックしたら拡大されるようにする（ポップアップ, モーダル）

## 手順
### 1. 最新のjQueryとLightbox2を読み込む
以下のページから最新のものをコピーしてheadタグの末尾に追加する
+ [lightbox2 – Libraries – cdnjs](https://cdnjs.com/libraries/lightbox2)
+ [iQuery CDN](https://releases.jquery.com/)

例（Pug）

“`javascript:Pug
// lightbox2 (lightbox.min.css)
link(
rel=”stylesheet”,
href=”https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.3/css/lightbox.min.css”,
integrity=”sha512-ZKX+BvQihRJPA8CROKBhDNvoc2aDMOdAlcm7TUQY+35XYtrd3yh95QOOhsPDQY9QnKE0Wqag9y38OIgEvb88cA==”,

【Lightbox2】ポップアップ画像の枠を消す方法

## はじめに
ここでは「ポップアップ画像の枠を消す方法」のみを紹介するため、Lightbox2を用いたポップアップ画像の作り方については以下を参照

https://qiita.com/probabilityhill/items/70bfad7d6c0034228493

## 方法
CSS（またはStylusなど）に以下のようなコードを追加する
“`css:CSSの例
#lightbox .lb-image {
border: none;
}
“`

“`sass:Stylusの例
#lightbox .lb-image
border: none
“`

## 全体のコード例とプレビュー
+ 「View Compiled」を押すと Pug -> HTML、Stylus -> CSS に切り替わる
+ 「0.5x」で見ることを推奨

【Laravel】Web開発初心者が1週間で入門チュートリアルを実施した記録(4)

以下の続き。

https://qiita.com/yotty19911207/items/5b10aece3c01bc0e1779

フォルダ一覧までは作成できた。
■(1)〜(3)の復習：
・環境構築と設計
・開発のざっくり流れ
①ルーティング設定(web.php)
②コントローラーの作成・記載
③マイグレーションファイルの作成・記載
④マイグレーションの実行
⑤モデルクラスの作成
⑥テストデータの挿入
⑦コントローラーの追記・修正
⑧テンプレートの作成
・ルーティング設定(web.php)の記載方法

Route::get(‘/folders/{id}/tasks’, ‘TaskController@index’)->name(‘tasks.index’);

→getで/folders/{id}/tasksにリクエストがきたら、TaskControllerのindexメソッドを呼び出す。
　　これを’tasks.index’と名づける。

・コントローラーの生成コマンド

php artisan make:controller (コントローラーの名前)

・マ

Twitter Publishを使用せずTwitterの埋め込みを作る方法

# はじめに
この記事は自分のメモ的な感じで残しておきます。内容は余裕で既出だと思われます。
ユーザーにツイッターのリンクを入力してもらって、それを埋め込みにして使う方法を考えていた時のこと・・・

# 埋め込みの作り方
Twitterの埋め込みを作るときTwitter Publishというサイトを利用されると思います。
こちらの投稿を埋め込みするとき以下のようになります。

“`html

京都の春はこれで迎える！お外で食べる変わった「超ウマ行楽弁当」4選 https://t.co/K8v3VuyzI6
Jsでボタンを押して文字を入力する方法

# はじめに
こんにちは！web系エンジニアを目指いしているLionです。
最近Laravelを使ってwebアプリを作っているのですが、ユーザーに文字を打ち込んでもらうのは面倒だし検索にも引っ掛かりにくい感じたのでボタンを押して入力できるものを作成いたしました。

# insertAdjacentHTMlを使った方法
JsのinsertAdjacentHTMl(“位置”, ‘入れたい文字’);
を使うと文字を入力することができいます。

たとえば・・・
“`html
//テキストエリアを作りidを設定！
//今回はinputタグを使ってボタンを作成
“`

“`Javascript
function OnButtonClick() {
target = document.getE

元記事を表示

IT業界1年目のコーダが使ってみて、作業効率爆上がったと感じたおすすめツール

IT業界に未経験から入って早1年程。。。
未だにマークアップくらいしかまともに出来ないぺーぺーぱーぱーが、おすすめするツールやサイトをまとめました。
使ってみると喉にささった魚の小骨が取れるくらい、スッキリしながら作業進められますよ！(??)

## 参考にしているサイト
+ エラーの英文読めない！ 公式ドキュメントオール英語読めない時はコピペ翻訳です笑 google翻訳より好き
[deepl](https://www.deepl.com/ja/translator)
+ flexboxのプロパティについて思い出せない時
[flexbox チートシート](https://www.webcreatorbox.com/tech/css-flexbox-cheat-sheet)
+ htmlの入れ子のルールが分からない時
[HTML5 入れ子チートシート](https://yoshikawaweb.com/element/)
+ css Grid Layoutの書き方が分からない時
[CSSグリッドジェネレーター](https://cssgrid-generator.netlif

【Laravel】Web開発初心者が1週間で入門チュートリアルを実施した記録(1)~(3)

実施したのは、以下。

https://qiita.com/MasahiroHarada/items/eddad4cbf5e567393988

2018年の記事だが、少しの読み替えで問題なく稼働するTodoアプリを作成することができた。
Laravelの概観を掴むことができたので、筆者のMasahiro Haradaさんには感謝しかない。

自身の備忘とこれからLaravelを学んでいきたいというかたの参考になればと思い、ここに記す。

入門Laravelチュートリアル (1) イントロダクション
環境構築について。参考にしつつ、今回は以下の環境で実施した。

■実施環境
OS : macOS Montery (M1)
Laravel : Version 8.83.4
DB : PostgreSQL 14.2
エディタ : VSCode
※仮想環境（HomesteadやValet）は使用せず、ローカルで開発

実施期間 : 2022/03/09 ~ 2022/03/16

入門Laravelチュートリアル (2) ToDoアプリケーションの設計
設計について。熟読。

以下に

cssのcalcが動かない時

# 解決策

“`
✖️：min-height=”calc(100vh-200px)”
OK：min-height=”calc(100vh – 200px)”
“`
空白が重要みたいです

HTMLの超きほん　〜セクション関連要素でつくる文書構造〜

# セクションってなに？

`セクション`とは、見出しのあるコンテンツ、文章、意味のまとまりです。

# セクション関連の要素

以前は意味のまとまりを単に`div`要素でマークアップしていました。

HTML5では、一般的なセクションを表す`section`要素や、
ヘッダー領域・フッター領域を表す`header`要素・`footer`要素など、
特別な意味をもつ要素が追加されました。

引き続きすべてdiv要素で文書構造をつくることもできますが、
新しく追加された要素を使えば、**コンテンツごとの役割を明示的にマークアップ**できます。

## 新しく追加された要素の種類

| 要素名 | 用途 |
|:-:|:-|
|section|一般的なセクション、1セクションにつき１つの見出し(h1~h6)をつける|
|header|ヘッダー領域|
|main|メインコンテンツ領域|
|footer|フッター領域|
|nav|ナビゲーション領域（メニューや目次など）|
|article|独立した主要コンテンツ（記事ページの本文部分など）|
|aside|補足的なセクション（サイドバーの広

【チェックボックス】trueとfalseのあいだ

チェックボックスの状態でON/OFF以外に第３の状態があるのをご存知ですか？
上記の画像の「トップス」の部分の`indeterminate`という状態がそれにあたります。

ARCHETYPではShopify ExpertとしてECサイトのテーマ開発やカスタマイズをやっているのですが、検索や絞り込みのUIに親子関係があるチェックボックスをよく実装します。
今回はそんな親子階層を利用したユーザーがわかりやすいチェックボックスUIを`indeterminate` を用いて実装する方法をご紹介します。

jQueryを利用した実装を紹介されていた[WebSpaceBlog](https://webspace.jp/)様の[記事](https://webspace.jp/blog/30/)を参考にさせていただきました。

プログラミング初学者や個人開発未経験者にこそお勧めしたいchrome拡張機能開発

## dアニメストアでウォッチパーティーをする拡張機能を公開しました

唐突に宣伝から入ってしまい申し訳ないのですが、[dアニメストア](https://anime.dmkt-sp.jp/animestore/)でもオンラインで友人と同時に視聴（ウォッチパーティー）を実現するChrome 拡張機能『[**d-party**](https://chrome.google.com/webstore/detail/d-party/ibmlcfpijglpfbfgaleaeooebgdgcbpc)』を公開しました。

– chrome ウェブストア

https://chrome.google.com/webstore/detail/d-party/ibmlcfpijglpfbfgaleaeooebgdgcbpc

– 開発リポジトリ

https://github.com/d-party

【拡散希望】
dアニメストアでもオンラインの友人と同時に視聴（ウォッチパーティー）を実現するChrome 拡張機能『d-party』を公開しました。

サイドバーからルームを作れて、シェア機能によってdiscordなどで気軽に参加者を招待することができます。（要全員インストール）https://t.co/rzTn9SVXUb pic.twitter.com/UOG8cz2DI0

— U-Not (@U_Not_401) March 15, 2022

私含めアニメオタクの多くが

HTMLの超きほん　〜ブロックレベル要素とインライン要素〜

# HTMLは要素の積み重ね
HTMLは入れ子構造の要素が積み重なって表示されます。

基本的にはHTML文書で先に記述したものほど
– より上に
– より左に

表示されます。


でも、下に要素が重ならず、横にくることもあります。

この違いはなんでしょうか？

# `ブロックレベル要素`と`インライン要素`
要素の種類よって、積み重なり方が違います。

ざっくり説明すると
– `ブロックレベル要素`:
– 改行される要素
– 横にスペースがあっても下に積み重なる
– `インライン要素`:
– 改行されない要素
– スキマがあれば横に並ぶ

もう少し詳しく見ていきましょう。

## ブロックレベル要素
### ブロックレベル要素の特徴
`ブロックレベル要素`は以下のような特徴があります。
– 親要素の

ドットインストールではじめてのJavaScriptをやってみた

# ドットインストール　はじめてのJavaScript編です
要点だけまとめてみたので、後で振り返り用としておきます

# JavaScriptを書いてみよう
– JavaScriptを書ける場所
– Script タグの場合
– body の中身を読み込んでから、それらの操作をする処理を書くことが多いので、　body の閉じタグの直前に書くのが一般的

– `’use strict’;`
– 厳密なエラーチェックをしてくださいね　と指定するためのキーワード
– 最近の環境ではこれを付けるのが一般的

– `document.getElementById()`
– getElementById
– 任意のHTMLタグで指定したIDにマッチするドキュメント要素を取得するメソッド

– `.addEventListener();`
– EventListener
– 何かのイベントが起きたら、何らかの処理をしてね　という仕組み
– 何らかの処理というのは()に記述する

– `funct

JavaScriptで作る、リロードごとに問題がシャッフルされるクイズ。

　JavaScriptでリロードごとに問題がシャッフルされるクイズを作った。

See the Pen
Untitled by mkunu (@m-kunugi)
on CodePen<

HTML5のアウトラインを理解する方法

## はじめに

何年前に読んだか記憶にないくらい昔「[HTMLのアウトライン意識してますか？ – QiitaのSEO事情](https://qiita.com/yuku_t/items/726a67d8ae74eea2540a)」を読みましたが「[HTMLのアウトライン 何もわからない](https://qiita.com/Andhy/items/9bcbbb6426a227f4c132)」でした。

分からないことが何年も気になっていました。最近になってHTMLが分かるようになってきました。HTMLのアウトラインが分かるのではないかと思ってHTML仕様書などを見て学習しました。学習を通して多くのことを学べました。

## アウトラインを理解する方法

アウトラインを理解する方法は、支援ツールを使ってHTML Living Standardにあるアウトラインのサンプルを確認し、[アウトラインの構造を決める要素](#アウトラインの構造を決める要素)の位置を見て学習することです。

[7つのサンプルを動かした感想](#7つのサンプルを動かした感想)や[HTML5の廃止について調べよう](