経緯

この記事を投稿するにあたって、自分自身がWeb制作をはじめるにあたって、最初にぶつかった見えない壁についてを共有していきたいと思います。
はじめたばかりの頃「あれ！？ここってどうなってるんだ？？」ってところがググってみても意外に見つからなかったりするんですよね。
他の人は当たり前のようにできていることなのかな？なんて思いましたが、自分のメモと同じような苦悩を抱えている方の一助になれば幸いでございます。

注意

ここでは、HTML＆CSSのコーディングとWordPressのはじめ方のような導入部分の解説は行いません。
すでに、ローカルでの環境構築は行われていることを想定しております。
その際にHTML＆CSSでコーディングした時とWordPressにあげた時とで、壊れるところが個人的に戸惑ってしまったので、そのポイントを中心に多くしていきたいと思いいます。

【目次】今回つまづいたポイント

1.謎の空白
2.表示されない画像
3.お問い合わせフォーム
4.効かないCSS・SCSS

1.謎の空白

直接自前エディターで記述を行う際には全く問題ないのですが、WordPressの固定ページに直接コードを入力する際には全く身に覚えのない空白が発生してしまうことがあります。
こちらを解決するための方法は非常に簡単で、自作テーマ内のfunctions.phpに以下のコードを入力するだけで綺麗に解決しますので、お試しください。
また、functions.phpをいじる際には前もってバックアップを取っておいたほうがいいそうですよ。

functions.php

add_action('init', function() {
remove_filter('the_excerpt', 'wpautop');
remove_filter('the_content', 'wpautop');
});
add_filter('tiny_mce_before_init', function($init) {
$init['wpautop'] = false;
$init['apply_source_formatting'] = ture;
return $init;
});

2.表示されない画像

こんなことあるのか、、というようなアクシデントですが、少し頭を使わないとなかなか抜け出せない沼になっております。
一般的にWordPressにアップロードする際にはタグに以下のようなテンプレートを入れる決まりとなっております。

<img src="<?php echo get_template_directory_uri(); ?>img/image.jpg"/>

フロントページのようにエディターでのコーディングで済むものであれば上記のコードを組み込めば問題ないのですが、それ以外の固定ページ等に画像を挿入する際にはこれではいけません。
原因としては、おそらく外部からの読み込みではなくWordPress内部で読み込まれるということで、テンプレートではなく階層構造での読み込みとなるそうです。

 <img src="/wordpress/wp-content/themes/wordpress/img/image.jpg"/>

これがわからないと、画像が表示できなくて大変なことになってしまうのですが、意外と解説している書籍やサイトが少なくて困ってしまいますね。

3.お問い合わせフォーム

これはシンプルにプラグインだよりなのですが、contact form 7とmw wp formの両方を試してみて、個人的にはmw wp formが直感的に使いやすかったので、お問い合わせフォームの実装で詰まっている方はぜひ試してみてください。
詳しい設定方法はこちらで習得しました。
→https://newstd.net/user_manual/mwwpform
ただ、実際に実装してみた時にフォームがうまく機能しなくなってしまうことがありました。
原因は埋め込んだショートコード自体にもともと

タグが入力されていたことに気がつかず、その上から二重でタグで囲ってしまっていたことにあります。
気をつけましょう。

[mwform_formkey key="195"]

4.効かないCSS・SCSS

WordPressにあげる前、HTML&CSSのみのコーディングであればなんの問題もなくCSSが反映されていたんでけど、WordPressにあげた途端反映されなくなってしまった、、という方も多いかもしれません。
しかし、それが反映されなくなったのではなくて遅くなっただけなので、焦らずに対応しましょう。
方法は簡単ですが、実行する前によく確認してみましょう。
①クロームの右上にある縦黒３点をクリックしてこの画面を開く
　その他のツール→閲覧履歴を消去

②削除期間を指定して実行
　※削除前に確認しましょう

最後に

せっかくWeb制作をはじめたのに、つまらないところで挫折したらもったいないですよね。
難しいと思うような問題も時間と執念をかければ大抵のことはなんとかなるはずですので、頑張りましょう。
これからも、気づいた情報を共有していきたいと思いますのでよろしくお願いします！

Reactぴえんチャレンジって何？

nikoさんの記事に触発されたものです。
2019年12月からUdemyでReactの学習を開始したのですが、練習に丁度よいチャンレンジだと思いやってみました。

チャレンジ結果

画像をクリックしてください。

チャレンジのポイント

1. スライダーを実装するため、初めてMaterial UIというものを使ってみました。
2. ReactのHooksを学習したので、クラスコンポーネントを使わず、propsでバケツリレーしないパラメータの引き渡し方法を採用してみました。
3. CSSの設定。
4. 少し前に、webpackで悩みに悩んでしまったので今回は create-react-app を使ってみました。
5. Netlifyにデプロイしてみました。
6. GitHubで初めてブランチを使ってみました。

ソースコード

GitHub
練習のために作ったものではありますが、ここをこうしたほうが良いとかありましたら、ぜひご指導ください。

謝辞

• ふうさんや弱々エンジニア会の強々エンジニアの方に教えていただきました。
• 妻にファビコンを作って貰いました。

その他

これを作るのに1週間くらいうんうんうなっていたら、小学生の娘が半日でこんなものを作ったと自慢してくれました。
私はその後も更に2週間くらいうなっていました。ちょっとピエンですね。

Reactぴえんチャレンジって何？

nikoさんの記事に触発されたものです。
2019年12月からUdemyでReactの学習を開始したのですが、練習に丁度よいチャレンジだと思いやってみました。

チャレンジ結果

画像をクリックしてください。

チャレンジのポイント

1. スライダーを実装するため、初めてMaterial UIというものを使ってみました。
2. ReactのHooksを学習したので、クラスコンポーネントを使わず、propsでバケツリレーしないパラメータの引き渡し方法を採用してみました。
3. CSSの設定。
4. 少し前に、webpackで悩みに悩んでしまったので今回は create-react-app を使ってみました。
5. Netlifyにデプロイしてみました。
6. GitHubで初めてブランチを使ってみました。

ソースコード

GitHub
練習のために作ったものではありますが、ここをこうしたほうが良いとかありましたら、ぜひご指導ください。

謝辞

• ふうさんや弱々エンジニア会の強々エンジニアの方に教えていただきました。
• 妻にファビコンを作って貰いました。

その他

これを作るのに1週間くらいうんうんうなっていたら、小学生の娘が半日でこんなものを作ったと自慢してくれました。
私はその後も更に2週間くらいうなっていました。ちょっとピエンですね。

はじめに

独学プログラミング学習の3日目

忘れっぽいので備忘録代わりに残しておこうと思う
※人に見せる前提ではないよ

目標

• 簡単なページをサクっと作れるようになる
• Web上に自分のポートフォリオを公開
• アウトプットのスキルを身につける

CSSとは

プログラミング学習2日目でも軽く触れたけど，webサイトのデザインを作るための言語
今回はCSSでも土台になるpositionとdisplayについて勉強したのでアウトプットをば

potisonとは

positonとは，要素の位置を決めるためのプロパティ

• 位置を決めるには4つに方法がある

プロパティ名	説明
static	初期値(ほぼ使わない)
fixed	固定
relative	相対位置
absolute	絶対位置

ほぼ使わないstaticは割愛して，fixedから解説していく

fixed

fixedは画面の決まった位置に要素を固定させる効果がある
例えば，ヘッダーをページ上部に固定しておきたいときなどに使われる

relative

relativeは移動させたい対象が元々いた位置が基準となる
たぶん要素の左上が基準になると思う
また，relativeの特徴として要素を移動させても元あった要素分の空間が確保され続けるといったものがある

absolute

absoluteはウィンドウまたは親要素が基準となる
absoluteの特徴として，親要素にstatic以外が指定されている場合，親要素の左上が基準点となる
また，relativeと違い要素が移動したら元あった空間に別の要素が詰めて入る

要素のど真ん中に要素を置きたい

たぶんこんな感じ
動作確認はしていないです

/* 親要素 */
.wrap{
  position: relative;
}
/* 子要素 */
.inner{
  position: absolute;
  top: 50%;
  left: 50%;
  /* 
   * 上記までだと子要素の左上が中央に来るので，
   * 子要素の半分だけ上と左に戻す
   */
  transform:
    translateX(-50%)
    translateY(-50%);
}

※iOSとかに対応させるときはwebkitとか使っていい感じにやる

displayとは

displayとは，要素の表示形式を指定するプロパティ

• たぶんよく使うdisplayプロパティの値

値	説明
block	縦に積み上がっていく
inline	横に並んでいく
inline-block	横に並んでいくけど，blockの特徴も持つ
flex	横に並んでいく
none	なし

詳しくは下で解説するので，どの値を設定したらどの方向に並ぶのかだけ覚えていればいいよ

block

display: blockは内部要素を包み込むタグの初期値だよ
div, p, ulなどの初期値はdisplay: blockになるよ

blockの特徴は以下のとおり：
1. 要素は横いっぱいに広がる
2. 要素が縦に積み上がっていく
3. 幅と高さが指定できる
4. 上下左右で余白を指定できる
5. text-alignやvertical-alignは指定できない

inline

display: inlineは中に要素が入らないタグの初期値だよ
主にspan, a, imgなどがあるよ

inlineの特徴は以下の通り：
1. 要素が横に並んでいく
2. 幅と高さが指定できない
3. 縦の余白が指定できない
4. text-alignとvertical-alignが指定できる

inline-block

display: inline-blockはblockとinlineのどっちの特徴ももっているよ

inline-blockの特徴は以下の通り：
1. 要素が横に並んでいく
2. 幅と高さが指定できる
3. 上下左右で余白を指定できる
4. text-alignとvertical-alignが指定できる

かっこいいボタンとか作るときによく見かける気がする

flex

display: flexはフレックスボックスを作るために指定する値だよ
フレキシブルの略で，曲げるって意味があるよ

最近使い勝手がよくなって，よく使われるようになったからモダンコーディングではこれを使うのかな？どうなんでしょう？
ともかく，レスポンシブとの親和性が高いという特徴を持っているよ

まずはフレックスボックスってなんぞや？ってなったので調べました
「親要素にdisplay: flexを設定した場合，親要素がフレックスコンテナになる．子要素はフレックスアイテムになって色々なレイアウトが設定できる」

・・・なんのことを言っているのかわからないけど，スゴイやつってことでいいかな？いいよね

ちょっと整理してみようと思う．

項目	説明
display: flex	フレックスコンテナを指定
flex-direction	子要素の並ぶ方向を指定
flex-wrap	子要素を横並びにするか縦積みにするかを指定

ということらしい
上記の他にjustify-content，align-itemsというプロパティもあって，
この2つどちらも子要素同士をどの間隔で並べるかを指定するプロパティだよ
どっちがどっちかは多分文字で覚えるより実際に使って身体で覚えたほうが良さそう(脳筋)

おわり

今日はCSSのプロパティのpositionとdisplayについて勉強したよ
今までなんとなく適当に使ってたけど，結構間違った使い方してたみたい

flexに関してはまだ親要素のことしか調べてないから子要素も含めてflexだけで勉強しなおす必要ありそうかな
ともあれ，今日は疲れたからここまで
次回はJavaScriptをかじってみるよ

【やったこと】
position: absoluteとrelativeのそれぞれデフォルト(top,left,rightの設定なし)でmargin:autoの併用を実施。挙動がことなるため調査を実施。

【わかったこと】
Chrome Developer Toolsにて属性の確認を実施。positionのデフォルトが異なるためにabsoluteは左寄り、relativeは中央に配置されることがわかった

※詳細は下記ブログに記述
【第3回】CSSの position: absoluteとrelativeのデフォルトにimargin:autoを設定した際の挙動の相違についての調査

今日もCSSの続きをやっていきましょう。

前回のはこちら
100日後にエンジニアになるキミ - 14日目 - CSS - CSSの基礎1

CSSのセレクタ

CSSの各部分には名称がついており、基本的なCSSの書き方は
セレクタ {プロパティ名:値;}
となります。

セレクタ(selector)はCSSを適応させる対象のことです。

どの部分のスタイルを変えるのかを指定するのには
まずセレクタの使い方を覚えないと
変なところが変更されてしまいレイアウト崩れが発生してしまうことがあるので
頑張って覚えていきましょう。

要素セレクタ

セレクタに要素名を使用すると
指定した全ての要素にスタイルが適用されます。

sample.css

/* 全ての h2 タグに適用 */
h2 {
  color: blue;
}

/* 全ての div タグに適用 */
div {
  color: red;
}

sample.html

<h1>タイトル1</h1>
<h2>タイトル2</h2>
<div>divテキスト</div>
<p>pタグのテキスト</p>

全称セレクタ

セレクタに *（アスタリスク） を使用すると
その配下の全ての要素にスタイルが適用されます。

sample.css

/* div タグ内の全ての要素に適用 */
div * {
  color: blue;
}

sample.html

<div>
  <h1>タイトル1</h1>
  <h2>タイトル2</h2>
</div>
<p>pタグのテキスト</p>

idセレクタ

任意のidが付いている要素にスタイルが適用されます。
id名の前に#をつけることで指定できます。

sample.css

/* id名がotuの要素に適用 */
 #otu {
  background-color: blue;
}

sample.html

<div>
  <h1>タイトル1</h1>
</div>
<p id="otu">pタグのテキスト</p>

classセレクタ

任意のクラスが付いている要素にスタイルが適用されます。
クラス名の前に.をつけることで指定できます。

sample.css

/* class名がopの要素に適用 */
.op {
  color: blue;
}

sample.html

<div>
  <h1>タイトル1</h1>
</div>
<p class="op">pタグのテキスト</p>

子孫セレクタ

半角スペースでセレクタを区切ると、指定した要素の中の要素にスタイルが適用されます。

sample.css

/* div タグ内の a タグに適用 */
div a {
  color: red;
}

sample.html

<div>
  <p>pテキスト</p>
  <a href="#">aテキスト</a>
</div>

子要素、孫要素にのみ適当させることができるなど
幅広い指定ができます。

子セレクタ

セレクタとセレクタを > で繋ぐことで、要素の直下の子要素のみにスタイルが適用されます。

sample.css

/* class名がotuのdivタグの直下のspanタグのみに適用 */
div.otu > span {
  color: blue;
}

sample.html

<div class="otu">
  <span>spanテキスト1</span>
  <p>
    <span>spanテキスト2</span>
  </p>
</div>
<div>
  <span>spanテキスト3</span>
</div>

特定の子要素にだけスタイルを適用できます。
全称セレクタとあわせると要素の中の全ての子要素にスタイルが適用されます。

/* p タグ内の全ての子要素に適用 */
p > * {
  color: blue;
}

隣接セレクタ

セレクタとセレクタを +で繋ぐことで
ある要素に隣接してる要素にスタイルが適用されます。

sample.css

/* h2 タグに隣接してる p タグに適用 */
h2 + p {
  color: blue;
}

sample.html

<h1>タイトル1</h1>
<h2>タイトル2</h2>
<p>隣接1</p>
<p>隣接2</p>

関接セレクタ

セレクタとセレクタを ~で繋ぐことで、ある要素以降の兄弟要素にスタイルが適用されます。

sample.css

/* p タグ以降の span タグに適用 */
p ~ span{
  color: blue;
}

sample.html

<h1>タイトル1</h1>
<p>隣接1</p>
<h2>タイトル2</h2>
<p>隣接2</p>
<div>div1</div>
<span>span1</span>
<div><span>span2</span></div>

属性セレクタ

要素の後に [ ]で属性を指定すると
任意の属性を持つセレクタにスタイルが適用されます。

要素[属性名]

要素[属性名="値"]

属性値まで指定すると、その属性値のものだけに適応されます。

sample.css

/* target属性を持つ div タグに適用 */
div[target="window"]{
  color: blue;
}

sample.html

<h1>タイトル1</h1>
<div target="window">target1</div>
<div target="blank">target2</div>

link擬似クラス

セレクタの後に:linkをつけることで、未訪問のリンクにスタイルを適用することができます。
また、セレクタの後に :visitedをつけることで、訪問済みのリンクにスタイルを適用できます。

sample.css

/* 未訪問リンクに適用 */
a:link{
  color: red;
}
/* 訪問済みリンクに適用 */
a:visited{
  color: green;
}

sample.html

<a href="https://www.yahoo.co.jp/">link1</a>
<a href="https://www.google.co.jp/">link2</a>

その他の擬似クラス

hover擬似クラス

セレクタの後に:hoverをつけると、ある要素にマウスが乗っている間だけ
スタイルが適用されます。

a:hover{
  color: blue;
}

active擬似クラス

セレクタの後に:activeをつけると、ある要素をクリックしてから離すまでの間だけ
スタイルが適用されます。

input:active{
  color: blue;
}

focus擬似クラス

セレクタの後に:focusをつけると、 ある要素をフォーカスしている間だけ
スタイルが適用されます。

textarea:focus{
  background-color: blue;
}

first-child疑似クラス

セレクタの後に:first-childをつけると、 最初に当てはまる要素だけ
スタイルが適用されます。

p{
  color: blue;
}

p:first-child{
  color: green;
}

last-child疑似クラス

セレクタの後に:last-childをつけると、 最後に当てはまる要素だけ
スタイルが適用されます。

p{
  color: blue;
}

p:last-child{
  color: green;
}

nth-child疑似クラス

セレクタの後に:nth-child(n)をつけることで、
最初から数えて「n番目」に当たる子要素 にスタイルが適用されます。
偶数や奇数を指定して交互に色を変更する事もできます。

/* 3番目の li タグを赤くする */
ul li:nth-child(3){
  color: red;
}

まとめ

セレクタはかなりたくさんあり
スタイルをきちんと適応させるには押さえておく必要があります。
頑張って覚えておきましょう。

君がエンジニアになるまであと85日

作者の情報

乙pyのHP：
http://www.otupy.net/

Youtube：
https://www.youtube.com/channel/UCaT7xpeq8n1G_HcJKKSOXMw

Twitter：
https://twitter.com/otupython

先日、フォントサイズが10px以下になるサイトのコーディングを(無理やり)行ったので、その時の対処を書いておきます。

着手後まもなく私の手を離れたので、下記の対応に不足があったのかどうかも今となっては謎ですが、とりあえず残しておきます。

対応方法に不足があるかもしれませんので、その際は優しくアドバイスをいただけますと幸いです。

10px以下のフォントは表示に難あり

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .size10 {
      font-size: 10px;
    }
    .size8 {
      font-size: 8px;
    }
    .size6 {
      font-size: 6px;
    }
    .size4 {
      font-size: 4px;
    }
  </style>
</head>
<body>
  <p class="size10">
    やけに小さいフォント。<br>
    やけに小さいフォント。
  </p>
  <p class="size8">
    やけに小さいフォント。<br>
    やけに小さいフォント。
  </p>
  <p class="size6">
    やけに小さいフォント。<br>
    やけに小さいフォント。
  </p>
  <p class="size4">
    やけに小さいフォント。<br>
    やけに小さいフォント。
  </p>
</body>
</html>

フォントサイズを10px以下にするとこうなる。

左がChrome、右がIEとなっています。

Chromeだと10px以下のフォントを設定しても、すべて10pxで表示されてしまいます。

無理やり対応した

この案件では、Chromeでの表示をデザインカンプにピクセル単位で合わせる必要がありました。

なんとしても、10px以下の小さな文字をChromeで表示できるようにしなくては。

Chromeで10px以下のフォントを実現する方法として、CSSで Scale を指定するのが一般的なようです。

p {
  transform: scale(0.8);
}

デザインを途中で修正することも許されなかったので、下記のように

• chromeで表示するときははscaleで縮小する
• それ以外はそのままのフォントサイズで表示する

という風に対応しました。

こんな感じです。

index.html

  <p class="size10">
    やけに小さいフォント。<br>
    やけに小さいフォント。
  </p>
  <p class="size8">
    やけに小さいフォント。<br>
    やけに小さいフォント。
  </p>
  <p class="size6">
    やけに小さいフォント。<br>
    やけに小さいフォント。
  </p>
  <p class="size4">
    やけに小さいフォント。<br>
    やけに小さいフォント。
  </p>

index.js

    function scale() {
      const userAgent = window.navigator.userAgent
      if (userAgent.indexOf('Chrome') != -1) {
        $(".size8").each(function () {
          $(this).css('transform', 'scale(0.8)')
        })
        $(".size6").each(function () {
          $(this).css('transform', 'scale(0.6)')
        })
        $(".size4").each(function () {
          $(this).css('transform', 'scale(0.4)')
        })
      }
    }
    $(window).on('load', function () {
      scale()
    });

表示はこんな感じ。

ちょっとおしゃれなレイアウトになっていますが、一応縮小は出来ています。
IEでも表示は問題なさそう。

単純に要素全体を縮小しているので、マージンや横幅などももろもろ小さくなってしまいますが、まぁ良いでしょう。

結論：10px以下のフォントは読みずらいし美しくない

いくら対応できたといっても、やっぱり10px以下のフォントは(ネタサイトでもない限り)良くない！

以上！

【やったこと】
　①Webサイト『ほんっとにはじめての HTML5 と CSS3』の記事『【11-2】marginの auto という値の「？」を解決しておこう』を学習

【わかったこと】
　- margin: auto; で左右を中央に配置できる。ただしwidthの指定が必要
　- 左右のいずれかに(例 margin:1em 1em 1em auto;)具体値がある場合は自動計算する
　- 左右に同じ値をいれることで同様に中央に配置できる
　- 上下は中央に配置できない
　- 上下にautoを設定すると0になる

【補足】
　項目『縦方向のセンター合わせは display:table-cell で』については未学習です

この記事は https://css-tricks.com/getting-javascript-to-talk-to-css-and-sass/ の翻訳記事となります。
(2020/4/3 寄稿記事)

JavaScriptとCSSは20年以上にわたって依存し合っているわけですが、いまだ相互のデータのやりとりには大変な苦労があります。

もちろん、これまでも数多くのアプローチが紹介されていますが、ここではシンプルかつ直感的なアプローチを紹介したいと思います。
ここで言うシンプルかつ直感的と言うのは、構造を変えての試みということではなく、CSSカスタムプロパティやSass変数の利用について述べることにします。

CSSカスタムプロパティとJavaScript

カスタムプロパティというものはそうたいそうなものではありません。ブラウザーのサポートが開始されてから、JavaScriptからその値を操作することが可能になりました。

カスタムプロパティをJavaScriptで利用する方法にはいくつかありますが、 setProperty を利用する方法が挙げられます。

document.documentElement.style.setProperty("--padding", 124 + "px"); // 124px

CSS変数を抽出するには、 getComputedStyle を使います。このロジックの背景はいたってシンプルです。カスタムプロパティはスタイルの一部ですので、算出スタイル (computed style) の一部でもあると言えるのです。

getComputedStyle(document.documentElement).getPropertyValue('--padding') // 124px

同様に getPropertyValue がありますが、これによりHTML上のインラインスタイルの値を抽出することができます。

document.documentElement.style.getPropertyValue("--padding'"); // 124px

カスタムプロパティはスコープ定義となるので、特定の要素から算出スタイル (computed style) を取得する必要があります。
ここでは、前述の setProperty を使って :root に変数を定義しているので値を得ることができています。

Sass変数をJavaScriptで利用する

Sassは事前処理(pre-processing)言語ですので、ウェブサイトの一部として機能するには事前にCSSへの変換が行われます。
そのため、CSSカスタムプロパティと同じようにJavaScriptからアクセスすることはできません。CSSカスタムプロパティは算出スタイル (computed style) としてDOM上でアクセスが可能だからです。

これを変えるためにbuildプロセスを変更する必要があります。とはいえ、多くの場合loaderがbuildプロセスをになってくれるのでそう大きな変更は必要ないと思います。しかし、そうではないプロジェクトの場合は、Sassモジュールのインポート (import) と翻訳 (tranlating) を行う3つのモジュールを利用して以下のように webpack の設定を行います。

module.exports = {
 // ...
 module: {
  rules: [
   {
    test: /\.scss$/,
    use: ["style-loader", "css-loader", "sass-loader"]
   },
   // ...
  ]
 }
};

To make Sass (or, specifically, SCSS in this case) variables available to JavaScript, we need to “export” them.
Sass変数（今回は SCSS）をJavaScriptで利用するには :export する必要があります。

// variables.scss
$primary-color: #fe4e5e;
$background-color: #fefefe;
$padding: 124px;

:export {
  primaryColor: $primary-color;
  backgroundColor: $background-color;
  padding: $padding;
}

この :export はwebpackが変数をimportするための魔法です。何が良いかというと、変数名を変えることができる (camelCase) ことと、利用する変数を選別できることです。

次にこのSassファイル (variables.scss) をJavaScriptでimportします。これで、変数へのアクセスが可能となります。

import variables from './variables.scss';

/*
 {
  primaryColor: "#fe4e5e"
  backgroundColor: "#fefefe"
  padding: "124px"
 }
*/

document.getElementById("app").style.padding = variables.padding;

ただ、この :export にはいくつかの制約があるので述べておいた方が良いと思います。

It must be at the top level but can be anywhere in the file.
- Topレベル階層に位置する必要があるが、ファイル内のどこで定義しても良い
- 同一ファイル内、複数箇所で定義されている場合、キー (key) と値 (value) は結合され一緒にexportされる
- キーの重複がある場合、後続のキーの値が優先される
- 値にはCSSで有効な任意の文字が利用できる（スペースも可）
- 値には引用符(' ")は不要（リテラル文字列として扱われるため）

JavaScriptからSass変数にアクセスすることが有用であるケースは多くありますが、筆者の場合、breakpoint を共有するために利用することがよくあります。
以下の breakpoints.scss をJavaScriptでimportし、 matchMedia() で一貫した breakpoint の利用を可能としています。

// Sass variables that define breakpoint values
$breakpoints: (
  mobile: 375px,
  tablet: 768px,
  // etc.
);

// Sass variables for writing out media queries
$media: (
  mobile: '(max-width: #{map-get($breakpoints, mobile)})',
  tablet: '(max-width: #{map-get($breakpoints, tablet)})',
  // etc.
);

// The export module that makes Sass variables accessible in JavaScript
:export {
  breakpointMobile: unquote(map-get($media, mobile));
  breakpointTablet: unquote(map-get($media, tablet));
  // etc.
}

もう一つのアプローチとしてアニメーションがあります。 アニメーションで利用する duration は通常CSSSで保持されますが、複雑なアニメーションになるとJavaScriptが必要となります。

// animation.scss
$global-animation-duration: 300ms;
$global-animation-easing: ease-in-out;

:export {
  animationDuration: strip-unit($global-animation-duration);
  animationEasing: $global-animation-easing;
}

変数 export に　strip-unit() を利用していますが、これはJavaScript側でのparse処理を容易にするためです。

---

CSS、SassとJavaScriptでのデータのやりとりが簡単にできることは嬉しいことで、このような変数の共有はコードをシンプルかつ無駄のないもの(原文にはDRYとあります)にしてくれます。

もちろん、他にもこれを実現するアプローチはあります。Les James氏は2017に興味深いアプローチを紹介しています。彼が紹介しているのは、JSONを利用したデータの共有です。ただ、偏った見方になるかもしれませんが、この記事で紹介したアプローチが最もシンプルで直感的であると思います。すでに運用しているCSSやJavaScriptへの面倒な変更は不要です。

他にもアプローチがあれば、ぜひコメントください。どう解決しているのかを知りたいです！

【やったこと】
　①下記の記事を参考に学習
　　CSSのposition: absoluteとrelativeとは
　②上記で子要素にあたるえる影響が疑問になったなため別途調査を実施

【わかったこと】
　- absoluteとrelativeの基準位置の違い
　- 後続の要素位置に与える影響の違い
　- 親要素にposition: absoluteまたはrelativeを指定すると親要素を基準とした位置となること

※詳細は下記ブログに記述
【第2回】CSSの position: absoluteとrelativeのについてWebサイトの記事を参考にやってみた

100日チャレンジの280日目

twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。
すでに100日超えましたが、継続。
100日チャレンジは、ぱぺまぺの中ではプログラミングに限らず継続学習のために使っています。
280日目は、

おはようございます
280日目　2.5h
・xdデザインカンプからのサイト模写
・メンターさんからの修正をやる
・ヘッダーの上部とフッターの下部の謎隙間解決に手間取る#早起きチャレンジ#駆け出しエンジニアと繋がりたい#100DaysOfCode

— ぱぺまぺ@webエンジニアを目指したい社畜 (@yudapinokio) April 3, 2020

はじめに

CSSのflexを使う時に様々なオプションが出てきますよね。
その中で名前が似ているタイトルのプロパティについて少し検証したので書きました。

タイトルの違いについて調べた理由はplace-itemsというalign-itemsおよびjustify-itemsを一括で設定できるプロパティを知って、中央寄せしようとした時にうまく行かなかったからです。

結論から

justify系は主軸
align系は交差軸

◯◯-content系は余白間隔
◯◯-items系はアイテムの配置

です。

justify-content
justify-items
align-content
align-items

解説

MDN Web docsを見ると詳しく書いてあります。この記事では自分なりに解説をします。

主軸・交差軸とは

フレックスボックスはデフォルトの場合、横方向に要素が追加されていくと思います。その方向が主軸です。
そして、逆方向である縦方向が交差軸です。

flex-direction: column;などで向きを変えれば、逆になります。

flex-direction
Cross_Axis

alignプロパティを試してみた

content系は余白の間隔と言いました。中央寄せする場合を見てみます。

wrapなしalign

align-contentでは中央寄せされないのは、仕様です。
https://developer.mozilla.org/ja/docs/Web/CSS/align-content

単一行のフレックスコンテナー (つまり、 flex-wrap: nowrap のもの) では、このプロパティは効果がありません。

flex-wrapがnowrapの場合、1行であるため交差軸の余白は存在しないからですかね。（この予想はかなり怪しいです）

flex-wrap	align

wrapありalign

flex-wrapがwrapの場合、どちらのプロパティも中央寄せされる。
しかし、中央の寄せ方がalign-contentとalign-itemsでは少々異なります。

flex-wrap	align

justify

alignとほとんど一緒です。
ただ、justify-itemsは、

フレックスボックスレイアウトでは、このプロパティは無視されます
みたいです。

See the Pen abOrydr by MyPoZi (@shigasy) on CodePen.

余談

place-itemsというalign-itemsおよびjustify-itemsを一括で設定できるプロパティがあるのですが、place-items: center;で中央寄せされなかった理由は、
justify-itemsがフレックスボックスレイアウトでは、無視されていたからみたいですね。
place-contentもあるのですが、単一行のフレックスコンテナー (つまり、 flex-wrap: nowrap のもの) では、このプロパティは効果がない仕様ですね。

まとめ

justify系は主軸
align系は交差軸

◯◯-content系は余白間隔
◯◯-items系はアイテムの配置

です。

flexで単純に中央寄せしたいなら

.hoge-class {
  align-items: center;
  justify-content: center;
}

などを使いましょう！

CodePen埋め込み殆ど出来てなくて申し訳ないです。