HTML 画像の出し分けについてちゃんと向き合う 恥ずかしい話ですが、独学を始めた当初から、画像に関してはfigureタグとimgタグだけでここまできました。しかし、本来であればsrcsetタグなどを用いて、レスポンシブ幅に応じて画像の出し分けをきちんと行わないといけません。もともと、コー... 2022.06.27 HTML
HTML HTMLのdata属性について調べてみた コーディング課題【中級Ex編】取組み中のメモ。今回はdata属性について調べたことを簡単にメモしておきます。data属性はタグの中に「data-**="****"」(**は自由につけられる)と記述して使用↓このdata属性ですが、「特定の要... 2022.06.17 HTML
HTML buttonタグのaria属性が気になったので調べてみた 私がこの属性を発見したのはハンバーガーメニューですが、FAQページでよく見かける開閉パネルにも実装されていることが多いそうです。この属性を調べていくうちに「WAI-ARIA」(ウェイ・アリア)という単語が何度も出てきました。「Web Acc... 2022.06.16 HTML
HTML HTMLのonclick属性とは 他の方のコードを見ていて、buttonタグにonclick属性が設定されていました。勉強用メモです。気になったことを調べてメモしています。【onclick属性とは】・・・ユーザーが要素をクリックしたときに起動する処理を指定するイベント属性。... 2022.06.11 HTML
CSS tableで謎の余白が出来た~原因はthに指定したtransformだった~ tableのth(見出し)部分の文字を長細く表記するために「transform:scale(〇, 〇) translate(〇, 〇);」を実装したところ、レスポンシブ対応時にthのみ左右に謎の余白が出来てしまった事件。→transform... 2022.05.02 CSSHTML
CSS flexboxを用いた時の子要素の幅を均一にしたい flexboxは奥が深いので、まだまだ勉強しなければならないことが多いですが、ここではデザインカンプからのコーディング課題時によく悩んだことの一つ、「子要素の幅を均一にする」ことについて( ..)φメモを残しておきます。【コード例】HTML... 2022.04.30 CSSHTMLデザインカンプからのコーディング【練習】
CSS 文字を細くする方法~transformを使った方法②~【AOS.js】と併用する時は注意 昨日書いた記事(1つ手前の記事)で、文字を細くする方法について書きました。ここでは、AOS.js(JavaScriptのライブラリで、簡単にスクロール連動型のアニメーションを実装できるものです)と併用した場合に、transformが効かない... 2022.04.29 CSSHTML技術メモ