- 0.0.1. nl2br関数使用時のブラウザ画面の挙動まとめ
- 0.0.2. ホームページを作る[Windows]
- 0.0.3. JavaScriptライブラリ「FlipPlayer」を作りました
- 0.0.4. HTML Living Standard に記載されている仕様が、Nu Html Checker でエラーが出るので調べてみた
- 0.0.5. 実際にWebの閲覧で眼を悪くした人がおすすめするWebの色配色
- 0.0.6. Flexboxとレスポンシブ対応
- 0.0.7. ローカルでも使える超簡易な絞り込み機能（プルダウン・キーワード）付きリスト
- 0.0.8. HTML/CSSコーダーが初めてPhotoshopを使うときのポイント
- 0.0.9. Eslintのエラーについて
- 0.0.10. Teachable Machineを使ったデジタルサイネージ作ったら、通知が鳴りやまなくなりましたよ。すっかり人気者です！
- 0.0.11. ?静的HTMLファイルをNode.jsで立ち上げたサーバーを使ってLocalhostに表示させる！
- 0.0.12. HTMLとCSS
- 0.0.13. ３カ月の学習を終えて
- 0.0.14. [初学者] HTMLでwebサイトを作成するために必要な知識 ①
- 1. HTML
- 2. 見出し
- 3. …
- 4.
- 5. 会社ロゴ
nl2br関数使用時のブラウザ画面の挙動まとめ
# 経緯
nl2br関数を文字列に適用させる際に、”と””で囲んだ際のソースコード画面およびブラウザ画面の挙動の違いを整理したかったため。# 環境
* 言語 php 7.4.29
* ブラウザ Google Chrome
* macOS Monterey 12.1 (M1チップ)# 検証結果まとめ
|テストケース|テスト文字列|nl2br適用|Webページでのソースコード表示|ブラウザ画面|
| :—: | :—: | :—: |:—: | :—: |
| 1 | ‘\n’| なし | 改行なし(\nがそのまま表示)|改行なし(\nがそのまま表示)|
| 2 | ‘\n’| あり | 改行なし(\nがそのまま表示)|改行なし(\nがそのまま表示)|
| 3 | “\n” | なし| 改行あり(\nが消失) |改行なし(\nが消失し、半角スペースが入る)|
| 4 | “\n” | あり| 改行あり(\nが消失し、\
タグが出現) |改行あり(\nが消失)|# 検証コード
“`php5:検証テスト1〜4
ホームページを作る[Windows]
# 目次
1. 事前準備
1. FLASKの書き方# 1. 事前準備
ここでは、flaskで作った簡潔なWebアプリケーションをHerokuに送信し、実行します。
### Herokuの環境構築
[こちら](https://qiita.com/kitahide12123/items/5f4c5b207fa87ed4af7a “Herokuをインストールしよう”)を参考に行ってください
### ディレクトリの構築
以下のように、フォルダ、ファイルを作成します。
>“`bash:ディレクトリ構造
>/
> |–flaskr/
> | |–templates/ # htmlフォルダ
> | | |–index.html
> | |–staics/ # cssフォルダ
> | | |–style.css
> | |–__init__.py
> | |–main.py # flaskのメイン処理
> |–flask_run.py # flask起動
> |–Procfile # Heroku
JavaScriptライブラリ「FlipPlayer」を作りました
自称・画期的なアニメーションライブラリ「[FlipPlayer](http://spice-tortoiseshell-baseball.glitch.me/)」を作ったので、宣伝も兼ねて開発記を書いていきます。
# FlipPlayer
http://spice-tortoiseshell-baseball.glitch.me/で公開しており、スライドショーやアニメーションなどをHTMLページへ簡単に設置できるというものです。
## 開発の動機
2020年に、Flashが廃止されてしまったというのが一番の要因です。実を言うと私は2019からネットを使っていて、その過程でたまにFlashアニメーションを見かけたりしていました。もともと個人サイトなどに興味があり、廃止は名残惜しいな、と思って作ったのがこいつです。# 開発期間
大体1週間くらいかかりました。いやはや、ライブラリを作るのは大変ですね。# 仕組み
ざっくりな仕組みは、キー入力の読み取りと画像遷移、オブジェクト生成などのスクリプトでできています。いちいち変数を宣言しなければいけないため一見複雑に見えますが、中
HTML Living Standard に記載されている仕様が、Nu Html Checker でエラーが出るので調べてみた
## 要約
* [validator.w3.org/nu](https://validator.w3.org/nu) は新しい仕様のチェックに対応していない（2022/05/21現在）
* Nu Html Checker は HTML Living Standard 更新に合わせてアップデートされているが、validator.w3.org/nu には反映されていない
* ローカルから 最新の Nu Html Checker を実行することで新しい仕様のチェックができる## ことの発端
* First View で Layout Shift が発生するので対策を調べていたところ、Picture タグにも width / height を設定することができるらしい (https://www.mitsue.co.jp/knowledge/blog/frontend/202105/31_1512.html)
* Picture タグ内に width / height を設定したところ Nu Html Checker でエラー気になったので調べてみる
## HTML Living St
実際にWebの閲覧で眼を悪くした人がおすすめするWebの色配色
MSXパソコンで color 15,4,7 ではじめて
そのあと、白文字、黒文字のMS-DOSとかを比較的長期間体感して、今の時代に目を悪くした人が、色の提案をしています。## ライトモード
背景に使用すべき色：#ccc～#eee
通常の文字：#222
目立たせる色：#000 (過剰利用はしないこと）## ダークモード
背景に使用すべき色：#222～#333
通常の文字：#ddd～#eee
目立たせる色：#fff (過剰利用はしないこと）## この配色の考え方
普段からディスプレイで白色は多く見る為に、白色は全体的になるだけ抑えており、ちょっとでもグレーに近づけておきます
明るい色と暗いの差異を減らし、かつ、明確にしておく:::note info
これで対処しておけばいいや、っていう悪い例をあげます。
この配色は、かえってピュアブラックとかを使ったほうのが見やすくなるし、色の差異が逆に少なくなり、目の疲労が更に加速しますcolor: #ccc;
background: #444;color: #444;
background: #eee;:::
か
Flexboxとレスポンシブ対応
# Flexbox
CSSレイアウトの一種です。基本的に私は要素を横並び、縦並び、中央ぞろえなどのを行う際に利用しました。
Flexboxは親や子の箱のサイズが拡大縮小しても、その空間に応じてレイアウトが可変するためとても柔軟性が高いものでもあります。### FlexコンテナーとFlexアイテム
Flexレイアウトは大きく分けて2種類の要素に分かれており、それぞれ設定できるプロパティが異なります。・Flexコンテナー
Flexレイアウトの内親の箱となるものです。display:flexと設定することでFlexコンテナーになります。
Flexコンテナーは内容の並ぶ方向(横・縦) / 横方向の整列方法 / 縦方向の整列方法 / 折り返し方法 などを設定することができます。・Flexアイテム
コンテナー内に入ってるものは自動的にFlexアイテムとなります。
Flexアイテムは内容の並び順 / 伸縮比率 / 個別の縦位置などを設定することができます。
Flexアイテム内に更にdivが含まれるなど、入れ子になっているアイテムはFlexアイテムにならないことに注意。### Flex
ローカルでも使える超簡易な絞り込み機能（プルダウン・キーワード）付きリスト
## 画像やPDFも載せられる絞り込み機能付きリストがほしい
自分が過去に作ったページとか画像などを見返す必要が時々あって、パワポに画像を貼り付けてリストっぽくしてctrl+Fで探したりしてたけど、絞り込みできないから不便だった。
エクセルだと画像やPDFを含む絞り込みは厳しい。
Confidentialな情報が含まれるので外部サービスを使うのはNG。データベース等構築するほどでもない。なので、htmlだけでそれっぽいリストを作成しました。
データはhtml内の配列で羅列。
ポータビリティが良いようにCSSもJSも全部インラインで入れてしまっているので、ミニマムこの1ファイルだけでOKです。
jQueryをCDNじゃなくてダウンロードすれば、オフラインでも使えますね。HTML/CSSコーダーが初めてPhotoshopを使うときのポイント
自分はデザイナーじゃないけどPhotoshopのデザインカンプをもらってHTML/CSSをコーディングする、というときに、文字や色の情報を取り出す手順を書いていきます。
# 対象の読者
– Photoshopに初めて触れる人
– PhotoshopのデザインカンプをもらってHTML/CSSをコーディングする人
– 自分でデザインするわけではないが、最低限コーディングに必要な情報を確認したい、デザイナーの意図を読み解きたい人# Photoshopのインストール
Photoshopは有料のアプリです。色々なプランがあります。プランの比較やインストール手順などはこちら↓を参考にしました。
https://citrus-designs.com/install-photoshop/
# psdファイルを開く
今回は、こちら↓のサイトから、ショップのホームページの練習用のpsdファイルをお借りして説明します。
https://usagidesign-e.com/download/
ダウンロードしたpsdファイルがこちらです。
.find(“.js-blockTitle–scroll”).html();
var storyTitleTrim = $.trim(storyTitle);
var newHtml2 = “”;
storyTitleTrim.split(“”).forEach( v => {
newHtml2 += “” + v + ““;
});
$(“.p-story”).find(“.js-blockTitle–scroll”).html(newHtml2);
“`
“`
error ‘storyTitle’ is assigned a value but never used no-unused-vars
“`
→変数定義の際にvarを使用するのは望ましくないからconstかletで定義しようというエラー
varをconstもしくはletに変更
Teachable Machineを使ったデジタルサイネージ作ったら、通知が鳴りやまなくなりましたよ。すっかり人気者です！
## かっこいいデジタルサイネージを作りたい!!作りたい!!作りたい!!
どうも 北海道オホーツク海沿岸のスーパーで働いています いきなり幼稚園児みたいなノリですが４０超えました?経緯
Amazonや楽天などのECサイトや他のスーパーに行かずわざわざウチのお店に来てくれるお客様に、**ちょっとでも良い気分で帰ってもらいたい**そんな事を思ってます（照）
だから商品の良い所をもっと伝えられたらと、手書きPOPをつくったり、メーカーさんからＣＭのデータをもらってタブレットで流したりしてましたが、お客様に伝わっているのかもっと役立つ方法はないのかと思っていたりしました
ところがある日どうでしょう、よくよく考えたらスマホやタブレットが簡単に手に入り、音楽や映像を自分で作れる時代になって、さらに誰でも手軽に画像認識ツールが出来るTeachable Ma
?静的HTMLファイルをNode.jsで立ち上げたサーバーを使ってLocalhostに表示させる！
Progateを使ってWeb製作をし始めてから2週間。ある程度知識が集まってきたので、ほぼ同じでもいいから自分で何か作ってみようと始めた矢先…。
エクスプローラに置いている静的HTMLファイルを、Node.jsを使って立ち上げたサーバーで表示したい。サーバーを立ち上げるコードなどは知っていたが、Progateと同じコードでやってもできない。
結局解決したが、気を付けなければいけないことがあったので、自分の勉強の証として残しておきます。
# 結論：パスが違った
ファイルの階層はこんな感じ“`
MyIntroduction
├── public
│ ├── img
│ │ └──background.png
│ └── css
│ └──stylesheet.css
├── view
│ └── index.html
├── app.js
└── package.json
“`下記のapp.jsはExpressを使ってルーティングをするためのファイルで、改善前です。
“`javascript:app.
HTMLとCSS
# WEBサイトの構造
HTMLはWEBサイトを作るための言語です。
そもそもWEBサイトとは一要素で構成されるのではなく、複数の要素が合わさって作られています。
大分類では、html要素、head要素、body要素と分類されます。
もっと細かく分けると、ヘッダーやメインビジュアルメイン、フッタいったものにも分けられます。
正確にはさらにここから分割することも可能ですが、それは別途参照。
“`
#コード
#コード
#コード
“`
実際のコード画面は上記のような感じです。＜〇〇＞と＜/〇〇＞囲んだコードがその要素に反映されます。
またHTMLは「入れ子の構造」というものになっています。
簡単に言うと要素の中に要素を挿入し、さらにその要素内に別の要素を追加するといった書き方です。“`
#コード
３カ月の学習を終えて
現職からの転職を考えて、プログラミングの学習を始めてから約３カ月。
企業提出用のポートフォリオがひと段落ついたため、こちらのQiitaのほうに今までの学習の振り返りや発生したエラーの解決方法を備忘録として投稿していこうと思います。
主に使用した言語はHTML、CSS,Ruby,Railsです。# HTML,CSS
簡単に言えばWEBサイトを構成するための言語です。
HTMLでWEBサイトの大まかな構造を作り、CSSで外観を整えるといったイメージ。
# Ruby
WEBアプリケーションを作るために必要な言語
#### HTMLとの違い
HTMLは「WEBサイト」を作るための言語、対してRubyは「WEBアプリケーション」を作るための言語です。
「WEBサイト」は訪問者が受動的に閲覧するものです。つまり、静的なページのことです。一方「WEBアプリケーション」は訪問者に能動的な動作を求める者です。閲覧だけでなく、情報を入力してもらい、その内容によって表示が変わります。
具体的には、ユーザー登録機能や検索機能などです。入力した内容によってマイページの表示は変化するし、検索結果も当然変わ[初学者] HTMLでwebサイトを作成するために必要な知識 ①
# HTMLでwebサイトを作成する
## 用語
### タグ
“`:タグ
<>
“`
開始タグ、終了タグなど
要は<>１つでタグ### 要素
“`:要素HTML
“`
タグも含めた、これ全体を要素と呼ぶ
**h1は要素名**である### 属性
“`:書き方
<要素名 属性="属性値">1.要素名の後ろに半角スペース
2.属性に = を付ける
3.属性値を ” or `で囲む
“`要素名に対して、属性という設定をつけるイメージ
“`:意味
要素名の、属性（設定）は、属性値
“`
と置き換えて読めばいい“`:例
“`画像(img)の場所(src)は”http://…..”(url)
## 語法一覧
### 見出しをつける
“`:書き方
見出し
見出し
.
.
.見出し
“`
`
…
`から`
…
`まで大見出し、中見出し、子見出しと昇順で重
お前らはまだ img タグの alt 属性の付け方を間違っている
# 1行で
`alt`属性は、「全ての **画像をその`alt`属性のテキストに置き換えたときにページの意味が変わらない** 」ようにつける。
（[HTMLの標準規格書より](https://html.spec.whatwg.org/multipage/images.html#general-guidelines)）マジでこれに尽きる。
# 具体例
## 例１：ロゴ
### ❌ 間違ったマークアップ
“`html:間違い
我々の使命、それは世界にイノベーションを〜
“`
画像を`alt`属性のテキストに置き換えると以下のように意味がおかしくなる。
“`html:間違いの置き換え
会社ロゴ
我々の使命、それは世界にイノ
100日後くらいに個人開発するぞ！day030
## 今日もHTML＆CSSを総復習してみた！【後編】
### ヘッダータグとフッタータグ
– ヘッダーとフッターのタグは非常によく使われるためHTMLには``タグと`
