インライン要素とブロック要素

インライン要素：　改行されない要素
ブロック要素　：　改行される要素

aタグなどのインライン要素はwidthやheightを指定できず不便な点がある。

しかしdisplayプロパティを使用することで、インライン要素をインラインブロック要素やブロック要素に変更可能です。
そうすることで、高さや幅を変更することも可能になります。

またtext-alignプロパティを使用することで、テキストなどのインライン要素やブロックの配置を変更できる。

text-align以外にも要素を中心に寄せる方法としてmargin:0 autoがあり、これらを使い分ける必要がある。

広い範囲を囲むようなブロック要素の場合はmarginを使用すべきです。
それに対して、テキストやボタンなどのインライン要素やブロックの場合はtext-alignを使用すべきです。

nuxt.js触っててheadの内容どこに書くのか分からなかったのでメモ

これさえ読めば以降読まなくてもokです

headに色々入れることができます。ページのdataとかも使ってページ個別に記載できます。
（公式）

nuxt.config.jsの中のheadプロパティを使えば、全ページ共通の要素は一発で記載できます。
（公式）

つかいかた　〜ページ個別の記載事項〜

各ページで記載内容を変えたい場合はこんな感じ。
こんな感じにhead()で書いていきます。

index.vue

  head () {
    return {
      title: 'ほげほげ',
      meta: [
        { hid: 'description', name: 'description', content: '説明' },
　　　　　//キーワードはお守りらしい。（消したい。。）
        { hid: 'keywords', name: 'keywords', content: 'キーワード' },
        { hid: 'og:type', property: 'og:type', content: 'website' },
        { hid: 'og:url', property: 'og:url', content: '〇〇.com' },
        { hid: 'og:title', property: 'og:title', content: 'ほげほげ' },
        { hid: 'og:description', property: 'og:description', content: '説明'},
        { hid: 'og:image', property: 'og:image', content: '/static/top_img.jpg' },
      ],
      script: [
　　　　　//タグマネージャー？？関連のスクリプト
        //<script>innerHTMLの中身</script>
        { type: 'text/javascript', innerHTML: '/*<![CDATA[*〇〇〇〇*]]>*/' }
      ],
    }
  }

だいたい見て分かる気がしますが、1個だけ。

        { hid: 'description', name: 'description', content: '説明' },

Q：hidってなんや？

A：よく分かりません。

子コンポーネント利用されたときにメタ情報が重複してしまうことを避けるために hid キーを使ってユニーク識別子を meta 要素に設定してください。

と公式には書いてあります。
これが無いとnuxt.config.jsで決めた共通の要素の設定と共存する形になってしまったりします。
全ページ同じ識別子でも（今の所）支障無いです。
お詳しいかたぜひコメントください。。

また、タグマネージャー関連のスクリプトはinnerHTMLに書きます。
この際、下のnuxt.config.jsに__dangerouslyDisableSanitizers: ['script'],と言う記載がありますが、これをどこかに書かないと正しく反映されません。
1ページごとに書いてもいいのですが、nuxt.config.jsに共有したら各ページには記載しなくていいので楽です。

つかいかた　〜全ページ共通の設定〜

nuxt.config.jsに書きます。
こんな感じに使っています

nuxt.config.js

  /*
  ** Headers of the page
  */
  head: {
    title: デフォルトのタイトル,
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: 'デフォルトdescription' },
      { hid: 'og:site_name', property: 'og:site_name', content: '〇〇' },
      { hid: 'fb:app_id', property: 'fb:app_id', content: 'fb_app_id' },
      { hid: 'twitter:card', property: 'twitter:card', content: 'summary_large_image' },
      { hid: 'twitter:site:id', property: 'twitter:site:id', content: '@ツイッターID' },
      { hid: 'twitter:creator', property: 'twitter:creator', content: '@ツイッターID' },
    ],
    link: [
      { rel: 'shortcut icon', href: '/favicon/favicon.ico', type: 'image/ico'},
      { rel: 'apple-touch-icon', href: '/favicon/apple-touch-icon16px.png', size: '16x16', type: 'image/png'},
      { rel: 'apple-touch-icon', href: '/favicon/apple-touch-icon32px.png', size: '32x32', type: 'image/png'},
      { rel: 'apple-touch-icon', href: '/favicon/apple-touch-icon64px.png', size: '64x64', type: 'image/png'},
      { rel: 'apple-touch-icon', href: '/favicon/apple-touch-icon180px.png', size: '180x180', type: 'image/png'}
    ],
    // これが無いとscriptの中身がエスケープされる（上記参照）
    __dangerouslyDisableSanitizers: ['script'],
  },

みたらだいたいわかるでしょう。fbのidとかはググったらたくさん出てきます。

TL;DR

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

やりたいこと

• 一言で言うと、Parcel でテンプレートエンジンをサクッと使いたいのです
• 環境ごとに処理を切り替えたいケースは多々あります。JavaScript の文脈では、次のように環境変数にアクセスするのが一般的です
  • if (process.env.NODE_ENV === 'PRODUCTION') // 本番ビルド時だけ行いたい処理
  • new SomeLibrary({ apiKey: process.env.API_KEY }) // API キー等を DEV/PROD で分ける
• これと同じことをビルド時に HTML に直接書きたい時があります
  • サーバーサイドで処理する場合は、何らかのテンプレートエンジンを使うのが一般的です
  • 一方フロントエンド開発（主に SPA として静的に HTML をサーブしたい場合）では、ビルド時に HTML を生成するのが一般的です
  • これは SSR する場合にも言えます。ビルド時の変数を利用するには、やはりビルド時に HTML を生成する必要があります
• Parcel はデフォルトで Babel などを用意してくれていますが、HTML テンプレートエンジンは自分で追加する必要があります
• 公式ドキュメントの HTML の項目をみると、PostHTML なるものが標準サポートされているそうなので、今回は PostHTML を利用してビルド時にテンプレートエンジンを動作させ、環境変数にアクセスできるようにします

PostHTML

• PostCSS を知っている方なら、その HTML 版だと理解するのが早いです
• 要するに「HTML 変換器」と「HTML 変換器を作るためのプラグイン管理システム」が PostHTML です
  • Post の意味は pre と post の post であり、HTTP の POST ではありません
• Parcel には元々「アセット変換器」という役割があり、「アセット変換プラグイン管理システム」も有しています
  • これは PostHTML の存在意義とよく似ていますが、２つのエコシステムをどっちも使える分、ライブラリがたくさんあって便利という訳です

posthtml-expressions

• https://github.com/posthtml/posthtml-expressions
• PostHTML プラグインの１つで、変数にアクセスできるだけでなく、条件分岐や繰り返しなどの制御構文、スコープ、モジュール化などを備えたユニークなテンプレートエンジンです
• locals オプションにキーバリューペアを与えることで、HTML からアクセス可能な変数を定義できます
• HTML 中に書かれた {{ }} の中に JavaScript 式を書くことが出来るため、それだけでも十分な表現力を備えていますが、うっかり書き過ぎると非常に読みづらい HTML になってしまうので注意が必要です
• もう１つ注意点として、このプラグインでは式の評価のために内部的に Node.js の vm の runInContext を使っているため、Parcel ビルドとはコンテキストとは異なります
  • 要するに、Node.js の変数は共有されていません（そのために locals があります）
  • Parcel には .env に書かれた環境変数をデフォルトで process.env (JavaScript) に書き出してくれる機能がありますが、上記のような理由で {{ process.env.NODE_ENV }} と書いてもアクセスできません
    • うっかり書くと process is not defined. と言われるはずです
    • 解決方法を次に述べます

やってみる

• まずは、 npm i -D posthtml-expressions を実行してプラグインをインストールします
• 次に、posthtml.config.js というファイルを package.json と同じフォルダに作り、次のように書きます
  

module.exports = {
  plugins: {
    'posthtml-expressions': {
      locals: {
        process: {
          env: process.env
        }
      }
    }
  }
};

• 上記は Parcel の設定ファイルで、PostHTML プラグインに関する設定をまとめたものです。また、PostHTML を有効化する意味合いも含まれています
  • 'posthtml-expressions': { ... } と言うのが posthtml-expressions の設定です
  • process.env の中身を全てコピーして、 HTML からアクセスできるようにしています
  • 説明は割愛しますので、詳しく知りたい方は README をご覧ください
  • https://github.com/posthtml/posthtml-expressions#options
• あとは、 index.html などに <div>{{ process.env.NODE_ENV }}</div> などと書いて、ビルドするだけです
• 生成後の HTML を確認すると、 <div>development</div> のように、文字列に置き換わっているのが分かると思います

リスク

• 重要なことなので２回書きますが、このライブラリは式の評価に vm.runInContext を使っています
• VM がサンドボックスの役割を果たしているとは言え、例えば第三者が書いたコードをここで実行するなどと言ったことは大変危険なのでやめておくべきでしょう
  • やむおえずそうなってしまう場合は、もっとセキュアなテンプレートエンジンを選ぶべきでしょう。ただし、一般には表現力の高さとトレードオフの関係にあります（例えば、関数が使えないなど）
  • 複雑になってしまう場合は、諦めて JavaScript を使って動的に DOM に書き込むコードを書く方が賢明かも知れません

最近は、小学生からプログラミングを始める時代になってきているそうです。
物事を考える力がつくから～　とかで、義務教育に入るそうですね。
そんな小学生・中学生の人におすすめなプログラミング言語)を紹介します。

Scratch

早速言語じゃないやん！ってね。
サイトはこちら：https://scratch.mit.edu/

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

特徴

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

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

JavaScript

一番おすすめです。

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

特徴

動かすのが簡単です。

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

Googleで、「使っているブラウザの名前　デバッガーツール」と検索すれば、デバッガーツールの出し方が書いてあると思うので調べてみてください。

ただし、IEはおすすめしませんので。

HTML

これはプログラミング言語かな？

とりあえず、Webサイトを作るためのマークアップ言語です。
先程書いた「デバッガーツール」を開いてElementsをみると、

<html>
  <body>
    <a></a>
    <p></p>
  </body>
</html>

みたいなコードが出てくると思います。
これがHTMLです。

Webサイトはほぼこれで作られています。

プログラミング言語ではないので、動くものを作るのは大変だと思います。

JavaScriptと組み合わせると、ブラウザゲームも作ることができます。

PHP

これは少し難易度が高いです。
PHPを動かすためには、PHPが動くサーバーが必要です(Windows上でもXamppというソフトを使えば動きます)。

そして、phpファイルにコードを書くと動くのですが、JavaScriptよりも構文(書きかた)が難しいです。

すこし時間を掛けて勉強する必要があります。

特徴

Qiitaのようなサービスを作るにはPHPが必要不可欠です。QiitaはRubyでできています。ご指摘くださった方、ありがとうございます。
マニュアルが日本語でわかりやすいので、すぐに調べることができます。
また、人気プログラミング言語ランキングでも上位に入っているので、仕事の件数も多いです。

おすすめは？

最初はJavaScriptがおすすめです。

人気な言語なので、知恵袋などでもいろいろ答えが転がっています。
安定のJSから始めてはいかがでしょうか？

今回はプロゲートでHTML、CSSの中級編をやりました。

中級編も昔にやったことがあったのでそんなに苦労しなかったです。ただ、当たり前ですが初級編に比べると難しくなっており、復讐をする必要があると感じました。具体的にはpotisionのところなでが少し理解するのに時間がかかりました。

HTML、CSSの中級編の要約

親要素や子要素、positionなどについて学び、ボタンの作り方やアイコンの作り方について学んで。クラスごとに意識してCSSを適応察せていかないとミスを起こしたりする。

はじめに

自分の使っている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用の入力の自動補完をしてくれるパッケージ

vue-hyperclick

vue componentから定義元へジャンプできるパッケージ
※hyperclick,js-hyperclick,language-vue-componentを入れてないといけません

最後に

今回、AtomをインストールしたのはこれからVue.jsの勉強をしようと思ったからです。
今まではサーバーサイドよりのことを勉強してきたので、これからフロントを多めに勉強していきたいと思います。