ラベルなど、文字が折り返されるとデザインがおかしくなってしまう時、 一定の文字数を超えたら三点(…)で省略してしまいたい時のTipsです。 １）枠外にはみ出す 折返しをしない設定にしていると(white-space: nowrap;)と、文字数次第で下のように文字がはみ…

疑似要素の::beforeや::afterなどでHTML特殊文字が文字化けしてしまったらどうすればよいか。 結論を先に書くと HTML特殊文字の数値文字参照16進数表記を調べる(Ex. ☀) 16進数部分のみ着目(Ex. 2600) 正確に6桁16進数にする（0埋めしない4桁でも大丈…

こんな感じに100×100のブロックの中央に1行テキストを表示したいです。 ブロックの外側には5pxの余白があります。その幾つかあるやり方を、まとめてみました。See the Pen 要素を中央に by hebisan (@climbFrog) on CodePen.■検証環境 Windows 7 FirefoxとIE…

よく見かける、テキストに蛍光マーカー風のラインを引くCSSを作ってみました。See the Pen marker-css by hebisan (@climbFrog) on CodePen. 今回は見出しになるように、ライン幅を広めにとってます。 下左右にラインがはみ出して見えるように、paddingで余…

はてなブログには見出しから目次を生成する「目次記法」という機能があります。staff.hatenablog.comこの記法で目次を生成すると、記事内に下の画像のような目次が表示されます。 デザインが「何だかな」だったので変更してみました。開発ツールなどで見出し…

4月7日に、第三回ねこへび勉強会をおこないました。ﾊﾟﾌﾊﾟﾌ (ただ二人で集って勉強しているだけの会)一応この勉強会のテーマは、 ねこさんが主体になって目標管理のWEBシステムを作ること になってます。まだシステムの要件はぼやっとしか決まっていないです…

Macではスクロールバーの表示が以下の3パターンから選択できるのですが、 マウスまたはトラックパットに基づいて自動的に表示 スクロール時に表示 常に表示 「常に表示」を選択していないと、Bootstrap3 モーダルウィンドウ内のスクロールバーが表示されずに…