- 1. 【Shopify】ストアのテキストを日本語フォントに編集したい！liquidファイルを編集して全てのテキストを変更してみた
- 2. お問い合わせフォームのlabelタグ 基本的なマークアップ方法
- 3. CSSだけでブロック塀を作る
- 4. 今時のフロントエンドエンジニアに見て欲しい保守性の高いHTML/CSSの書き方
- 5. [CSS]フォントの太さを指定する
- 6. 2日目
- 7. 駆け出しエンジニア の学習記録 4日目 HTML/CSS
- 8. 【初心者でもわかる】width: auto;とwidth: 100%;の違い
- 9. JSのお仕事 (JSアウトプット2)
- 10. たった一行でできる深層Webの作り方
- 11. canvasの文字がぼやける・にじむ 他【HTML5】
- 12. なぜJSが必要なのか？ (JS学習アウトプット)
- 13. 【備忘録】htmlのselectで特定のものを選んだときに追加項目を出し、かつ必須項目に設定する
- 14. jQueryに匹敵するフレームワークを作ってやりたいので、中身を作ります。
- 15. 30代からのプログラミング勉強 5日目（HTML/CSS入門編）
- 16. 「初心者向け」JavaScriptで簡単なくじ引きシステムを作る
- 17. 非テキストボックスの要素をJavaScriptでテキストボックス化する
- 18. ウェブアクセシビリティの基礎
- 19. jQueryに匹敵するフレームワークを作ってやる (それはさすがに無理)
- 20. 【HTML/CSS】開発環境構築 VSCode
【Shopify】ストアのテキストを日本語フォントに編集したい！liquidファイルを編集して全てのテキストを変更してみた
#概要
Shopifyは、カナダ発のECプラットフォームサービスで最近日本でも盛り上がっています。しかし、海外発のサービスであるがゆえに、日本語でのサポートが完全ではありません。ストアのフォントもその一つで、現状（2020/12/02時点）では日本語フォントに対応していません。そのため、日本語のフォントを整えたい場合は、liquidファイルに書かれているコードをいじらないといけないという状況です。
フォントの編集方法はいくつか方法がありますが、今回はサイト内の全てのフォントを変更する方法を紹介していきます。
#フォントの編集方針
今回は、すでに制作しているデモサイトを例に進めていきます。
使用テーマは「**Debut**」です。なお、Shopifyのコードは、テーマによって中身が異なります。
大まかなファイル構造は、同じなので今回紹介する方法を流用することは可能です。とその項目を関連づけるためのタグになります。
項目とタグを関連づけておくことでユーザビリティやアクセスビリティの向上につながります。
labelタグを関連づけるためには2通りの方法があり、フォームタグをlabelタグで囲む方法と
labelタグのfor属性を使用する方法です。
これで、ラベルテキストをクリックすると
関連するフォーム部分が選択され、入力可能になります。ラジオボタンやチェックボックスであれば、ラベルテキストをクリックして
「チェックを入れる/外す」の動作を行う事ができます。選択範囲が広がるので、フォームが入力しやすくユーザビリティの向上
CSSだけでブロック塀を作る
# どうも7noteです。ブロック塀をCSSだけで作る方法
**完成例**
**複数色パターン**
## 単色のブロック塀
“`index.html
“`
“`style.css
ul {
overflow: hidden; /* はみ出た部
今時のフロントエンドエンジニアに見て欲しい保守性の高いHTML/CSSの書き方
これは[POLプロダクト部 Advent Calendar 2020](https://qiita.com/advent-calendar/2020/pol) 2日目の記事です。
昨日の[@mizno](https://qiita.com/mizno)さんからバトンを頂きました。柳沢です。
POLではフリーランスとして主にフロントエンドの領域を担当しております。最近のフロントエンドのやること多いですよね。
TypeScriptで型定義して、React書いてーredux書いたと思ったら、非同期の部分でthunk使わなあかんくてそれも書いて
API通信してーとか、
BFFとかやり出したら、ほんまにやることが多いです。なのでどうしてもHTML/CSSの比重って下がりがちになってきます。
それにReactなどでコンポーンネント分割してたりすると、以前ほどCSSを設計する必要もなくなってきてます。だからと言って、あまりに考え無しに書いてると、メンテナンスの段階において結構面倒くさい事になることが多いです。
なので最低限これぐらいは気をつけてもらえると、メンテナンスコストも下がるぜ
[CSS]フォントの太さを指定する
#[CSS] 見出しタグのフォントの太さを指定する
###見出しタグとは
\
~\
のことです。
\~\
のHとはHeadingの略です。
見出しという意味です。###見出しタグの太さ
\
~\
は初期状態でfont-weight: bold;になっています。
CSSでfont-weight: normal;と指定すると文字が標準の太さになります。
2日目
# 2日目やってみた
– 日中出たり入ったりが多々あったせいか、疲れてしまい1ページ（フォントカラーとサイズ）だけしか出来なかった
– 次は背景色変更とサイズの修正
– 個人的にはなんかHTMLらしくなってきたと思う
駆け出しエンジニア の学習記録 4日目 HTML/CSS
参考サイト↓
http://www.htmq.com/html/indexm.shtmlinsert mode 勝手に発動していた
css
class は .”class名”
id は #”id名”pタグの中のclassを指定するのは p.”class名”
h1,p 両方を指定
h1,”.class名” 両方を指定
div p divタグのpを指定
h2:hover 疑似クラスを使ったセレクタ 状態を指定している
padding 内側の余白
margin 外側の余白
padding:○px.○px.○px.○px.; 上から時計回りに指定できる
【初心者でもわかる】width: auto;とwidth: 100%;の違い
# どうも7noteです。分かっているようで難しいautoと100%の違い。
widthを指定する際、初期値でautoが入っています。
しかし、場合によっては100%を指定しなければならない場面もあります。特に初心者の方がごっちゃになりやすいと思うので、違いを分かりやすくまとめてみました。
## 違い① ブロック要素かインライン要素での違い
### ブロック要素の場合
– `width: auto;`
– 横幅 ＝ 親要素の幅いっぱい
– `width: 100%;`
– 横幅 ＝ 親要素の幅いっぱい### インライン要素の場合
– `width: auto;`
– 横幅 ＝ コンテンツ分
– `width: 100%;`
– 横幅 ＝ コンテンツ分**（widthは効かない）**### インラインブロック要素の場合
– `width: auto;`
– 横幅 ＝ コンテンツ分
– `width: 100%;`
– 横幅 ＝ 親要素の幅いっぱいまで広がる※コンテンツ分 = 文字なら文字数分、画像なら画像の横幅分が要素の幅になる。
## 違い②
JSのお仕事 (JSアウトプット2)
##あいさつ
初めての人は初めまして！知っている人はこんにちは！
中学生プログラマーのAtieです！
今回もJSを学んできたのでそのアウトプットをしていきます！
今回は第二回目ですがもし第一回の記事を読んでいなければそちらのほうから読んでいただくとわかりやすいと思います！[なぜJSが必要なのか？ (JS学習アウトプット)](https://qiita.com/Atie_web/items/6e1c19cbdbd9b51b59ca)
今回は「JSのお仕事」ということでJSのお仕事(役割)について学んできました！
それでは！##前回の復習
従来のweb
– レスポンスがhtml
– ページ全体がレンダリング現代のweb
– レスポンスがJSON
– 必要なところだけレンダリング
– リッチで使いやすい#JSのお仕事
JSのお仕事には主に二つあります
一つ目が
###データのやり取り
二つ目が
###DOM操作
です順に解説していきます
##データのやり取り
ではまずJSの一つ目のお仕事「データのやり取り」についてです
Twitterを例に解説していきますまずはTw
たった一行でできる深層Webの作り方
# はじめに
初投稿です。よろしくおねがいします。
突然ですが皆さんは**深層Web**という言葉を聞いたことがあるでしょうか。おそらく聞いたことのある人にとっては「やばいもの」、「常人には理解できない動画の溜まり場」という印象があると思いますが、一般的には__WorldWideWeb(WWW)にある情報のうち、通常の検索でヒットされることのないもの__のことを指します。要するに会員制のページとか社内ツールなんかもすべて深層Webということですね。
そんな深層Webですが、実は__HTMLにたった一行コードを追加するだけで簡単に作成することが可能__です。今回はその方法についていい感じに説明していこうと思います。
# その前にちょっと前ふり
深層Webの作り方について説明する前に、まずは検索エンジン(ここではGoogleを例とする)がどうやって情報を収集しているのかについて掘り下げて見ましょう。
一般的に検索エンジンはデータを収集する際、__クローラー__というプログラムを用いています。検索エンジンにおけるクローラーはWWWを巡回し、未知の情報を見つけたらそれをデータベースに登録、既知
canvasの文字がぼやける・にじむ 他【HTML5】
ハマったのでメモ。
# fillTextで書いた文字がにじむ
結論から言うと、[ここに書いてあること](https://developer.mozilla.org/ja/docs/Web/API/Window/devicePixelRatio)をやればいい。windowsなのでRatinaディスプレイ云々は関係ないと思い込みスルーしていたのだが、windowsの設定で「全体を大きくする」を使用していたことをすっかり忘れていた。
以下、ついでにハマったことメモ。
# fillTextの高さがおかしい
高さの基準がデフォルトでalphabeticになっているため、CSS感覚で指定すると何か上にずれる。[textBaselineをtopに指定すれば](https://developer.mozilla.org/ja/docs/Web/API/CanvasRenderingContext2D/textBaseline)解決する。
# canvasの画像をリサイズする
上の方法でcanvasの内部解像度を大きくすると、画像にした時に環境によって画像サイズが変わってしまう。jsで新し
なぜJSが必要なのか？ (JS学習アウトプット)
##あいさつ
初めての人は初めまして！知っている人はこんにちは！
Atieです！
実は一度qiitaのアカウントを消したのですが「[web系エンジニアになろう](https://www.amazon.co.jp/21%E4%B8%96%E7%B4%80%E6%9C%80%E5%BC%B7%E3%81%AE%E8%81%B7%E6%A5%AD-Web%E7%B3%BB%E3%82%A8%E3%83%B3%E3%82%B8%E3%83%8B%E3%82%A2%E3%81%AB%E3%81%AA%E3%82%8D%E3%81%86-AI-DX%E6%99%82%E4%BB%A3%E3%82%92%E7%94%9F%E3%81%8D%E6%8A%9C%E3%81%8F%E3%81%9F%E3%82%81%E3%81%AE%E3%82%AD%E3%83%A3%E3%83%AA%E3%82%A2%E3%82%AC%E3%82%A4%E3%83%89%E3%83%96%E3%83%83%E3%82%AF-%E5%8B%9D%E5%8F%88/dp/4408339334)(勝又さん)」の本を読んで「q
【備忘録】htmlのselectで特定のものを選んだときに追加項目を出し、かつ必須項目に設定する
##やりたいこと
formのselect(プルダウンメニュー)で特定のものを選んだら
1.追加項目を出す
2.追加項目に必須項目を設定する
##結論
jsを使って入力可否を入れ替える。“`html:index.html