- カテゴリー別アーカイブ テキスト
テキストのスタイルを決定していく過程で、デフォルトのスタイルを良く知る事はとても役に立ちます。
-
-
HTML5 カスタムデータ属性 data attribute
hello world
-
モバイル端末での リンクあれこれ
TELリンク
HTML
<p class="rd-info f26 rd-border"> <a href="tel:00000000000"> <span class="phome-number">TEL: 000 0000 0000</span> </a> </p>
-
長い半角英数字が親ブロックから飛び出してしまう問題へのアプローチ
.hyphenate { -ms-word-break: break-all; word-break: break-all; // Non standard for webkit word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; }
情報源: hyphens | CSS-Tricks
.hyphenate { -ms-word-break: break-all ...
-
responsive pre
pre { white-space: pre-wrap; //css3 white-space: moz-pre-wrap; //firefox white-space: -pre-wrap; //opera 4-6 white-space: -o-pre-wrap; //opera 7 word-wrap: break-word; //internet explorer }関連
-
:before content image のサイズを指定する
:beforeなどの擬似要素を使った画像の場合、widthやheightを指定することができませんが、工夫をすると、サイズのコントロールが可能になります。
コンテンツの背景として画像を設定する
.entry-title:before{ margin:0 10px 0 0; content:" "; display:inline-block; width:80px; height:60px; background:url( http://www.tenman.info/imag ...
-
リンクを無効にするスタイル
No links anchor element with CSS
記述したリンクを無効にしたいといった事がたまにあります。
例えば、
電話番号リンク等を作成した場合、PCではうまく動作しないので、メディアクエリ―を使って、一定のブラウザサイズ以上では、電話番号リンクが動作しないようにするとか
WordPressのプライマリーメニューなどで、親になる項目は、hoverした時に、サブメニューを表示したいけど親ページには飛ばしたくないといったケース等
少し工夫すると、CSSだけ ...