対象者 ・バックエンドエンジニアを志す人 ・web開発初学者 ・ECサイトを作成しようと思っている人 ・初学者の勉強仮定を見たい方 はじめに こんにちは！ この投稿はその⑤の続きです。 今週は別プロダクトの発表が週末にあります！ 前置きは短めに！目次です！ 目次 1.今回の作業報告 2.反省点 3.次回のステップ 1.今回の作業報告 画像を使ってざっくり報告 ◯商品の表示機能 商品一覧(全部)と男性向け商品と女性向け商品を一覧で表示させる仕様で実装しています。 男性向け商品一覧 女性向け商品一覧 DBに男性向けと女性向けの識別するカラムをテーブルに入れて判定させました。 ◯注文確認機能 カートの商品を送る情報を入力 ご注文確認画面へ。 カートの情報と送信先が表示されるようにしています。 その他、ユーザー毎のログイン機能など他にも実装しましたが割愛します。 2.反省点 実装の仕様がちゃんと決まっていないために大幅に時間が取られてしまいました。 数量が増えたときどうするかなどの仕様はあらかじめ決める必要がありそうです。 テーブル結合などもうちょっと踏み込んで実装できれば色々表現できる幅が広がりそうです。 3.次のステップ カート内の商品計算とかその他もろもろを引き続き実装していきます。 簡単ですが今回は以上です。
・バックエンドエンジニアを志す人 ・web開発初学者 ・ECサイトを作成しようと思っている人 ・初学者の勉強仮定を見たい方
こんにちは！ この投稿はその⑤の続きです。
今週は別プロダクトの発表が週末にあります！ 前置きは短めに！目次です！
1.今回の作業報告 2.反省点 3.次回のステップ
画像を使ってざっくり報告
◯商品の表示機能 商品一覧(全部)と男性向け商品と女性向け商品を一覧で表示させる仕様で実装しています。
男性向け商品一覧
女性向け商品一覧
DBに男性向けと女性向けの識別するカラムをテーブルに入れて判定させました。
◯注文確認機能 カートの商品を送る情報を入力
ご注文確認画面へ。 カートの情報と送信先が表示されるようにしています。
その他、ユーザー毎のログイン機能など他にも実装しましたが割愛します。 2.反省点 実装の仕様がちゃんと決まっていないために大幅に時間が取られてしまいました。 数量が増えたときどうするかなどの仕様はあらかじめ決める必要がありそうです。 テーブル結合などもうちょっと踏み込んで実装できれば色々表現できる幅が広がりそうです。
3.次のステップ カート内の商品計算とかその他もろもろを引き続き実装していきます。
簡単ですが今回は以上です。
Wordpressを使ってエンジニアポートフォリオを作成 以下のサイトからテーマを取得 https://webdesign-trends.net/entry/11500 DEMOサイト https://demos.pixelgrade.com/noah-lite/about/ Topページの作成 SmartSlider3 メニューバー Slider 問い合わせフォームを作成 https://www.xserver.ne.jp/blog/contact-form/ 多言語対応 https://ja.wordpress.org/plugins/weglot/?gclid=CjwKCAiAo5qABhBdEiwAOtGmbhv7AwSPbXWsVbRTu9C0Jth2fIqxddAQRHou0x1n1e8jg_Knzfye-BoCsBkQAvD_BwE SEO対策 ポートフォリオでは特にSEO対策する予定はないが 今後ブログ作成など行うので書く予定 まとめ 作成完了したらまたいろいろ書く
以下のサイトからテーマを取得 https://webdesign-trends.net/entry/11500 DEMOサイト https://demos.pixelgrade.com/noah-lite/about/
SmartSlider3
https://www.xserver.ne.jp/blog/contact-form/
https://ja.wordpress.org/plugins/weglot/?gclid=CjwKCAiAo5qABhBdEiwAOtGmbhv7AwSPbXWsVbRTu9C0Jth2fIqxddAQRHou0x1n1e8jg_Knzfye-BoCsBkQAvD_BwE
ポートフォリオでは特にSEO対策する予定はないが 今後ブログ作成など行うので書く予定
作成完了したらまたいろいろ書く
困ったこと 改行が含まれている文章がそのまま表示されない。。（改行が空白になる。） <div> {{content)}} </div> 今日はピクニック。 楽しいな スタイルを当てよう test.html <div class="content"> {{content)}} </div> test.css .content { white-space: pre-wrap; // 要素内のホワイトスペースをどのように扱うか。今回は変更させない。 word-wrap: break-word; // 日本語の単語をどう扱うか。今回は改行させる。 } 今日はピクニック。 楽しいな できた
改行が含まれている文章がそのまま表示されない。。（改行が空白になる。）
<div> {{content)}} </div>
今日はピクニック。 楽しいな
<div class="content"> {{content)}} </div>
.content { white-space: pre-wrap; // 要素内のホワイトスペースをどのように扱うか。今回は変更させない。 word-wrap: break-word; // 日本語の単語をどう扱うか。今回は改行させる。 }
できた
Material Icons Guide とは？ Googleが提供しているアイコンフォントです。 アイコンは無料で使用できます。 Material Icons Guideの使い方 HTMLのヘッダー内（head要素内）に下記のコードを入れます。 <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> 次に公式サイトから使いたいアイコンをクリックして選択します。 Material Icons Guide 公式サイト 左下の Selected Icon ボタンをクリックすると以下のようなコードが表示されるので、コードをコピーしてHTMLの表示したいところに貼り付けます。 （アイコンのクラス名は全て同じなので、 favorite の部分でどのアイコンが表示されるかが決まります。） <span class="material-icons"> favorite </span> 選択したアイコンが表示されれば成功です。 Material Iconsはアイコンフォントなので、CSSで色やサイズを変更することができます。
Googleが提供しているアイコンフォントです。 アイコンは無料で使用できます。
HTMLのヘッダー内（head要素内）に下記のコードを入れます。
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
次に公式サイトから使いたいアイコンをクリックして選択します。 Material Icons Guide 公式サイト
左下の Selected Icon ボタンをクリックすると以下のようなコードが表示されるので、コードをコピーしてHTMLの表示したいところに貼り付けます。 （アイコンのクラス名は全て同じなので、 favorite の部分でどのアイコンが表示されるかが決まります。）
Selected Icon
favorite
<span class="material-icons"> favorite </span>
選択したアイコンが表示されれば成功です。 Material Iconsはアイコンフォントなので、CSSで色やサイズを変更することができます。
jqueryでincludeしようとしたら怒られた 開発中のアプリのモックを作っている時にjqueryのload()でincludeしようとしたらこんなエラーを吐いてしまい、上手いことできない。 Access to XMLHttpRequest at 'file:///C:/"ファイルへのパス"/include.html' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, chrome-untrusted, https. このエラー、どうやらCORSというものに関係したエラーらしい。 ちなみにフロントの人たちは結構な頻度で遭遇するのだそう。 初めて知った。。 解決策 解決策としては、ローカルサーバーを立ち上げてそこで処理してもらうとか、ブラウザを変えるというのが常套手段らしいのだけど、どうにも面倒くさいなーと思いつつ解決策を探していたら、ChromeにCORSエラーを無視させる方法を見つけた。 結論、Chrome起動時のオプションに以下を入れてやると出来る。 --disable-web-security --user-data-dir="C:\Chrome dev session" ショートカットを作ってプロパティを開く Chromeへのショートカットを作り、アイコンを右クリックしてプロパティを開く。 リンク先の末尾にオプションを突っ込む リンク先の入力ボックス内リンク末尾に上記の--disable-web-security --user-data-dir="C:\Chrome dev session"を追加してOK あとはこのショートカットでChromeを起動して、見たいhtmlファイルをドラッグ&ドロップしてやればCORSエラーが沈黙しているのを確認できる。 決しておすすめしない ここまで紹介してなんですが、つまりは敢えてセキュリティレベルを下げる方法なわけで決しておすすめはしない。 今回、私は単なるモック作りのため一切のネットワークに繋がっていない状態で行ったが、例えば開発現場で多用して何か問題が起きても私は一切責任を負えない。 結局のところサーバー立てるのが一番無難だと思います。 そもそもjqueryだけでincludeするなんてことがほぼ無いだろうし。 ただ、前の開発で誰かが普通に作れてたんだよなぁ。今度聞いてみよう。
開発中のアプリのモックを作っている時にjqueryのload()でincludeしようとしたらこんなエラーを吐いてしまい、上手いことできない。
Access to XMLHttpRequest at 'file:///C:/"ファイルへのパス"/include.html' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, chrome-untrusted, https.
このエラー、どうやらCORSというものに関係したエラーらしい。 ちなみにフロントの人たちは結構な頻度で遭遇するのだそう。
初めて知った。。
解決策としては、ローカルサーバーを立ち上げてそこで処理してもらうとか、ブラウザを変えるというのが常套手段らしいのだけど、どうにも面倒くさいなーと思いつつ解決策を探していたら、ChromeにCORSエラーを無視させる方法を見つけた。 結論、Chrome起動時のオプションに以下を入れてやると出来る。
--disable-web-security --user-data-dir="C:\Chrome dev session"
Chromeへのショートカットを作り、アイコンを右クリックしてプロパティを開く。
リンク先の入力ボックス内リンク末尾に上記の--disable-web-security --user-data-dir="C:\Chrome dev session"を追加してOK
あとはこのショートカットでChromeを起動して、見たいhtmlファイルをドラッグ&ドロップしてやればCORSエラーが沈黙しているのを確認できる。
ここまで紹介してなんですが、つまりは敢えてセキュリティレベルを下げる方法なわけで決しておすすめはしない。 今回、私は単なるモック作りのため一切のネットワークに繋がっていない状態で行ったが、例えば開発現場で多用して何か問題が起きても私は一切責任を負えない。
結局のところサーバー立てるのが一番無難だと思います。 そもそもjqueryだけでincludeするなんてことがほぼ無いだろうし。
ただ、前の開発で誰かが普通に作れてたんだよなぁ。今度聞いてみよう。
ChromeとFirefoxの最新版で確認済。仕様通りの挙動なのだろうか。 <input name="input1" /> <input name="input2" /> document.querySelectorAll('input').forEach((input) => { input.addEventListener('focus', (e) => { console.log(`Focus: ${e.target.name}`); setTimeout(() => { console.log(`Focus async: ${e.target.name}`); }, 0); }); input.addEventListener('blur', (e) => { console.log(`Blur: ${e.target.name}`); setTimeout(() => { console.log(`Blur async: ${e.target.name}`); }, 0); }) }) input1からinput2にフォーカスを移したときのコンソール出力は Blur: input1 Focus: input2 Blur async: input1 Focus async: input2 となっていた。 サンプル https://plnkr.co/edit/315T56FzA9MzQArg?open=lib%2Fscript.js
ChromeとFirefoxの最新版で確認済。仕様通りの挙動なのだろうか。
<input name="input1" /> <input name="input2" />
document.querySelectorAll('input').forEach((input) => { input.addEventListener('focus', (e) => { console.log(`Focus: ${e.target.name}`); setTimeout(() => { console.log(`Focus async: ${e.target.name}`); }, 0); }); input.addEventListener('blur', (e) => { console.log(`Blur: ${e.target.name}`); setTimeout(() => { console.log(`Blur async: ${e.target.name}`); }, 0); }) })
input1からinput2にフォーカスを移したときのコンソール出力は
Blur: input1 Focus: input2 Blur async: input1 Focus async: input2
となっていた。
https://plnkr.co/edit/315T56FzA9MzQArg?open=lib%2Fscript.js
【この記事に書いてあること】 プログラミング学習7,8日目⏩Web制作コース 初級編DAY7?学習時間:2時間⏳学習内容:ゼロからサイトを作る③（レスポンシブ対応）✏学び?・画像の上に文字を載せるには「background-image」を使う・ レスポンシブ対応コードは、「@media only screen and (max-width:767px)」#デイトラ pic.twitter.com/ZUaovilfBc— ふりっく?トリプルゼロの（これから）Webマーケター (@FuRiC_twi) January 19, 2021 【学習内容】 「ゼロからサイトを作る」「レスポンシブに対応させる」 【学習時間】 2時間 【学び】 1 画像の上に文字を載せるには、background-imageを使いその上に<p>`で文字を書く style.css background-image: url(../img/main-vsual-nontitle.png); index.html <p class="top-title"> 1日1題30日で<br> プロのWebエンジニアになろう！ </p> <p class="top-subtitle"> 毎日設定された課題をこなすだけ！<br> 未経験から30日でプログラミングスキルをつけよう </p> ↓ 2 レスポンシブ対応 コード style.css @media only screen and (max-width:767px) { この中にレスポンシブ用のCSSを記述していく！ } 3 なぜ、max-width:767pxなのか → 一番出回っているタブレットのipadのサイズが768px 一般的なPCのサイズは1200pxで768~1200pxはPCと同じ表示を出して 767px以下（スマホ）からはレスポンシブに対応させるから
プログラミング学習7,8日目⏩Web制作コース 初級編DAY7?学習時間:2時間⏳学習内容:ゼロからサイトを作る③（レスポンシブ対応）✏学び?・画像の上に文字を載せるには「background-image」を使う・ レスポンシブ対応コードは、「@media only screen and (max-width:767px)」#デイトラ pic.twitter.com/ZUaovilfBc— ふりっく?トリプルゼロの（これから）Webマーケター (@FuRiC_twi) January 19, 2021
プログラミング学習7,8日目⏩Web制作コース 初級編DAY7?学習時間:2時間⏳学習内容:ゼロからサイトを作る③（レスポンシブ対応）✏学び?・画像の上に文字を載せるには「background-image」を使う・ レスポンシブ対応コードは、「@media only screen and (max-width:767px)」#デイトラ pic.twitter.com/ZUaovilfBc
「ゼロからサイトを作る」「レスポンシブに対応させる」
2時間
1 画像の上に文字を載せるには、background-imageを使いその上に<p>`で文字を書く
background-image
<p>
background-image: url(../img/main-vsual-nontitle.png);
<p class="top-title"> 1日1題30日で<br> プロのWebエンジニアになろう！ </p> <p class="top-subtitle"> 毎日設定された課題をこなすだけ！<br> 未経験から30日でプログラミングスキルをつけよう </p>
↓
2 レスポンシブ対応 コード
@media only screen and (max-width:767px) { この中にレスポンシブ用のCSSを記述していく！ }
3 なぜ、max-width:767pxなのか → 一番出回っているタブレットのipadのサイズが768px 一般的なPCのサイズは1200pxで768~1200pxはPCと同じ表示を出して 767px以下（スマホ）からはレスポンシブに対応させるから
max-width:767px
はじめに こちらは、エンジニアの新たな学びキャンペーンに向けた記事となります。 ざっくり理解するHTML5・CSS3 ｜ HTML5とCSS3を使って、お店のホームページ（HP）を作ってみよう！を含む、いくつかのコンテンツを参考にしながら、 ブロックレベルとインライン要素の違いについて、学習したことを記事にします。 今回、問題になったこと 次の画像で示すような、まるで蛍光マーカーを引いたかのようなデザインの見出しを作成しようとしました。 しかし私が書いたHTMLとCSSでは、そうはいきませんでした。 テキスト部分だけ強調されるはず！という想定とは異なり、 次のように、横全体へと蛍光マーカーが飛び出てしまっていました。 こちらの問題を解決した様子を下記に示します。 実行環境 Google Chrome 87.0.4280.141 解決への道のり 結論から述べると、ブロックレベルとインライン要素に対する理解が浅いために、 意図しない挙動が発生しました。 ブロックレベルとインライン要素を考える ブロックレベルとは 一行全て（横幅いっぱい）のボックになるので、その後の要素は横並びにはできない。 ブロックレベル要素の中にブロックレベル要素を入れられる。 ざっくり理解するHTML5・CSS3 ｜ HTML5とCSS3を使って、お店のホームページ（HP）を作ってみよう！ インライン要素とは 基本、文字の装飾などで使われる要素。文字幅分のボックスになるので、横並びにすることができる。 インライン要素の中にブロックレベル要素は入れられない。 ざっくり理解するHTML5・CSS3 ｜ HTML5とCSS3を使って、お店のホームページ（HP）を作ってみよう！ 実行していたソースコードと原因の特定 まずは実行していたソースコードの一部を示します。 index.html <h1> <div class="lightup"> アイデアブック（仮） <div/> </h1> main.css h1 { text-align: center; margin: 0; padding: 10px; } .lightup { background: linear-gradient(transparent 60%, yellow 40%); } 『ブロックレベルは一行すべて』、『インライン要素は文字幅ぶんのボックスになる』とのことなので、 今回使われている要素はどちらにあたるのか調べてみます。 ブロックレベル：h1, div インライン要素：なし 従ってインライン要素がないために、このテキストは"一行すべて"というブロックレベルでの実装となり、 横全体にマーカーが引かれてしまうのは当然の結果でした。 従って、テキストをインライン要素に変更する方法を考えます。 CSS適用の優先順位を考えながら改善する テキストに紐付けられている要素やクラス（h1, div, lightup）のすべてに、 インライン要素を付与(display: inline;)すれば、とりあえず解決しそうな気もします。 しかし、要素やクラスを使い回すことを想定すると、実用的ではありません。 従って、1つだけインライン要素を付与するだけで済むように、CSSの適用優先順位を調べます。 セレクタの種類によって優先順位が決定づけられるようなのですが、 今回はh1、divという要素セレクタに加え、lightupというクラスセレクタがあります。 次の引用から、クラスに対してインライン要素を適用すれば良いことがわかります。 CSSの適用優先度の考え方 そこで、lightupクラスにインライン要素を付与しました。 次がソースコードと、その実行結果です。 main.css h1 { text-align: center; margin: 0; padding: 10px; } .lightup { background: linear-gradient(transparent 60%, yellow 40%); display:inline } テキスト部分だけ蛍光マーカーで引いたようなデザインにしたい！という意図が反映できました！ 参考 ざっくり理解するHTML5・CSS3 ｜ HTML5とCSS3を使って、お店のホームページ（HP）を作ってみよう！ HTMLクイックリファレンス CSSマーカー線（蛍光ペン風）の解説【４２色のサンプル付き】 | カゲサイ
こちらは、エンジニアの新たな学びキャンペーンに向けた記事となります。
ざっくり理解するHTML5・CSS3 ｜ HTML5とCSS3を使って、お店のホームページ（HP）を作ってみよう！を含む、いくつかのコンテンツを参考にしながら、 ブロックレベルとインライン要素の違いについて、学習したことを記事にします。
次の画像で示すような、まるで蛍光マーカーを引いたかのようなデザインの見出しを作成しようとしました。
しかし私が書いたHTMLとCSSでは、そうはいきませんでした。 テキスト部分だけ強調されるはず！という想定とは異なり、 次のように、横全体へと蛍光マーカーが飛び出てしまっていました。
こちらの問題を解決した様子を下記に示します。
結論から述べると、ブロックレベルとインライン要素に対する理解が浅いために、 意図しない挙動が発生しました。
一行全て（横幅いっぱい）のボックになるので、その後の要素は横並びにはできない。 ブロックレベル要素の中にブロックレベル要素を入れられる。 ざっくり理解するHTML5・CSS3 ｜ HTML5とCSS3を使って、お店のホームページ（HP）を作ってみよう！
一行全て（横幅いっぱい）のボックになるので、その後の要素は横並びにはできない。 ブロックレベル要素の中にブロックレベル要素を入れられる。
ざっくり理解するHTML5・CSS3 ｜ HTML5とCSS3を使って、お店のホームページ（HP）を作ってみよう！
基本、文字の装飾などで使われる要素。文字幅分のボックスになるので、横並びにすることができる。 インライン要素の中にブロックレベル要素は入れられない。 ざっくり理解するHTML5・CSS3 ｜ HTML5とCSS3を使って、お店のホームページ（HP）を作ってみよう！
基本、文字の装飾などで使われる要素。文字幅分のボックスになるので、横並びにすることができる。 インライン要素の中にブロックレベル要素は入れられない。
まずは実行していたソースコードの一部を示します。
<h1> <div class="lightup"> アイデアブック（仮） <div/> </h1>
h1 { text-align: center; margin: 0; padding: 10px; } .lightup { background: linear-gradient(transparent 60%, yellow 40%); }
『ブロックレベルは一行すべて』、『インライン要素は文字幅ぶんのボックスになる』とのことなので、 今回使われている要素はどちらにあたるのか調べてみます。
ブロックレベル：h1, div インライン要素：なし
従ってインライン要素がないために、このテキストは"一行すべて"というブロックレベルでの実装となり、 横全体にマーカーが引かれてしまうのは当然の結果でした。
従って、テキストをインライン要素に変更する方法を考えます。
テキストに紐付けられている要素やクラス（h1, div, lightup）のすべてに、 インライン要素を付与(display: inline;)すれば、とりあえず解決しそうな気もします。 しかし、要素やクラスを使い回すことを想定すると、実用的ではありません。
h1
div
lightup
display: inline;
従って、1つだけインライン要素を付与するだけで済むように、CSSの適用優先順位を調べます。
セレクタの種類によって優先順位が決定づけられるようなのですが、 今回はh1、divという要素セレクタに加え、lightupというクラスセレクタがあります。 次の引用から、クラスに対してインライン要素を適用すれば良いことがわかります。
CSSの適用優先度の考え方
そこで、lightupクラスにインライン要素を付与しました。 次がソースコードと、その実行結果です。
h1 { text-align: center; margin: 0; padding: 10px; } .lightup { background: linear-gradient(transparent 60%, yellow 40%); display:inline }
テキスト部分だけ蛍光マーカーで引いたようなデザインにしたい！という意図が反映できました！
