カテゴリー：css
flexbox インストールなど面倒なことなしにDIV BOX を横に並べるクラス
flexbox は、div の box を横に並べるためのブラウザに標準装備されてるクラス。乱暴な言い方すればそういうことです。現場では細かいことはどうでもよくて、とにかく簡単に DIV BOX を横に並べることができればなんでもいい。…
詳細を見る携帯の時に内容を非表示にする css
携帯の時に内容を非表示にしたい場合、クラスを指定しておいて、@medeia を使用し、クラスを非表示設定にしてしまえばOKです。具体的には、こんな感じになります。 ：…
詳細を見る案外忘れるボックス内で位置を調整できるボックスの書き方
背景画像を持ったBOXの上で文字などをいれて、文字の場所を調整することは結構ありますが。わすれる(笑）外側の DIV BOX は、position: relative;height:256px;width…
詳細を見るcss ボタン hover で色を変える
css の単純なボタンが欲しくなることはよくあります。角の丸い枠の中にテキストを入れるタイプのものです。例えば、こんなやつこんなボタンこれ、書き方をちょっと間違えるとはまります(笑）HTML側…
詳細を見るcssで作るシンプルな見出し枠
最近のテーマの見出しって昔みたいに枠付けたりとか華美な枠が付かないものが多くなってきました。記事メインってことだからそりゃそうだと思うんだけど、それでもシンプルな枠を付けたくなります。でも、画像使ったりとかせずにちょこちょこっと…
詳細を見るグローバルメニューのように要素を横に並べる。
最近のグローバルメニューは、横並びが当たり前ですよね？同じように要素を横に並べたくなることは多々あります。bootstrap のような表型を実現する css ユニットも出てきていて、かなり便利ですけど、そこまでやらなくてもサ…
詳細を見るbefore content で設定したアイコン 文字が化ける
before content で設定したアイコン 文字が化けることって結構あります。前のところではでていたのになんで？かなりイラつきます。答えは結構簡単なこと。before content は効いているの…
詳細を見るCSSに慣れてくるとわけがわからなくなるセレクタ
CSSになれてくると、結構高度なCSSを読むようになる。そうなると頭の中でごっちゃになる セレクタ。つまり、ターゲットにしたい場所を指定する方法だね。「なんとか」ってタグと同じスタイルにしたいけど、どう書けばいいんだ？と…
詳細を見るdiv で綺麗に枠に収めるための display:inline-block
div でくくると文章の塊をはっきりさせることができて便利です。が、幅が１００％。これ、こまる。こんな感じになるしぃ ↓横に長～～～いBOXので、その場合は、 inline-block を使い…
詳細を見るol と ul の違い html リスト型表示タグ
html リスト型表示、ol と ul の違いol は、リストの前に順番の数字がつきます。ul は、リストの前に黒丸がつきます。前述のリストを ol で書くとアコーディオンパーツカテゴリー一覧特定カテゴリーの…
詳細を見るtextarea のリサイズ
div のボックスや textarea の耳引っ張って大きくしたり小さくしたりできると便利なことがあるね。まぁ、なくてもいいんだけど。でもそんな場面にでくわしたら、resize を使えばいいんだ。<textar…
詳細を見るクラス の html タグ (要素) にだけ スタイルを設定したい
クラス の html タグ (要素) にだけ スタイルを設定したい。これって、結構わすれすので記録しておきます。つまり、class名 abc と指定した html タグ にだけ影響を及ぼしたい場合だな。<a hr…
詳細を見る