生活の跡

個人的な備忘録

Web-CSS

HTML+CSSで素因数分解の筆算を書く

概要 十進数を二進数に変換する手法をブログで取り上げるため、Webページで素因数分解の筆算を書きたいと思いました。イメージはこんな感じです。 方針 はじめに考えたこと 数式といえばTeX(テフ)だろ!(※)と思ってWeb検索したところ、Yahoo知恵袋で似たよ…

div要素の左側に、90度回転させた文字列を配置したい

概要 つまり、こんな感じのことがしたい。 縦書きにしたいのではなく、横書きの文字列を90度回転させたいのである。 手順 CodePenを使って試します。 1. 文字列もdiv要素で用意し、横並びにする まずは、display: flex;を設定した親要素を用意し、div要素を…

CSSで台形を描く手順と仕組み

概要 div要素にCSSを適用するだけで、台形を描くことができます。仕組みを理解していなかったので調べました。 台形を描く手順 CodePenで作成した画像を使って紹介します。 1. borderを設定したdiv要素を用意する width=100px; height=100px;のdiv要素を、50…

position: absolute; を適用すると、次のDOM要素が重なってしまう

困ったこと あるブロック要素に対してposition: absolute;のスタイルを適用したところ、その次のDOM要素が重なってしまいました。 回避策 position: absolute;を適用したブロック要素と同じ高さのダミー要素を間に挟みます。

FuelPHPの form.php を編集して、tableタグのないフォームを生成する

img{ border: 1px solid #888; width: 60%; } 概要 次のようなレイアウトのフォームをFuelPHPで作りたい。 環境 FuelPHP 1.8.2 課題 FuelPHPでは、次のようにFieldSetインスタンスをaddで追加したフォームを作成することができます。 add('use…

serif(明朝体)の太字箇所をわかりやすくする

概要 serif は web の文章でよく使われるフォントですが、太字の装飾(font-weight: bold;)がわかりずらいです。 しかし、font-smoothing: antialiased; を設定したらわかりやすくなりました!のでメモ。 font-smoothing を使わない場合 以下の文章のどこが太…

スタイルシートでアイコンを作る

概要 丸いアイコンの中に文字が入ったアイコンを、スタイルシートで作ります。 こんなの↓ サンプルコード 下記のリンク(CodePen)をご覧ください。 https://codepen.io/akihiroishii/pen/NOREod ポイント 丸くする widthとheightを揃える border-radius: 50…