きり丸の技術日記

技術・エンジニアのイベント・資格等はこちらにまとめる予定です

CSS

CSSで文字の上に強調のドットを付与したい

CSSで文字の上に強調のドットを付与したかったので、それを設定した時のメモ。 ゴール 特定の文字の上にのみドットを付与して強調する 文言はiZooのテーマソングから。 環境 Windows Chrome iPhone Chrome 対応 次のCSSを設定すると、文字の上にドットを付与…

CSSでフォントをBoldよりもさらに太くしたい(text-shadow)

フォントのサイズはこれ以上調整できない、フォントの太さもBoldにしているのでこれ以上太くできない。 そんな時にtext-shadowを使うことで文字を太く見える方法があったのでメモします。もっとよりよい方法があれば教えていただきたいです。 ゴール フォン…

HTML, CSSで表示領域を超える文言は3点リーダーの...で省略する(1行、複数行)

よく使うけど、毎回忘れるので。 環境 Chrome ゴール 表示領域を超えていれば文言を省略する 1行 複数行 アイコン + 文言の表示領域でも正しく省略する 1行で表示領域を超えていれば文言を省略する <div style="width:150px;border: 10px solid red"> <div class="wrap-text"> ルイズ・フランソワーズ・ル・ブラン・ド・ラ・ヴァリエ</div></div>…

Flexboxでtableのrowspanやcolspanのように結合したい

なぜ動いているかはちゃんと理解していませんので、解説はしません。ソースコードのみ残します。 ゴール HTMLのtableタグのrowspanやcolspanのように、縦列結合、横列結合をする。画像のように緑はrowspan=3、オリーブ色はcolspan2で結合しています。 ソース…