今さら聞けないHTML　2022年04月20日

【８日目】メモ帳アプリの作成 [supabaseを活用]

前回まではメモ帳のアプリを作ったが、localStrageを利用してメモの履歴を保存して表示させるプログラムを作りました。

See the Pen
Memo5 by mizmizsan2 (@mizmizsan2)
on

Tailwind CSS短期集中講座

# 対象読者

– TailwindCSSを初めて聞いた人
– 一方、HTMLとCSSは把握していている人
– 駆け出しフロントエンドエンジニア

# TailwindCSSとは

人気の高いCSSフレームワークの1種となります。
まずは公式ドキュメントを一読しましょう。

https://tailwindcss.com/

> *Rapidly build modern websites without ever leaving your HTML.*

**HTMLライクでモダンなウェブサイトを高速に作れる**みたいです。
早速、TailwindCSSを導入して使ってみましょう。

# セットアップ手順

息を吸うかのごとく、当たり前のように公式ドキュメントに目を通しましょう。
WEB系の技術は、トレンド変化が速いので、一次ソースから調べるのが吉です。

https://tailwindcss.com/docs/installation/play-cdn

npmと呼ばれるノードパッケージマネージャを利用したコマンドによるインストールが推奨とのことです。
今回、**Node.jsの

【パブリッシャー】JavaScriptでの拡張 – KENDO kendoDropDownListコントロール

[Sharperlight](https://sharperlight.jp/)には、[Kendo](https://www.telerik.com/) JavaScript ライブラリが梱包されています。
Kendo JavaScript ライブラリには、様々なWEB UIコントロールが準備されていて、Sharperlightの公開クエリとの組み合わせでいろいろなWebインターフェースを作成することができます。
この記事では、kendoDropDownListコントロールを使用してみます。
準備するものは、kendoDropDownListコントロールを配置するHTML(JavaScriptコード含)、そのHTMLのコンテナとなる公開クエリ、kendoDropDownListコントロールにデータを供給する公開クエリの3点です。
## HTML(JavaScriptコード含)の作成 ##
#### ヘッダー部 ####
Kendo JavaScript ライブラリのコンポーネントを参照するコードを記します。
![2022-04-19 Figure 03.png](https://qii

【PHP】TBを作成 ※4列で改行して余りはハイフン

# TBを作成 ※4列で改行して余りはハイフン

## パターン１
“`PHP

$list){ ?>
0)echo ‘‘; ?>

–

‘,4 – $td_cnt % 4); unset($td_cnt);?>

ポケモン

“`
![image.png](http

事件は会議室で起こっているんじゃない、警視庁ホームページで起こっているんだ！

前回は[神奈川県警のホームページがダサい](https://qiita.com/NagayamaToshiaki/items/cda3f4c35b81b78bdada)という話だったが、今回はちょっとだけ触れた警視庁のホームページを検証してみる。

## 問題点・HTML編

### その1：推奨環境が異様に古い

IE9、Safari5がベースラインとなっている。いずれも10年以上前であり、この時点で**警視庁のWebページに対する意識の低さ**が垣間見れる。今は亡きFlashについての情報も載っているし（更新日時が2020年12月なので、Flash廃止に関する情報の更新があった気がするんだけれど）…故に以降の問題があると言っても過言では無い。

### その2：HTML4.01を使っている

なんと、令和4年になってもまだdoctypeがHTML4.01である。HTML5すら過去のものとなって久しいのに。ただ、styleでメディアクエリなどを利用したりしているので、可能な限り新しくしようとしている部分はある？　`class=”slider_wp”`とあるからWordPressで作っ

Bootstrap,CSSを使った一覧表示

この記事は学習中に実装した内容をアウトプットし、更に理解を深めるための記録用投稿になります。
投稿している内容と同じ箇所で躓いている方に少しでもお力添えできれば幸いです。

## 実装した内容
ユーザーの詳細画面でユーザーの詳細内容、投稿した記事の一覧を4つ表示して折り返す内容になります。

## 今までの考え
・今までHtml,Css,Ruby,Ruby on Railsの順番で学習を進めてきて、直近で学習していた課題ではCssを使わずにレイアウトをBootstrapだけを行い実装してきました。
そのこともあり、今回もBootstrapだけで行こうと進めていましたが思ったようなレイアウトにならず色々調べているとCssも並行して使えることを書いてある記事を見つけました。（今更何を言っているんだと思う方もいるかもしれませんが、初心者の脳内なのでどうかお許しください、、。）
そのことを踏まえて読んでいただけると嬉しいです。

## 前提条件
・Bootstrap導入済み。（今回はBootstrap4です。）
## 参考ページ
自分のページを曝け出すのは恥ずかしくて大変恐れ多いですが

PowerAutomate: Teams へのメッセージ投稿(HTML)でタグが表示される場合は、改行置換してやると上手くいくかも

# 背景
Teams の Trigger を使って自動化をする際、元の投稿内容が壊れて表示されることがあったのでその対処法

# 対象アクション
現状は、以下で再現。
[チャットまたはチャネルでメッセージを投稿する](https://docs.microsoft.com/ja-jp/connectors/teams/#%E3%83%81%E3%83%A3%E3%83%83%E3%83%88%E3%81%BE%E3%81%9F%E3%81%AF%E3%83%81%E3%83%A3%E3%83%8D%E3%83%AB%E3%81%A7%E3%83%A1%E3%83%83%E3%82%BB%E3%83%BC%E3%82%B8%E3%82%92%E6%8A%95%E7%A8%BF%E3%81%99%E3%82%8B)
[チャネル内のメッセージで応答します](https://docs.microsoft.com/ja-jp/connectors/teams/#%E3%83%81%E3%83%A3%E3%83%8D%E3%83%AB%E5%86%85%E3%81%AE%E3%83%A1%E3%83

WordPressでLPを用意したいときのTips

CSS何もわからないマンです。

WordPressで会社のHP運営している方々はいっぱいいらっしゃると思いますが、だいたい困ることが、あとからページを追加しようとしたときに、header.php、footer.phpやcss、jsがぐちゃぐちゃになることが多いかなと思います。

いつかリファクタ、または作り直すとかすると思いますが、大体が急ぎーとか来週にはあげたいーとか自分の仕事が忙し〜だと思うので、なかなか手がつけられずスパゲティな感じになるんじゃないでしょうか。

僕もまだまだですが、最初からこういうの設計にしておけばよかったなってのがWordPressにはあるので、今回はLPを題にして自分のためにもメモしていこうと思います。

# 固定ページのtemplateを用意する

同じpage.phpを使いますと条件分岐地獄がまっていますので、できれば分離したいです。

WordPressには固定ページのテンプレートを用意することができるので、分けてあげましょう。

“`bash
$ cp page.php page-lp.php
“`

管理画面から、page-lp.phpを認識

borderで作成できる三角形の原理について今更追ってみる【備忘録】

CSSで三角形を表現する時、
CSSプロパティの`border`を使うのか、原理をあまり意識してなかったので改めて深掘りをしてみた！

## borderが単一の時と複数の時での動き

### 一本の時


“`
width: 100px;
height: 50px;
border-top: 5px solid;
display: inline-block;
“`

まぁ予想通りの結果ですね、ただ横に線が引かれているだけ

### 複数本の時


“`
bor

日付入力フォームのクリック範囲を拡大

# [完成形](#-2.完成形)
こんな感じでどこをクリックしてもカレンダーが展開されるようにします。

何も考えずに下記の記述のみだと
“`index.html
【備忘録】.phpから別の.phpにある変数を参照する

web開発初心者の備忘録です。
オリジナリティあふれるソースコード。
# ポイント
require関数を使って.phpを読み込むことで、記述されているグローバル？な変数を参照できる。

https://www.php.net/manual/ja/function.require.php
# ファイル構成
“`
IISでルートに設定しているフォルダ
　└ test
　　　├ main.html
　　　├ main.php
　　　├ lib.php
　　　├ info.php
　　　├ main.js
　　　└ jquery-3.6.0.js
“`
# ソースコード
“`html:main.html