B-Teck!

お仕事からゲームまで幅広く

CSS

【CSS】文字の左右に線を引く

CSS

See the Pen OQBwvy by baetdjam (@beatdjam) on CodePen. 説明 文字の要素をFlexboxにして、align-items で垂直方向を中央ぞろえする。 疑似要素 :before、:afterで、文字の前後に空の要素(content:"")を追加する 解説 flex-grow:1を設定することで、要素内…

【CSS】文章の字下げを行うCSS

CSS

1. 一行目の行頭を字下げする テキストの一行目を字下げするtext-indentプロパティを利用する <style type="text/css"> .sample1{ text-indent:1em; } </style> <p class = "sample1"> どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで</p>…

【CSS】CSSの詳細度の設計メモ

CSS

CSSのスタイルの適用順序には、詳細度という仕組みが存在する。 CSSを設計する上では欠かせない概念であるためメモ。 詳細度とは 詳細度とは、スタイルを適用する命令の強さである。 id、class、タグ要素等、各セレクタ自体が詳細度を持ち、その強さは三段階…

仕事で最近ハマったjavascriptとかjQueryとかのTIPS

ここ最近サーバー側のロジックよりも、デザインとかクライアント側のソースをいじる機会が多くて、 いろいろ困ってたのでメモ的に。 ①IE9以前でdisableのテキストボックスの文字が灰色になってしまう あんまりきれいなやり方ではないんだけど、 <form> <input type="textbox" value="test" disabled="disabled"></input> </form> から、 <form> </form>

CSSハックとWin用Safariをとりあえず使えるようにする奴の紹介

CSS

仕事でIE8~IE10とSafariを使う必要があったので /**IE8**/ .selector{ color: #000000¥9; } お尻に\9ってつけるのがメジャーらしい。 セレクタにコメントつけるとかいろいろあったけどとりあえず動いてる。 /**IE9**/ .selector:not(:target) { color: #000…