vertical-alignとtext-alignは違うのだよ
vertical-align の使い方がよくわからなかったので調べてみました。text-align と名前が似ているので同じように使えるものだと思っていたのですが、かなり別物だったので忘れないようにまとめておきます。 …[続きを読む]
絶対パスと相対パスとルート相対パスのメリット・デメリット
スタイルシートで画像などを指定する場合にはパスを記述する必要がありますが、絶対パス、相対パス、ルート相対パスの3つの方法があります。 …[続きを読む]
ブログで背景画像を使うには
WordPress のサイドバーのドロップダウンをお洒落にカスタマイズするため背景画像について調べていたのですが、background-image などの使い方をよく知らなかったのでまとめてみました。 …[続きを読む]
divにtext-alignは効かないよ？
SNS ボタンやページネーションなどのブログカスタマイズに関係する要素を中央揃えにする場合、text-align:center; を指定しても効かないといった話をよく聞きます。最悪、マージンやパッディングをがんばって設定すればそれらしくなりますが、もっとスマートな方法で解決したいですよね。今回はこの解決方法と、簡単な text-align に関する解説をしたいと思います。 …[続きを読む]
擬似要素before、afterと併用するcontentプロパティ
content プロパティは要素の前や後ろにテキスト・画像を挿入する際に設定します。このプロパティを使用する場合には、擬似要素である ::before または ::after を併せて使います。例えば次のようになります。Yahoo ニュースなどで一度は見たことがあるのではないでしょうか。 …[続きを読む]
SNSボタンに必須！CSSだけで吹き出しを作る
ツイッターなどでの拡散を期待してブログに SNS ボタンを設置するのはもはや定番になりましたが、デザインに使われる吹き出しは画像を使わないでも実現することができます。最近は吹き出しジェネレータが Web サービスとして公開されているので仕組みを知らなくても導入できるのですが、細かい位置調整などをしようとするとある程度原理を理解していないと厳しいと思います。 …[続きを読む]
CSSのみで三角形を作るには
WordPress のサイドバーでドロップダウンの CSS のカスタマイズに三角形が必要になったので調べてみました。画像を使っても実現できますが、色やサイズを簡単に調整できたり、アニメーションができたりとメリットが多いです。画像より容量も縮小できますしね。使うのは border プロパティです。 …[続きを読む]
positionプロパティのabsoluteとrelativeにはどんな違いがあるのか
要素の配置を指定するプロパティである position ですが、ネットではなんだかわかりにくいとの声が結構聞こえてきます。私も同様に感じていたので、気合を入れて調べてみました。最近ではレスポンシブデザインにも多用されているようなので、避けては通れません。結論を先に言ってしまうと、親：relative・子：absolute の組み合わせと fixed、このふたつを理解しておけばいいのでは？ …[続きを読む]
HTML5でブロック要素・インライン要素による分類が廃止された件
HTML4.01 では要素はブロック要素とインライン要素のいずれかに分類されていましたが、 HTML5 ではコンテンツモデルによって要素を分類するように変更されました。今まではインライン要素のなかにブロック要素を置いてはいけないというルールがあり、HTML 経験の長い人であれば感覚的に何をどこに入れてはいけないかわかっていると思いますが、これがカテゴリー・コンテキスト・コンテンツモデルによってより明確に定義されることになりました。 …[続きを読む]
ブログにシンプルな表を作ってみる
データを並べて説明するためには表が欠かせません。エクセルで表を作ってスクリーンショットを画像として貼り付けるほうが簡単ですが、記事を読みにきてくれたユーザーが見やすいようにがんばって設定してみました。シンプルですけど。 …[続きを読む]
直下の子要素にだけスタイルを指定するCSSセレクタの書き方
広告の画像を横に並べて表示しようとスタイルシートを書いていたのですが、DIV タグに class 属性を付けずに手を抜こうとしたところ、後になってどのように CSS セレクタを記述したらいいのかものすごい悩んだ、というしょうもない話です。クラス名とか関数名とか、いっつも悩むんですよ。 …[続きを読む]
登録フォームでよく見るプルダウンメニューの使い方
複数の項目からひとつを選ぶときに使うプルダウンメニューは、やることはラジオボタンと同じなのですが、場所を取らずにすっきりとしたレイアウトに仕上げることができます。立ち上げたばかりの超弱小な当ブログにはあまり関係ありませんが、何年もの間ブログを運営し続けると、アーカイブが数十行にもなってしまい、 …[続きを読む]
簡単だけどWordPressのデザインに統一感をだすリンクの装飾
WordPress でテーマを自分で作ったとき、がんばってデザインを考えたのにリンクの色などが気に食わない場合にお役に立ててください。最近は CSS を使ってかっこいいアニメーションなどで装飾したりする場合も多いでしょうが、今回の方法ならかなり簡単にカスタムできます。 …[続きを読む]
