今さら聞けないHTML　2020年01月25日

Parcel で HTML から環境変数にアクセスしたい

# TL;DR

– [Parcel](https://parceljs.org/) を使ってフロントエンド開発をしている人を対象とした内容です
– [posthtml-expressions](https://github.com/posthtml/posthtml-expressions) を使って locals に `process.env` を追加します
– `{{ process.env.NODE_ENV }}` のように環境変数にアクセスします
– JavaScript からは簡単にアクセスできますが、HTML からアクセスする方法があまりウェブ上になかったので残しておきます

# やりたいこと

– 一言で言うと、Parcel でテンプレートエンジンをサクッと使いたいのです
– 環境ごとに処理を切り替えたいケースは多々あります。JavaScript の文脈では、次のように環境変数にアクセスするのが一般的です
– `if (process.env.NODE_ENV === ‘PRODUCTION’) // 本番ビルド時だけ行いたい処理`

小中学生向けのプログラミング言語4つまとめ

最近は、小学生からプログラミングを始める時代になってきているそうです。
物事を考える力がつくから～　とかで、義務教育に入るそうですね。
そんな小学生・中学生の人におすすめなプログラミング言語)を紹介します。
# Scratch
早速言語じゃないやん！ってね。
サイトはこちら：https://scratch.mit.edu/

GUIで、プログラミングをできるサイトです。
ブロックをつなげて、キャラクターを動かしたりできます。

## 特徴

他のものと違い、コードを打たないで、ブロックをつなげて作品を作ります。
そのため、始めやすいですが、他の言語に移るのは大変です。

私はあまり好きではありません。

# JavaScript

一番おすすめです。

3日くらい勉強サイトを見ていれば、(若いうちは)すぐ頭に入ってくるくらい単純な言語です。

## 特徴

動かすのが簡単です。

Chromeを使っているなら、「右クリック→検証」か「F12」を押すとデバッグツール　が出てきます。
その、「Console」と書いてあるところにコードを入力すると動かせます。

Googleで、「使っている

プロゲートHTML,CSS中級編

#今回はプロゲートでHTML、CSSの中級編をやりました。
中級編も昔にやったことがあったのでそんなに苦労しなかったです。ただ、当たり前ですが初級編に比べると難しくなっており、復讐をする必要があると感じました。具体的にはpotisionのところなでが少し理解するのに時間がかかりました。
##HTML、CSSの中級編の要約
親要素や子要素、positionなどについて学び、ボタンの作り方やアイコンの作り方について学んで。クラスごとに意識してCSSを適応察せていかないとミスを起こしたりする。

Djangoで区分値を定義し、簡単に画面へ反映する

# Djangoで区分値を管理する
## 要件
`model.py`で区分値を定義し、履歴のリストを表示するhtmlページへ反映します。

## 1. モデルに定義する
`History`テーブルに`STATUS`という区分値を持たせます。
ポイント：`choices=`

“`python:manage.py
class History(models.Model):
STATUS = (
(‘001’, ‘実施前’), # BEFORE_EXECUTE
(‘011’, ‘ログイン中’), # DURING_LOGIN
(‘012’, ‘取得中’), # WHILE_GETTING
(‘101’, ‘完了’), # DONE
(‘401’, ‘失敗’) # fail
)

start_at = models.DateTimeField()
status = models.CharField(max_length=3, choices=STATUS)
“

初学者がAtomに入れたパッケージ

# はじめに
自分の使っているPCにAtomをインストールしたので、その際に入れたパッケージの備忘録です。

# *Japanese Menu*
Atomのメニューバーとコンテキストメニュー、設定画面を日本語に翻訳してくれるパッケージ

# *Show Ideographic Space*
全角スペースを見えるようにしてくれるパッケージ
調べものをしながらコーディングをすると、やってしまうことがあるため入れました

# *File Icons*
開いているファイルの種類をアイコンで表示してくれるパッケージ

# *autocomplete+paths suggestions*
ディレクトリのパスを自動補完してくれるパッケージ

# *atom-beautify*
自動的にコードのインデントなどを整形してくれるパッケージ

# Vue.js用のパッケージ
## language-vue-component
vue用のシンタックスハイライトが追加されるパッケージ

## *vue-autocomplete*
vue component用の入力の自動補完をしてくれるパッケージ

## *vu

CSS,SCSSで画像を背景にする方法

SCSSで作成

.クラス名 {
background: url(/フォルダ名/ファイル名) no-repeat top / 横px 縦px;
height: 要素の高さ;
wight: 要素の幅;
}

backgroundで背景にする

urlで画像を指定する

no-repeatで画像が何枚も投稿されるのを防ぐ
（これがないと勝手に何枚も表示される）

topで上に詰める？

画像の縦横を指定してあげる

間違いがあれば指摘をお願いします。

フッターのコピーライトとかで自動的に今の年を表示する方法

フッター等によく書いてあるコピーライト。
`Copyright © hoge.exmaple.com 2010-2020 All Rights Reserved.`
こういうやつです。

この2020という年数を年が変わるたびに手動で変更するのは面倒ですよね。今回はJavaScriptで自動で今の年を表示する方法を紹介します。ものすごい小ネタです。

## フッターのコピーライトとかで自動的に今の年を表示する方法

“`html

“`

JavaScriptで今の年を表示しているだけです。

“`js
const yearElm = document.querySelector(‘.thisYear’); // を取得
const thisYear = new

HTML, CSSの基礎

#今回はProgateを使ったHTML,CSSの学習をしました。
　実は前に２、３回くらいやったことがあったので、スラスラと進めることができました。
　具体的にやったこととしては見出しの書き方やHTMLへのCSSのリンクの書き込み、ヘッダーやフッターやメインの基礎です。HTML、CSSの復習としてはかなりいいものでした。
##HTMLとCSSの要約
HTMLでサイトに文字や画像などを書き込み、CSSでその文字やCSSを装飾します。基本的にはこの二つを使うことでサイトの見た目を作ることができます。

jQueryで年月のプルダウンを生成する

こんなかんじのプルダウンを作成します。

“`
選択する
“`

“`