作ったアプリ https://xenodochial-clarke-ebb79c.netlify.app/ 四則演算だけできるシンプルな電卓です。できるだけWindows10の標準電卓と同じ動作になるように作りました。 今回は外部ライブラリとして、fittyとbig.jsを使いました。 今回学んだこと 数字が枠からはみ出る問題 電卓のディスプレイ部分ですが、入力する数字の桁が大きすぎると枠からはみ出てしまいます。 [1]を連打しまくる... で、数字が何桁入力されても幅が固定された枠の中に収まるように文字サイズを調整したい！と思っていたところ、fittyというとっても便利なライブラリを見つけました。fittyを使うと、次のようにフォントサイズが自動調整されて桁数が多い場合でも、1行に収まるようにしてくれます。 index.html <div class="result-display"><div><div id="result">0</div></div></div> script.js import fitty from './fitty.module.js' fitty('#result', { maxSize: 48 // 最大フォントサイズを設定。最小も設定できる。 }) 使い方はとても簡単で、fittyに文字サイズを自動調整したい要素を渡して、最大／最小フォントサイズなどを設定するだけです。一見必要なさそうな<div>は、.result-displayにpaddingを設定しているためで、公式の次の注意に従っています。 If the parent element of the fitty element has horizontal padding the width calculation will be incorrect. You can fix this by wrapping the fitty element in another element. 電卓としては１行に収めてくれるとはいえ、あまり桁数が多くなっても困るので数字を入力するたびにその桁数を評価して16桁以上は入力できないようにしています。 script.js if (currentNum.length > 16) { currentNum = currentNum.slice(0, -1) // この時のCurrentNumはStringです } 小数点を含む場合に正しく計算できない 原因はあまり詳しく調べていないですが、JavaScriptでは小数点を含む場合に正しく計算できないことがあるようで、これに対処するために色々やり方はあるみたいですが、今回はbig.jsというライブラリを使いました。 普通に計算した場合 big.jsを使った場合 アプリでの実装は次のような感じで、[+]や[-]が押されたときにbig.jsのメソッドで計算して、Number型に変換しています。 script.js if (ope === '+') { answer = Big(firstTerm).plus(secondTerm).toNumber() } else if (ope === '-') { answer = Big(firstTerm).minus(secondTerm).toNumber() } else if (ope === '×') { answer = Big(firstTerm).times(secondTerm).toNumber() } else if (ope === '÷') { answer = Big(firstTerm).div(secondTerm).toNumber() } キーボード入力で、ボタンをクリックしたときと同じ処理をさせる 例えば、キーボードの[1]を押したときに、画面に表示してある[1]のボタンに登録してあるイベントハンドラを実行させるという実装をしました。dispatchEventメソッドを使って、clickイベント発生時に実行するイベントハンドラをkeydownイベント発生時にも実行させています。 script.js one.addEventListener('click', appendNum) // oneは[1]ボタン要素への参照。クリック時に[1]を計算式に追加する // 同じ動作をキーボードの[1]キーが入力されたときに実行したい window.addEventListener('keydown', getKeyboardValue) // 何らかのキーが押されたときに、getKeyboardValueを実行 const getKeyboardValue = e => { switch (e.key) { // 入力されたキーを判断 case '0': zero.dispatchEvent(new Event('click')) break case '1': // 入力されたキーが[1]であれば、'click'イベントが発火したと捉える→appendNumが実行される one.dispatchEvent(new Event('click')) break // 以下、入力されたキーごとに条件分岐 } type="module"設定時にローカル環境でテストする 今回はscript.jsに外部ライブラリを読み込んでいるので<script>のtype="module"を設定しますが、ローカル環境で普通にindex.htmlを開いて...とやると、エラーが出ます。 index.html <script type="module" src="script.js" defer></script> エラー Access to script at 'file:///path/to/script.js' 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. で、これはfile://でアクセスしているのが原因らしく、http://でアクセスしてやればいいらしいです。やり方については、下記のMDNの記事がとても分かりやすいです。pythonでローカルサーバを立ち上げればいいらしい。 参考文献・記事 fitty big.js How do you set up a local testing server? JavaScript コードレシピ集

背景画像のRetina対応 background-image: image-set(url(asset/images/top/pickup-back.jpg) 1x,url(asset/images/top/pickup-back@2x.jpg) 2x);

どうも、Webチョットデキルおばさんです。 本来の業務の傍ら、職場（学校）の公式Webサイトを作っている。（つらい） この作業の中で気をつけたことを以下に書いていく。 学生または初学者の方々は、初心者からチョットデキルになるために使える技術だと思うのでぜひ身につけていただきたい。 なお、前提は以下である。 ・作成するのは某短大の公式Webサイト ・デザイン科の学生が卒業研究で作成したプロトタイプがある。（私は情報科） ・2割のページのリライト、6割のページの未作成ページの対応 ・デザインはしていない。デザインテンプレートあり（ありがたい！） ・↑なので、マークアップ～Wordpress組み込み～公開までの作業になる。 ・使用エディタはVSCode ・CMSはWordpress セマンティック・ウェブに基づいたマークアップ 具体的にはh1、h2などの見出しのタグやarticleなどHTMLタグで意味づけをちゃんとして Googlebotに読みやすいHTMLを書こう。ということである。 当科の学生にも授業で教えているのだがなかなか伝わらない。 今回のサイトでは割とキレイに書いていたが、特にhタグを中心に書き直し。 Webサイトを作るときには必ずチェックしたい。 フォントはサブセット化 WebフォントをDLし、サブセット化することで、 見てもらうユーザーのパケ代（死語）も節約でき、 ページ表示後にフォントが変わるあの気持ち悪い現象も回避できる。 表示スピードが上がることはSEOにもつながる。 面倒だが対応したい技である。 CSSをSassに 学生の作ったCSSをそのまま使用してもよかったのだが、 入れ子や変数が使えるので管理がしやすくなり、 コーディングスピードが全然違うのでやはりSassに乗り換えたい。 VSCodeのLive Sass Compilerでコンパイルしている。 カラーコードを変数化 $color_mca:#2A579A; $color_prd:#007EB1; $color_elc:#FFA826; $color_dnk:#ED7A25; $color_ach:#94B428; $color_utl:#2E792D; $color_cis:#E54848; $color_dsn:#E25C83; $color_maj:#6F4C77; $color_yahaba:#004ea2; $color_mizusawa:#ED6C00; 入れ子 #news_detail{ min-height: 500px; .news_head{ margin-bottom: 15px; text-align: right; &+h1{ margin-top: 15px; } } .tag{ display: inline-block; margin-right: 20px; a{ color: $color_yahaba; i{ margin-right: 6px; } } } 　　　　・・・ 一人でもGithub ソース管理のため、自分だけの作業だったとしてもGithubを使用している。 作業量もわかりやすく、過去の作業も振り返ることができる。 また、Githubによってどこでもソースが取り出せ、席を移動したりパソコンを変えても作業できる。 これにより業務の合間の時間をやりくりできた。 職場（学校）はディフェンスに定評のあるガチガチプロキシ設定なのでGithub＋GithubDesktopを使用。（これだけ通るのなぜ・・） Dockerも使いたかった。。 使いやすいWordpressブロックエディタの管理 少しWordpressを離れていた間に時代はブロックエディタになっていた。 HTMLを知らなくても更新できるので、運用側のユーザーには使いやすいものだという印象を受けた。（まだ運用までしていない） 細かいユーザー施策 ogタグを入れる ogタグとはFacebookやTwitterなどに表示させる情報である。 現状サイトにおいては、ogタグが皆無だったため、リンクをシェアしてもURLしか出なく写真も一緒にアップしていた。 適切に表示させるよう設定をかけた。 各種SNSからのアクセス増を狙う。 URLの正規化 URLがバラバラ、例えば同じページでも「/news」「/news/」「/news.php」などとバリエーションがある場合ページビューが分散してしまう。（と聞いたことがある。古いかも・・） SEOに影響がないとしてもURLの書き方が揃っていないのは気持ち悪いので統一。運用時にも共有を図りたい。 ページランクをアップを狙う。 さいごに デザイン科の学生が卒業研究で作成したプロトタイプがある。 としていたが、引き継いでから半年以上経ったころコメントを発見した。 デザイン科の先生に共有。 作業に嫌になってきたころ、優しい気持ちを取り戻し、モチベーションが上がった。 この引き継いだサイトも、元Web制作会社の目で見たら直すところや足りないページはあったものの、学生1人でデザインからコーディングまでとてもよくできていた。 遊び心も持ち合わせている彼女（卒業生）はきっと活躍のことだろう。 <!-- 先生方、2年間ありがとうございました！ --> <!-- 卒研は2年間の中でも一番楽しく、充実した時間でした！ --> <!-- サイトの引き継ぎ、宜しくお願い致します！ --> <!-- みんな幸せになぁれ♬ 　∧,＿,∧　 （`・ω・)つ━☆・*。 ⊂　　 ノ 　　　・゜+. 　し’´Ｊ　　*・ °” --> 来年度の公開に向けて、現在はWordpressの構築を急いでいる。 だれか手伝ってくれ

この記事では 2021年8月に公開された CSS Nesting Module の First Public Working Draft について解説します。 3 行でわかる CSS Nesting Module 今年 8/31 に CSS Nesting Module の First Public Working Draft が公開 スタイルルールをネストして記述することができ、CSS の可読性と保守性が向上させるのに役立つ 対応ブラウザはまだないが、これから出てきそう！ CSS Nesting Module とは CSS Nesting Module とは、スタイルルールを入れ子（ネスト）にして記述するための仕様です。 今年 8/31 に CSS Nesting Module の First Public Working Draft が公開され話題になりました（ちなみに Editor's Draft は 2018 年）。 スタイルをネストする記法は古来より Sass や Less などでもお馴染みですが、重複する指定を減らして可読性を高めたり、関連のスタイルをグルーピングすることで保守性を高めたりできるメリットがあります。 ネイティブの CSS でスタイルのネストがサポートされることによって、プリプロセッサを使用せずともこの恩恵を享受できるようになります。 例 .header { background-color: blue; } .header p { font-size: 16px; } .header p a:hover { color: green; } 上記のコードを SCSS や Less などのプリプロセッサを使わずに、このように書くことができます！1 .header { background-color: blue; & p { font-size: 16px; & a { &:hover { color: green; } } } } すっげー！? 記述方法は 2 種類 ネストしたスタイルの書き方には下記の 2 つがあります。 Direct Nesting @nest Direct Nesting ネスティングセレクタ & 使う構文で、各プリプロセッサでもお馴染みの記法です。 例 p { color: black; .body { color: red; // → p.body に適用される } } ↓ ネストの中で隣接セレクタも使用可能 .foo { color: blue; & + .bar { color: red; // → .foo + .bar に適用される } } ↓ メディアクエリもネストできる .header { font-size: 24px; @media (max-width: 760px) { & { font-size: 12px; } } } その他にも Working Draft に豊富な具体例があるので、興味がある方は是非ご覧ください。 Direct Nesting の注意点 Direct Nesting では & は常にセレクタの最初に書かなければないというルールがあります。 つまり、下記のようにセレクタの後ろに & を書いてもうまく解釈されません。 .header { background: white; .dark & { //← .dark .header に適用されない? background: blue; } } このような場合に役に立つのが、次に紹介する @nest を使う構文です。 @nest @nest を使うことで & を書く位置をもっと柔軟に決めることができます。 例 .header { background: white; @nest .dark & { //← .dark .header に適用される background: blue; } } ↓ 擬似クラスにも&を使用することができます .foo { color: red; @nest :not(&) { //← :not(.foo) に適用される color: blue; } } Direct Nesting と @nest は一緒に使える Direct Nesting と @nest を一緒に使うことで、より複雑なネストの指定が可能になります。 例 .foo { color: blue; @nest .bar & { color: red; &.baz { color: green; } } } なぜ @nest が必要なの？ 最初から Direct Nesting でだけで書けるようにすればいいじゃない！と思う人もいるかもしれません（私は思いました）。 .header { background-color: white; .dark & { background-color: blue; } } 上記のような書き方を許容してしまうと、テキストが宣言なのかスタイルルールの始まりなのかを判断するために無限に先読みが必要になってしまいます。 例えば、color:hover... という記述をパーサーは color プロパティなのか、<color> 要素なのかその箇所だけで判断することができません。 そのため、& もしくは @nest でセレクタを開始することで、「これはセレクタである」ということをパーサーに伝える必要があるのです。 参考: https://www.w3.org/TR/2021/WD-css-nesting-1-20210831/#:~:text=Why%20can%E2%80%99t%20everything%20be%20directly%20nested%3F CSS Nesting Module でできないこと Sass や Lessでは下記のように & を使用して文字列を連結し、BEM のクラス名をセレクタとして楽々指定することができました。 .foo { color: blue; &__bar { color: red; } } しかし、この書き方でクラス名同士を連結することは、セレクタ構文の仕様に矛盾しているため、__bar は HTML のカスタムエレメントだと解釈されてしまいます。 CSS Nesting Module の注意点 CSS Nesting ではセレクタが解決されると、ブラウザは :is()2 で親セレクタをラップしたセレクタに置き換えて解釈します。 .foo, .bar { color: blue; & + .bar { color: red; } } ↓ .foo, .bar { color: blue; } :is(.foo, .bar) + .baz { color: red; } :is()と類似の擬似セレクタに :where()3というものもありますが、 :is()だと解釈されるのがポイントです。 :is() を使うと :where() とは違いセレクタ全体の詳細度にカウントされるため、下記の様にネストせずに書いた場合と同じ詳細度になります。 .foo + .baz, .bar + .baz { color: red; } つまり、ネストすればするほど詳細度は高くなってしまうということです。 スタイルの上書きに ！important を使わざるをえない地獄を味あわないためにも、ネストの使いすぎに注意したいですね。 CSS Nesting Module を使う ブラウザ自体は未対応ですが、PostCSS を使用することで今からでも Nesting Module を使用できます。 postcss-nesting GoogleChromeLabs による https://designcember.com/ というサイトでも使用されており、実際のコードを見ることができる https://github.com/GoogleChromeLabs/designcember postcss-preset-env Nesting Module 以外の CSS の新しい仕様も使えるように polyfill を適応してくれる playground があるのでサクッと試したい場合におすすめ おわりに これまで見てきた CSS Nesting Module の仕様はまだ Working Draft であるため、今後変更の加わる可能性が大いにあります。 これから順次ブラウザにサポートされることが予想されるため、今後の動向に期待が高まりますね。 しかし、新しい仕様が登場してブラウザがそれをサポートしても、古いブラウザのシェアが高い状態だとなかなか実務では取り入れづらく、もどかしい思いをしている人も多いのではないでしょうか。 全人類が最新ブラウザにアップデートするように共に聖夜に祈りを捧げましょう? 参考 CSS Nesting Module CSS Nesting, specificity and you | Kilian Valkh Native CSS nesting: What you need to know - LogRocket Blog CSS Nesting, specificity, and you | CSS-Tricks コードハイライトでエラーになっているように見えますが、CSS Nesting Module に時代がまだ追いついていないだけで間違っているというわけではありません ↩ :where(): https://developer.mozilla.org/ja/docs/Web/CSS/:where ↩ :is(): https://developer.mozilla.org/ja/docs/Web/CSS/:is ↩

【やりたいこと】 PC、タブレット表示でMasonryっぽい並びをgridレイアウトで実装する。ウィンドウ幅縮小で並び替えはしない。スマホサイズになると昇順で縦に並ぶ。 【結果】 See the Pen grid layout by yoshida (@yoshi090) on CodePen. 【解説】 ポイントは以下です。 style.scss grid-template-areas: "a1 a2" "a1 a2" "a1 a4" "a3 a4" "a3 a6" "a5 a6" "a5 a7" "a5 a7"; エリアの指定を上記のようにすることで左右のコンテナの数や高さが違うものも勝手に揃ってくれます。 style.scss grid-template-rows: 0.6fr 0.8fr 0.9fr 0.6fr 0.8fr 0.9fr 0.9fr 0.4fr; また上記のrow（行）の高さを編集することで各コンテナの高さも調節できます。 IE11でも同様に表示されます（要ベンダープレフィクス）。 【余談】 Flexboxで実装するのは難しそうでした。 例えばスマホでのコンテナの並びが縦に「１→３→５→２→４→６→７」ならば左右でコンテナとして括れるので可能かと思います。

はじめに 筆者は大学生限定プログラミングコミュニティ『GeekSalon』で活動しているものです！ 興味があればぜひお話を聞きに来てくださいね！！！ レスポンシブWebデザインとは？ そもそもレスポンシブWebデザインがどんなものなのかご存知でしょうか？ これはWebサイトを閲覧しているユーザーが使用しているデバイス（パソコン、スマホ、ipadなど...）の画面サイズにそれぞれ表示を対応させるデザイン手法のことを指します！ パソコンで見たときにはちゃんと表示されてるのにスマホに変えた途端レイアウトがグチャグチャになっちゃった経験ありませんか？？？ そんな悩みを解決できるのがこのレスポンシブWebデザインです！！！ この記事では「メディアクエリ」というものを使って、スマホで見たときに画像が中央に寄って見やすくなるようにします！！！ 実装方法 HTMLとCSSだけを使うのでとても簡単に実装することができます！ 写真を用意 こちらの画像を使わせてもらいます！ （執筆者は生粋のガオラーです笑） viewページを用意 htmlとcssのファイル二つを用意します！！！ まずはhtmlファイルから！ ear.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=devise-width"> <title>Little Glee Monster</title> <link rel="stylesheet" href="css/earstyle.css"> </head> <body> <div class="container"> <header> <h1>Little Glee Monster</h1> </header> <section clsss="sekawara"> <div class="sekawara"> <h1>世界はあなたに笑いかけている</h1> <img src="img/sekawara.jpg" alt="世界はあなたに笑いかけている"> 　 <p>2018年8月に発売された12枚目のシングル<br> 第60回日本レコード大賞では、作曲賞を受賞した<br> YouTubeでは2000万回以上再生されている超人気曲となっている </p> </div> </section> <div> </body> </html> 次にCSSファイルも用意しましょう！！！ earstyle.css @import url(sanitize.css); body{ background-color: #f0f0f0; font-size: 14px; color: #666; } .container{ width: 1000px; box-shadow: 0 0 10px rgba(0,0,0, .3); margin: 0 auto; } header{ background-color: #422814; padding: 10px; color: #fff; } h1{ margin: 0; font-size: 24px; font-weight: normal; text-align: center; } .sekawara img{ float: left; margin: 0 10px 10px 0; } .sekawara{ height: 540px; } p{ font-size: 20px; text-align: center; } @media only screen and (max-width: 1000px){ .sekawara img{ float: none; display: block; margin: 0 auto; } header{ padding: 5px; } header h1{ font-size: 12px; } } cssのコードの解説を少しだけさせてもらいます！ @media only screen and (max-width: 1000px) 画面の最大の幅が1000pxになった際のcssを指定することができます！ @mediaのコードはスマホだけでなく大型のディスプレイにも適応させることができる非常に便利なコードです！ どんな内容を指定するかは{}の中に書いていくようにしましょう！ .sekawara img{ float: none; display: block; margin: 0 auto; } 写真のまわりこみを解除して、中央に寄せる記述になっています！ これで実装することができました！実際に見てましょう！ PCver スマホver（レスポンシブ対応前） スマホver（レスポンシブ対応後） 上のようにスマホなどタブレットで頻繁にWebサイトを開く際はこのようにレスポンシブ対応させた方が画面いっぱいに見ることができます！ とてもスッキリしたかと思います！！！ メディアクエリを使ったレスポンシブWebデザインの実装でした！！！?

2021/12/01より投稿をはじめます。 今日の収穫 学習の中でSVGアニメーションは飛ばしていたのでこの投稿は新しい気づきとなった。 就職活動が始まったので企業探しをしている中で、社内Blogの内容が自分にマッチすると選択がしやすい。 選考備考にOSS活動の提出が必要とあったので、始めるきっかけとなったことに感謝をしたい。 ポンコツコーダーをたたき上げて頂ける企業など存在しないので、精進します。