環境構築
【Ubuntu】NginxをアンインストールしてApacheをインストール
CSS
CSS 
CSS flexboxのレスポンシブ対応で可変にしたくないアイテムのCSS指定
display: flex;で指定した子要素にあたるものの幅を可変にしたくない時ってありますよね。例えば画像とテキストが横に並んだメディアと呼ばれるようなものです。画像とテキスト部分をそれぞれFlexアイテムとして、flexboxの子要素と...
CSS GoogleMapをレスポンシブ対応させた時に出た余白の解決方法
Googlemapをレスポンシブ対応でcssを充てている時に、お手本になぞらえてコードを書いたつもりが、地図の下のほうに大きな余白が空いてしまいました・・・通常、ググって辿り着いた情報だと以下のようなパターンになっていることが多いです。一応...
CSS レスポンシブ対応を少しでも楽にしたい【フォント編】
コーディングに時間がかかってくるところの一つに、レスポンシブ対応があります。モバイルファーストという言葉があるくらい、スマホでの見え方は検索エンジンに見つけてもらうためにもレスポンシブ対応は必須の作業となっています。そんなレスポンシブ対応で...
CSS フォームの送信ボタンを中央揃えする時に少しハマりました・・・
初級の時にも、はまっていた記憶があります。備忘録として残しておきます。フォーム部品などに使われる送信ボタンのbuttonやinput。それ自体に「margin： 0 auto;」を一生懸命指定しても思ったような挙動にはなりません。これらを中...
CSS flexbox使用時に各item(子要素)間の余白を調整したい
flexboxを用いている時に、flex-item間、つまり子要素間の余白を取るときはgapという方法があるそうです。例えば、横向きで並んでいる場合(デフォルト時)にとすると、縦方向に20px、横方向に30pxの余白をとってくれます。mag...
CSS fontのMediumってどう指定するの？
font-weightがbold以外の時、例えばMediumとかLight、ExtraBoldなどに出会ったことはありませんでしょうか。実はこれ、font-weightに数字を指定して実装できます。対応表がMDNのサイトに載っています(↓【...
CSS モーダルウィンドウを実装する時に参考にしたサイト
モーダルウィンドウも、初級から中級編に入ったばかりのころに勉強していましたが、今回少し忘れてしまっていました。下記のサイトで記憶を戻しつつ、静的サイト部分は完成しました。下記サイトは今取り組んでいる課題のようにフォームが浮かんでくるわけでは...
CSS fv画像をぴったりあてはめたい時、画像下に余白が出来た
久しぶりにfvｎ背景画像を充てるところで時間がかかってしまいました。普通に画像をはめ込むだけでは、拡大して少し左よりになったとように感じますbackground-size: cover;だと思って、指定するものの、今度は画像下側に大きく余白...
CSS レスポンシブ対応するためにmax-widthの指定を解除する方法
よく使うmax-widthですが、レスポンシブ対応の実装をしている時に「そういえばmax-widthを解除する方法ってどうやったっけ？」と考え込んでしまったため、調べたことをメモで残しておきます。今回お世話になったサイトでは、widthとh...
CSS ナビゲーションメニューを縦書きで実装する際、上揃えのために指定したCSS
縦書きの実装の際に、CSSで「writing-mode: vertical-rl;」とすることは以前のブログ記事でも書きました。指定した後、メニューのうち文字数が比較的少ないものはインデントが出来てしまいました。出来ればこれを上揃えにして見...
CSS 子要素にbox-sizing:border-box;を指定しているのに親要素をはみ出してしまった時に対処したこと
画像とテキストを少しずらして重ねてあるプロジェクト部分の作成中にはまってしまった場所なので、メモ。レスポンシブ対応中に、タブレット領域部分で右側に余白が出来ていることを確認。↓すぐさまデベロッパーツールにて検証開始。↓すると子要素で親要素か...
CSS CSS-縦書きの実装
久々に縦書きの実装をしようと思ったら、いろいろと忘れてしまっていたので、調べたことを備忘録として残しておきます。〇縦書きのコーディングは、「writing-mode」プロパティを使用使う値は、「vertical-rl」でこの「rl」は右から...
CSS CSSのクラス名にはいつも迷わされます
毎回、コーディングする時にどんなクラス名にしようか迷ってしまいます。とりあえず、皆さんがつけているクラス名を参考にしながら、できるだけ分かりやすいクラス名をつけていこうと思います。今回のコーディング課題【中級Ex編】でクラス名をつけるのに参...
CSS 命名規則はBEM/mindBEMdingをベースに行ってみる
前回の記事でFLOCSS設計思想に基づいて、CSS設計を行っていくという話をしました。そちらで参考サイトの方は、命名規則をBEMMindBEMdingで行っているとのことでしたので、早速調べてみました。下記サイトが分かりやすかったので参考に...
CSS CSS設計について、今回（【中級Ex編】）はFLOCSSでやってみます
前回のコーディング課題【中級編】では、初めて設計思想というものを導入し、メジャーなBEMに基づいて行いました。ただ、やりながら使いづらさを感じていました。今回、【中級Ex編】までに、gulp導入ついでにpugも取り入れたこと、参考にしたのせ...
CSS tableで謎の余白が出来た～原因はthに指定したtransformだった～
tableのth（見出し）部分の文字を長細く表記するために「transform：scale(〇, 〇) translate(〇, 〇);」を実装したところ、レスポンシブ対応時にthのみ左右に謎の余白が出来てしまった事件。→transform...
CSS flexboxを用いた時の子要素の幅を均一にしたい
flexboxは奥が深いので、まだまだ勉強しなければならないことが多いですが、ここではデザインカンプからのコーディング課題時によく悩んだことの一つ、「子要素の幅を均一にする」ことについて( ..)φメモを残しておきます。【コード例】HTML...
CSS 文字を細くする方法～transformを使った方法②～【AOS.js】と併用する時は注意
昨日書いた記事（1つ手前の記事）で、文字を細くする方法について書きました。ここでは、AOS.js（JavaScriptのライブラリで、簡単にスクロール連動型のアニメーションを実装できるものです）と併用した場合に、transformが効かない...
CSS 文字を細くする方法～transformを使った方法～
デザインカンプからのコーディングを行っている時に、文字のサイズや行間、文字間は指定通りなのに、なぜか文字がデザイン通りに合わない、ということが出てきました。その解決方法を備忘録がてら( ..)φメモしておきます。結論からいうと、プロパティは...
CSS table2列複数行タイプをレスポンシブで1列にする方法
tableのレスポンシブ対応をする際に、忘れていたので( ..)φメモしておきます。いろんなパターンが考えられますが、ここでは2列複数行タイプのtableをレスポンシブ対応で1列（複数行）にする方法を書いておきます。簡単にHTML構造を書い...