// TECH LOG
本業は、エンジニア。
ここから先は、まる子パパのもうひとつの顔の話。ふだんは受託開発のエンジニアとして働いています。
AI・Web開発・IT業界のこと、そしてキャンプに直結する電源まわりの技術まで、
仕事場の試行錯誤をここに記録しています。キャンプの写真は1枚も出てきません。
朝はコードの話、夕方はAI・業界のニュース。どちらも実際に手を動かした範囲だけを書いています。 うまくいった手順より、動くと思って動かなかった一行のほうが多いです。
分類HTML・CSSほかの分類から選ぶ21
CSSのaspect-ratioの使い方｜padding-topの計算をやめて、縦横比を1行で書く
CSSのaspect-ratioは、幅から高さを自動で決めるプロパティです。 web.devの解説を読んで、padd…
/tech/1061/
固定ヘッダーでページ内リンクがずれる原因｜見出しにscroll-margin-topを1行足せば隠れない
目次のリンクを押すと、飛んだ先の見出しが固定ヘッダーの裏に隠れる。 直し方は scroll-margin…
/tech/1039/
CSSで文字を「…」で省略する方法｜1行はtext-overflow、2行以上はline-clamp、flexの中ではmin-widthを見る
長い文字を「…」で切る書き方は、1行と2行以上で別のプロパティを使う。 どちらも3つのうち1つ…
/tech/1011/
z-index が効かない原因｜数字を大きくしても前に出ないのは、親が別の重なりグループを作っているせいだった
z-indexに9999を書いても前に出てこない。 原因は「positionがstaticのまま」か「親が重なりの…
/tech/987/
object-fitとは何か｜width・heightを両方指定したら、写真が横に潰れて表示された
サムネイル画像にwidthとheightを両方書いたら、写真が真横に伸びて潰れて見えた。 原因はCSSの…
/tech/958/
flexboxで文字が1文字ずつ改行される｜wrapを疑っても直らない原因
スマホで横並びのタブの文字が、一文字ずつ縦に積み上がることがある。 flex-wrap: wrapを外し…
/tech/924/
100vhでスマホの下が切れる原因｜アドレスバーの出し引きで「100%」の中身が変わる
トップページの写真をheight:100vhで画面いっぱいにすると、スマホでだけ下が切れて見えること…
/tech/879/
position:sticky が効かないときに見る場所｜原因は、昔書いた overflow の一行であることが多い
目次を画面に残したくて二行書いても、そのまま上へ流れていくことがある。 悪いのはCSSではな…
/tech/831/
スマホでボタンを押したつもりが、隣のリンクが開く。押せる大きさには24pxの決まりがある
見た目は四十ピクセル四方のボタンでも、実際に反応するのは真ん中の文字だけ、ということがあ…
/tech/701/
画像が届いた瞬間に、読んでいた行が下へ逃げる。原因は大きさの書き忘れ
スマホで記事を開いて、一行目を読みはじめたところで文章が下にずれることがある。 読み込みが…
/tech/632/
このサイトを動かしているCMS
稼働中の実例
国産CMS「コンテナ」
オートキャンプライフは、私が開発に携わっている国産CMS「コンテナ」で動いています。 記事の投稿だけでなく、4,223件の泊まれる場所のデータベースも、会員機能つきのスタンプラリーも、全部このCMSの上で作りました。 ここに書いている技術の話は、たいていこのCMSを直しながら出てきたものです。
※運営者が開発に携わっているサービスです。このサイト自体が稼働中の実例になっています。