ねこさんとへびさんの新人技術ブログ

新人エンジニアのねこさんとへびさんの、技術向上のためのブログです。

CSS

TS!疑似要素でHTML特殊文字が表示されないの!!

CSS

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

MEMO!CSS - 要素のなかのテキストを上下左右中央ぞろえ

CSS

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

Memo!テキストのマーカー風の線を引く - CSS

CSS

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

はてなブログの書き方 - 目次の装飾をしてみた

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

Rpt!第三回 ねこへび勉強会

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

Tips!Macのブラウザでスクロールバーが表示されない

CSS

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