お品書き
書き直し中…
とりあえず、中へどうぞ
↓↓↓
スポンサーリンク

CSS

WEBデザイン

上下左右の中央寄せ(中央揃え)まとめ覚書

どうしても、忘れてしまって、毎回調べる事になって無駄な時間を使うので、まとめ覚え書き。(1)領域内のコンテンツの中央揃え(1)-b 内側の領域をinline-blockに(1)-c 外側の領域のpaddingで攻める(2)領域の中央寄せ(左右marginを自動設定に)(3)tableを使う(4)display:table-cellを使う(5)Flexboxを使う
WEBデザイン

CSSでも変数が使える(ただしIE非対応)

CSS内でも実は変数が使えます。 書き方は セレクタ { --好きな名前:値; } 使う時 var(--好きな名前) ◆具体例1 宣言 p { --haba:300px; } ...
WEBデザイン

バナー広告の下にできる余分な隙間をなくすには?

サイドバーに広告ウィジェットを置いていますが、A8やもしもの広告を貼ったら、下に謎の隙間ができてしまうように。 まぁ気にするほどでもないと言えばないかも知れませんが・・・ ・・・気になる~(笑) 下に貼ってみます、環境によ...
WEBデザイン

iFrameの高さを自動取得する【Javascript】【覚書】

このブログは、上部に"黒板"状のイメージで、「お品書き」を設置しています。 このデザインに拘りがあってそうしているのですが、 しかし、最初に読み込まれるデータが、その分無駄に多くなるわけで、SEO的には良くないという説もあるわけ...
WEBデザイン

CSSのFILTERプロパティのTEST グレーにした画像をカラーに戻せるか?

ちょっと分かってきた、画像編集と一緒で、一度掛けてしまった効果をあとから除去することはできないっぽいですね。 一度ボカしてしまった画像を、ぼかしを無効にして元に戻すことができないのと同じか。 外側の領域でグレースケール(gray...
WEBデザイン

画像編集ソフトを使わずCSSだけで画像をグレーにできる

img{filter:none;} 存在は知っていたもの、使ったことなかった、CSSのFilterプロパティ 使ってみたらめっちゃ面白かった (※でも非対応ブラウザ多し) ブログのデザインをグレー階調にしたくて、デザ...
WEBデザイン

WordPressの改行問題 最終結論 【なんだコレで良かったんだ】

WordPressには自動改行問題というのがありました、これに関しては、使いたくなければ機能を停止してしまえばOKですね。 ⇒ WordPressの改行問題の解決方法 しかし、自動改行はしてほしくないけれど、機能を切ってしまうと...
WEBデザイン

Flexbox と Gridレイアウトの使い分け

#grid_con{ display: grid; display: -ms-grid; grid-template-rows: 20px 20px 20px 20px 20px 20px 20px 20px 20px; ...
WEBデザイン

Gridに挑戦 ライン指定型

Gridレイアウトの指定の仕方は二種類、エリア名で指定する方法と、ライン番号で指定する方法がある。 エリア型のほうが分かりやすそうなので、それでやってみた。 前回Gridレイアウトのエリア名による指定の仕方を試したので、今回はライン...
WEBデザイン

ベンダープレフィックスを自動で入れてくれるサービス

Flexboxやグリッドレイアウトなど、比較的新しい機能を使おうとすると、古いブラウザでレイアウトが崩れてしまう事がよくあります。 そのため、WEBデザインが完成したあと、できるだけ多くのブラウザで表示を確認、ということが必要になりま...
WEBデザイン

gridレイアウトに挑戦 ー エリア名指定型

Flexboxがある程度分かったので、次はGridレイアウトに挑戦 FlexboxとGridレイアウトの違いと使い分けは後回しにするとして。 とりあえずGridレイアウトを作ってみた。 Gridレイアウトの指定の仕方は二種...
WEBデザイン

box-sizing:border-box; は子要素に継承されない

今更なのですが、ボックスサイジングの話(おさらい) ボックスサイジングとは? デフォルトでは、box-sizingの値はcontent-boxになっています。 content-boxだとどうなるか? ボーダー(枠...
タイトルとURLをコピーしました