サイト制作メモ

cssで作るタイトルやテキストの装飾色々メモ

投稿日:2018年7月5日 更新日:

タイトルの背景を斜めボーダーにしたい

斜めボーダー背景。
色の組み合わせで色々な雰囲気がつくれる。
ただ、背景に柄が入ると中のテキストが読みにくくなるので、色は注意!
HTMLは入れ子にしています。

タイトルの背景を斜めボーダーにしたい

タイトルの左右に画像を配置

デザインとしてはよくあるボーダーと、画像配置バージョン。

タイトルの左右に画像を配置

タイトルの左右にボーダー

前後に線がひいてあるのも使いやすいです。
テキストはセンターで使うのがバランス良いですね。

タテキストにグラデーションをかけたい

テキストにグラデーションをかけたい。
複数行にした時、iphoneで2行目以降グラデが表示されずテキストも見えない現象が起こったが、グラデのテキスト切り抜きの指定が原因ではなくその他の書き方が原因だったようだ。

- サイト制作メモ

関連記事

cssでlistのborderを斜め線にする

このサイトのメニューでも使ってますが、やってみたかったけどなかなか方法が見つけられなかったリストの区切り(border)を直線でなく斜め線にする方法。 まずはHTMLでメニュー作成 普通にリストで作成 …

display:flexを使った時のIE10のバグに対応する

display:flex;を使った時、IE11では問題なくてもIE10で見ると色々な不具合が生じることが多い。 例えば、このサイトのレイアウト。 クロームで見るとこんな感じ まぁまぁ均等に並んでいるよ …

cssだけでドロップダウンメニューを実装(軽い!)

ドロップダウンメニューをcssだけで実装できる方法があるらしい。 jsファイルの読み込みがないなら軽くていいなぁと思いやってみた。 cssでドロップダウンメニューサンプル まずはhtml 一般的な入れ …

WordPress と Facebookの連携が表示されない原因

dddwordpressのテーマ「xeory_extension」を使っていた時 初期設定でいくつかの項目を入力するとfacebookとの連携ができるようになってたのでテストサイトで設定項目を入力する …

拡大してもボヤけない、アイコンフォントが便利すぎる

サイト作成の時にメニューアイコンを作っていたけど 3つのメニューのうち1つをアイコンフォント使ってたら表示の鮮明さに驚いた。 他のアイコンはpng形式の画像だったけど全然違う。 通常、画像でできたアイ …

翻訳する