CSS

スポンサーリンク
IT

CSSで見出しに背景画像をレイアウトするいくつかのやり方/background-repeat、position、sizeの使い方

フォントアイコンや画像の挿入などでも画像付きの見出しは作れますが、オリジナルの画像を使おうと思ったら、大体の場合は背景画像に設定することになります。そのやり方について詳しく見ていきましょう。
IT

CSSでテキストの下線(アンダーライン)を表示する・消す方法/text-decorationプロパティの使い方とサンプル

リンクなどに表示される下線は、設定次第で出したり消したりすることができます。また、点線などにすることも可能です。
IT

htmlとCSSでランディングページ(LP)トップビューを作ってみた(その①)

実践編として、実際によくある感じのトップビューを作ってみようじゃないか、というページです。ブロック単位でまとめてあるので、他のサンプルと組み合わせて素材を入れ替えることでそのままサイトに使うことも可能です。
IT

cssライブラリでwebサイトにアイコンを埋め込む方法/font-awesomeの使い方

font-awesomeは超メジャーなアイコンサイトで、比較的簡単な手順でサイトにアイコンを埋め込むことができます。これが意外とサイトのイメージをグッと引き上げる効果があるから不思議なものです。アイコンにはアニメーションを付けることも可能で...
IT

CSSでul・ol・liの箇条書きの点を消す、編集する、別のものに変更する方法/list-style-typeプロパティ(他)の使い方

htmlでulタグを使えば自動的に頭に「・」が付き、olを使えば自動的に数字が振られます。この点とナンバリングをどうにかしよう、というコーナーです。
IT

CSSで文字や画像横中央に文字や画像を合わせる方法/vertical-alignの使い方

CSSで要素の縦位置を決定する方法はいくつかあります。横方向に比べて意外と難易度が高く、実際にやるとうまくいかなかったりもしますが、そんな中でももっとも厄介なvertical-alignを使った文字と画像の位置調整について解説します。テーブ...
IT

CSSでレスポンシブのマルチカラムレイアウトを作る方法/Flexboxの使い方

CSS Flexboxはその名のとおりfrexibleにレイアウトを組むことを目的とした、比較的新しいCSSのプロパティです。本来floatは画像の横に文字を回り込ませるような目的のプロパティであり、現在ではマルチカラムレイアウトを作る際に...
IT

CSSで要素を斜体にする、傾斜させる方法/transform:skewプロパティの使い方

文字の斜体をイメージしてもらえるとわかりやすいかと思いますが、あのようにx軸、y軸で要素を斜めに歪めるためのプロパティがtransform:skewです。
IT

CSSで要素を上下左右にアニメーション付きで動かす方法/transform:translateの使い方

CSSで要素を「ズラす」には、paddingやmarginで要素との距離を取るという方法がまずあります。しかしこれだと他の要素に対しても影響を及ぼしますし、レイアウト崩れを起こす可能性もあります。そういう心配がないのがtransform:t...
IT

CSSで要素を傾ける、回転させる方法/transform:rotateの使い方

transform:rotateはtransformプロパティの一種で、値の「角度」を指定することが可能です。