CSS

display: flex;で指定した子要素にあたるものの幅を可変にしたくない時ってありますよね。例えば画像とテキストが横に並んだメディアと呼ばれるようなものです。 画像とテキスト部分をそれぞれFlexアイテムとして、f […]

Googlemapをレスポンシブ対応でcssを充てている時に、お手本になぞらえてコードを書いたつもりが、 地図の下のほうに大きな余白が空いてしまいました・・・ 通常、ググって辿り着いた情報だと以下のようなパターンになって […]

コーディングに時間がかかってくるところの一つに、レスポンシブ対応があります。 モバイルファーストという言葉があるくらい、スマホでの見え方は検索エンジンに見つけてもらうためにもレスポンシブ対応は必須の作業となっています。 […]

初級の時にも、はまっていた記憶があります。 備忘録として残しておきます。 フォーム部品などに使われる送信ボタンのbuttonやinput。 それ自体に「margin： 0 auto;」を一生懸命指定しても思ったような挙動 […]

flexboxを用いている時に、flex-item間、つまり子要素間の余白を取るときはgapという方法があるそうです。 例えば、横向きで並んでいる場合(デフォルト時)に とすると、縦方向に20px、横方向に30pxの余白 […]

font-weightがbold以外の時、例えばMediumとかLight、ExtraBoldなどに出会ったことはありませんでしょうか。 実はこれ、font-weightに数字を指定して実装できます。 対応表がMDNのサ […]

モーダルウィンドウも、初級から中級編に入ったばかりのころに勉強していましたが、今回少し忘れてしまっていました。 下記のサイトで記憶を戻しつつ、静的サイト部分は完成しました。 下記サイトは今取り組んでいる課題のようにフォー […]

久しぶりにfvｎ背景画像を充てるところで時間がかかってしまいました。 普通に画像をはめ込むだけでは、拡大して少し左よりになったとように感じます background-size: cover; だと思って、指定するものの、 […]

よく使うmax-widthですが、レスポンシブ対応の実装をしている時に「そういえばmax-widthを解除する方法ってどうやったっけ？」と考え込んでしまったため、調べたことをメモで残しておきます。 今回お世話になったサイ […]

縦書きの実装の際に、CSSで「writing-mode: vertical-rl;」とすることは以前のブログ記事でも書きました。 指定した後、メニューのうち文字数が比較的少ないものはインデントが出来てしまいました。 出来 […]

画像とテキストを少しずらして重ねてあるプロジェクト部分の作成中にはまってしまった場所なので、メモ。 レスポンシブ対応中に、タブレット領域部分で右側に余白が出来ていることを確認。 ↓ すぐさまデベロッパーツールにて検証開始 […]

久々に縦書きの実装をしようと思ったら、いろいろと忘れてしまっていたので、調べたことを備忘録として残しておきます。 〇縦書きのコーディングは、「writing-mode」プロパティを使用 使う値は、「vertical-rl […]

毎回、コーディングする時にどんなクラス名にしようか迷ってしまいます。 とりあえず、皆さんがつけているクラス名を参考にしながら、できるだけ分かりやすいクラス名をつけていこうと思います。 今回のコーディング課題【中級Ex編】 […]

前回の記事でFLOCSS設計思想に基づいて、CSS設計を行っていくという話をしました。そちらで参考サイトの方は、命名規則をBEMMindBEMdingで行っているとのことでしたので、早速調べてみました。 下記サイトが分か […]

前回のコーディング課題【中級編】では、初めて設計思想というものを導入し、メジャーなBEMに基づいて行いました。 ただ、やりながら使いづらさを感じていました。 今回、【中級Ex編】までに、gulp導入ついでにpugも取り入 […]

tableのth（見出し）部分の文字を長細く表記するために「transform：scale(〇, 〇) translate(〇, 〇);」を実装したところ、レスポンシブ対応時にthのみ左右に謎の余白が出来てしまった事件。 […]

flexboxは奥が深いので、まだまだ勉強しなければならないことが多いですが、ここではデザインカンプからのコーディング課題時によく悩んだことの一つ、「子要素の幅を均一にする」ことについて( ..)φメモを残しておきます。 […]

昨日書いた記事（1つ手前の記事）で、文字を細くする方法について書きました。 ここでは、AOS.js（JavaScriptのライブラリで、簡単にスクロール連動型のアニメーションを実装できるものです）と併用した場合に、tra […]

デザインカンプからのコーディングを行っている時に、文字のサイズや行間、文字間は指定通りなのに、なぜか文字がデザイン通りに合わない、ということが出てきました。 その解決方法を備忘録がてら( ..)φメモしておきます。 結論 […]

tableのレスポンシブ対応をする際に、忘れていたので( ..)φメモしておきます。いろんなパターンが考えられますが、ここでは2列複数行タイプのtableをレスポンシブ対応で1列（複数行）にする方法を書いておきます。 簡 […]