今さら聞けないHTML　2021年10月18日

Internet Explorer から Edge にシームレスに案内するスクリプト

###スクリプト
var ua = navigator.userAgent.toLowerCase();
if(ua.match(/msie|trident/) {
var url=location.protocol + “//” + location.hostname + location.pathname;
var msg=”当サイトは26年の歴史を歩んできたInternet Exploerのサポートを終了しました。

“;
msg+=”Edgeのダウンロード

“;
msg+=”Microsoft Edge ブラウザーで表示“;

/

さくらサーバーで拡張子.htmlを使ってPHPを利用する方法

自分のための備忘録です。

さくらサーバーがどうやらアップデートされたようで、.htmlを使ってPHPを使うための.htaccessの設定方法が変わった様です。
このサイトに書いてあるのが正解でした。

https://y-com.info/contents/?p=1266

「php.cgiを作成しないとダメ」って色々なサイトで言っていますが、変更されています。
php.cgiはいらないです。

.htaccessにこれ書けばOKでした

““htaccess
AddType application/x-httpd-php .html
““

Bootstrapを使って簡易的なポートフォリオ作る。

#はじめに
今回Bootstrapで簡易的なポートフォリオを作成しました。
正直、私はBootstrapは学ばなくても良いかなと思っていました！笑
理由はBootstrap感が出てしまったり、Bootstrapに頼ってしまったら、
CSSを書けなくなってしまうのではと思っていたからです。

確かにBootstrapが用意しているコンポーネントしか使わず、
サイト構築していくとBootstrap感はすごい出ます！(当たり前ですよねw)
しかし、Bootstrapを使うとCSSは書けないなんてことは全くありませんし、
土台Bootstrapで作ってあとからCSSでカスタマイズなんてことも出来ます！

全くBootstrap感のデザインは気にならないってクライアントも多くいますし、
細かいデザインより、納期や予算、運用のしやすさを
重点におくケースも多々あります。
その為、私も改めてBootstrapを学習してみようと思いました。

それでは、Bootstrapを使用するメリットについてまとめます。

1.コーディング量を減らすことが出来る

HTMLのクラスにBootstra

【Vue.js】v-for について

#はじめに
こんにちは！　松本　佑大（まつもと　ゆうだい）と申します！
今回はv-forについてアウトプットしていきます！

#v-forとは
v-forとはvueで配列に基づいて、リストレンダリングする為に使用するディレクティブです。

#書き方
“`HTML:HTML

1. {{ color }}

“`
“`Vue.js
var app = new Vue({
el:’#app’,
data:{
colors:[‘Red’,’Green’,’Blue’],
}
})
“`


今回は番号付きでの表示のた

HTML&CSS_02 【RESTART】

#HTML＆CSS_02
今回のテーマは「progate」の「HTML＆CSS中級編」を使って作れたものについて
※前回の記事

https://qiita.com/yuta-proto-biz/items/a492e7607653f7e6fa15

#お役立ちメモ

メモ

“`
Google Drive　からの画像参照方法
https://drive.google.com/file/d/画像ID/view?usp=sharing
⇒　https://drive.google.com/uc?export=view&id=画像ID
“`

#フェーズ１_学習

「progate」「HTM

【HTML/CSS/jQuery】iOSとAndroidのプッシュ通知を作ってみた。

## 初めに

業務で、iOSとAndroidのプッシュ通知をHTML/CSSで作ることになりました。

プッシュ通知をHTML/CSS作っている人がいなかったので、
自分で作ってみました。

Codepenを使用して、作成しています。
画面に埋め込むタイプだと、サイズが小さいので
Codepenのサイトで、触ってください。

## iOS版　プッシュ通知

## Android版　プッシュ通知

【CSS】textareaタグに入力した値を改行

#はじめに#
　formタグの中にtextareaタグを作成して文章を投稿したい時に、改行させて入力することもあります。そのままデータベースに保存→データを取得して表示すると、なんと改行が消えてしまっています。
　今回はこれを解消しようと思います。

#CSSを使った方法#
　改行は消えてしまっていますが、そこにはちゃんとHTMLエンティティという特殊な文字で改行の情報が保存されています。
　CSSを使って、改行させることができます。

“`style.css
.comment {
white-space: pre-wrap;
}
“`
white-spaceは、CSSのプロパティで、要素内のホワイトスペースをどう扱うかを決めるプロパティです。
pre-wrapとすることで改行が反映されます！

ちょっとしたことですが、ブラウザへの表示は意外とハマりやすいので、備忘録として残しておきます。

【Vue.js】v-onについて

#はじめに
こんにちは！　松本　佑大（まつもと　ゆうだい）と申します！
今回はv-onについてアウトプットしていきます！

#v-onとは
v-onとはボタンをクリックしたり、スクロールなどのユーザーによる一連の挙動を『イベント』と呼びます。そして、それら様々なイベントに対応して発動させる処理のこと（関数）を『イベントハンドラ』と呼びます。
Vue.jsにおいて、イベントによってイベントハンドラを実行させるには、v-onを使用します。

#書き方
今回はボタン`click!`を押したら、現在の日時が表示されるプログラムを実行していきます。

“`HTML:HTML

Click!

{{ now }}

“`
“`Vue.js
var app = new Vue({
el:’#app’,
data:{
now=”
}
methods: {
Onclick: function() {
this.no

【CSSメモ】リストの箇条書きの記号を設定したい時

list-style-type: ;

list-style-type（リスト・スタイル・タイプ）
種別：プロパティ
役割：HTMLにあるリストの種類を設定。リストの箇条書きの記号を決めることが出来る。
設定できるリストの記号は↓

“`none:記号なし“`
使用例：list-style-type:none;

“`disc: ●つまり黒丸がつく“`
使用例：list-style-type:disc;

“`circle:○。つまり白丸“`
使用例：list-style-type:circle;

“`square(意味は死角): ■がつく“`
使用例：list-style-type:square;

DOMを使用してHTMLテキストを書き換える方法まとめ

# はじめに
DOMにはHTMLを操作するための様々なプロパティが用意されていますが、HTMLテキストの書き換えができるプロパティが複数あり、ややこしかったので違いをまとめます。
具体的には

– textContent
– innerText
– innerHTML
– outerHTML

の4つのプロパティの違いについてまとめます。

# 使い分け
最初に使い分けをまとめておくと、

– HTMLタグを含む文字列を設定したい場合はinnerHTMLあるいはouterHTMLを使う。
– 単純なテキストを設定したい場合はtextContentを使う。
– 改行などユーザーがブラウザで見ているのと同じ状態で取得したい場合はinnerTextを使う。

# textContent
対象のノードに含まれるテキストを取得・設定できる。

### テキストを参照
`node.textContent`
対象のノードおよびノードの子孫ノードのテキストをすべて連結した値を取得することができる。

### テキストを書き換え
`node.textContent = ‘value’`
ノードの te

【フォーム】追加ボタンを押して関連した入力欄2つを同時に増やしていく方法

#はじめに
今回以下のようなフォームは作ったので、備忘録として残しておきます。

#HTML部分

“`php:create.brade.php
{{ __(‘材料’) }}
+追加

HTML&CSS_01　【RESTART】

#HTML＆CSS_01
今回のテーマは「progate」の「HTML＆CSS初級編」を使って作れたものについて
※学習サイクルの詳細について知りたい方は前記事を参照ください

https://qiita.com/yuta-proto-biz/items/d84ff5acf66844e7675f

#フェーズ１_学習

「progate」「HTML＆CSS初級編」を学習

#フェーズ２_記録

プログラミングスクールの講師を2年間続けて限界が来て辞めた話

## はじめに

某プログラミングスクールで二年間講師をしてました。
受講生の方からの評価点は平均より高く、最終的には全インストラクターの中から代表に選ばれる立場にまでなりました。

## 始めた経緯

もともと、プログラミングスクールをいつか開きたいと思っていたこともあり、業務委託契約で経験が積めそうなところに応募。
即採用していただき、正社員で働く傍、副業としてプログラミング講師に。
エンジニア歴は当時は5年
得意な言語はPHPのみでした。

## コロナ禍で全てが変わった

特定を避ける為に細かな時期は記述しませんが、この復業を始めてから今も尚世界を苦しめているウイルスの流行で事が大きく変貌していきました。
というのも、私が請け負っていたプログラミングスクールでは生徒様が作成したいと言う物をベースにプログラミングを教えるスクールでした。
その中で、コロナ禍前までの生徒様達は明確に、

「ECサイトが作りたい」
「勤怠管理アプリを作りたい」
「ポートフォリオを作って、簡単な案件に挑戦できるようになりたい」

…etc

のような明確としたゴールがありました。

私はその手助けをした

ウェブページは作れませんでした　【RESTART】

#ウェブページは作れませんでした（結論）
「progate」にて学習すること約1か月
「Web開発パス（Node.js)」を一通りこなしてみて
とりあえず何かウェブページ作ってみるかと思った

結論、__どうやって作ればいいのか解らず__…

#学習プロセスの見直し

「progate」だけ行ってしまうと__自分の場合は__
__インプット__のみになってしまい、定着しないと反省
そこで以下のようなプロセスの仮説を立てて実行することにした

#学習プロセスのフェーズ詳細

###フェーズ１_学習
phpフレームワークLaravelって何？環境構築の前にちょっと待った！使用用途を徹底解説！！

#絶対に読んで欲しい導入
HTML,PHPを学び、これからLaravelを使おうと思ったそこのエンジニアの皆さん、とりあえず環境構築してコードをググったらある程度使えるようになるだろうと思ってますよね。
確かにその通りです。

しかし実際に使用する前に便利な機能を把握し、Laravelではこんなことができるのかと知っておくことで格段に開発効率が上がります。

座学はエンジニアの皆さんにとってはそんなに面白いものではないかもしれませんが、こんな機能があるならこういうアプリが作れそうだ！などと言った想像を膨らませながら、楽しみながら読んでみてください!!

#そもそもLaravelって何？

Laravelとは、**PHPのフレームワークの1つ**です。

>※ **PHP**とは、Webページを動的に生成できるサーバーサイド

構造化データについてもっと詳しくなりたいんじゃ

聞いたことあるけど、案件でガッツリ対応したことはない「構造化データ」。
今回はいい機会と捉え、少しでも理解を深めるために（サッと撫でる程度ですが）まとめたいと思います。

##構造化データってなんですの
>構造化データを提供してもらうと、Google はそのページをより正確に理解できるようになります。
構造化データとは、ページに関する情報を提供し、そのコンテンツ（たとえば、レシピページの場合は材料、加熱時間と加熱温度、カロリーなど）を分類するために標準化されたデータ形式です。

とのことで、要は検索エンジンがそのページを理解しやすいように、
ページ情報を構造化したデータのことですね。

###構造化すると何か良いことあるの
####検索結果でリッチスニペットが表示できる！
構造化する最大の目的ではないでしょうか。
リッチスニペットとはこういう検索結果表示のことです↓
![riotsongblog_pic 2021-10-13 1.47.19.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/6

MathJaxを動的に処理した

# 初めに
どうも、最近 `Ruby on Rails` 初めた人です。~~（記事と全く関係ない）~~

今回の記事は。
MathJaxというライブラリを使って数学のwebアプリを作っていたとき、**動的に**処理できなくて困ったので記事にまとめます。

# MathJaxってなに？
> MathJax はMathML、LaTeX、ASCIIMathMLで記述された数式をウェブブラウザ上で表示するクロスブラウザのJavaScriptライブラリである。MathJaxはApache Licenseのもとでオープンソースソフトウェアとしてリリースされている。
> [MathJax – Wikipedia](https://ja.wikipedia.org/wiki/MathJax MathJaxのwiki)

まぁ、要するに「カッコいい数式を表示できる機能」ってこと

## 例

“`math
二次方程式　[x=ax^2+bx+c]　の解は \\
x = {-b \pm \sqrt{b^2-4ac} \over 2a}
“

CSSのプロパテーと値

#CSSのプロパティーについて
プロパティーの種類は様々なものがありあます。
文字の色、背景色、背景画像、フォントの種類、フォントの大きさなどがあります。
ではここで実際に使ってみしょう。

まずはhtml内にPタグを指定し文字の色を変えてみよう。

“`
index.html

テスト

style.css
@charset “utf-8”
p {
/*処理を書く*/
color:#f0000;
}
“`

上の様に文字が赤くなっていれば成功です！
日本で訳すとすべてのPタグに対して文字の色を赤くしてねという命令になります。
Pタグの{}内の処理はcolorで文字色を変えてほしいということになり、何色に変えるのかという
命令を：の後に書いています。

文字の大きさを変える場合は

microCMSのコンテンツをmarkdownファイルで取得する方法

microCMSのAPIでコンテンツを取得して、それぞれエンドポイントごとに個別のファイルを作成する必要ことがあった。取得したファイルを編集するため、HTMLではなく、markdownファイルで取得する必要があった。その時の記録を残しておく。
なお、npmは使わず、CDNのみを利用するため、Nodeやwebpackがわからない人もこの方法で取得できる。
## microCMS
まずは、microCMSのAPI取得である。公式ドキュメントにもあるように、`serviceDomain` と `apiKey` を利用して取得できる。このapiKeyには2種類でもある。X-API-KEYとX-GLOBAL-DRAFT-KEYである。
GETによる取得は前者のX-API-KEYを利用し、下書きコンテンツも含めて取得する場合はX-GLOBAL-DRAFT-KEYを利用する。

https://document.microcms.io/content-api/get-list-contents

今回はX-API-KEYを利用する。
まずは、htmlのCDNでmicroCMSを読み込み、jsファイル

GSAPでサイドバーを固定しながらスクロール追従

GSAPのScrollTriggerのピン留め機能を使用したら簡単に実装できました。

## デモ

See the Pen
GSAPでサイドバーを固定しながらスクロール追従 by miyakezaka (@miyakezaka)