HTMLで作る入力フォームの作り方まとめ/form、inputタグの使い方
htmlとCSSでランディングページ(LP)トップビューを作ってみた(その①)
実践編として、実際によくある感じのトップビューを作ってみようじゃないか、というページです。ブロック単位でまとめてあるので、他のサンプルと組み合わせて素材を入れ替えることでそのままサイトに使うことも可能です。
cssライブラリでwebサイトにアイコンを埋め込む方法/font-awesomeの使い方
font-awesomeは超メジャーなアイコンサイトで、比較的簡単な手順でサイトにアイコンを埋め込むことができます。これが意外とサイトのイメージをグッと引き上げる効果があるから不思議なものです。アイコンにはアニメーションを付けることも可能で...
photoshopで画像の色を違う色に変更する方法/色の置き換えの使い方
photoshopでは、特定の色を違う色に置き換えることが可能です。近似色も選択されてしまうため、必要に応じて範囲の選択と合わせて行います。
CSSでul・ol・liの箇条書きの点を消す、編集する、別のものに変更する方法/list-style-typeプロパティ(他)の使い方
htmlでulタグを使えば自動的に頭に「・」が付き、olを使えば自動的に数字が振られます。この点とナンバリングをどうにかしよう、というコーナーです。
CSSで文字や画像横中央に文字や画像を合わせる方法/vertical-alignの使い方
CSSで要素の縦位置を決定する方法はいくつかあります。横方向に比べて意外と難易度が高く、実際にやるとうまくいかなかったりもしますが、そんな中でももっとも厄介なvertical-alignを使った文字と画像の位置調整について解説します。テーブ...
CSSでレスポンシブのマルチカラムレイアウトを作る方法/Flexboxの使い方
CSS Flexboxはその名のとおりfrexibleにレイアウトを組むことを目的とした、比較的新しいCSSのプロパティです。本来floatは画像の横に文字を回り込ませるような目的のプロパティであり、現在ではマルチカラムレイアウトを作る際に...
jQueryでボタンを押すと目的の場所までスライドするリンクナビ(目次)を作る方法/offsetメソッドの使い方
目的の場所にリンクさせたいだけなら、要素にIDを付けておき、リンク先にID名を指定するだけで事足ります。しかしアニメーションしながらとなると、jQueryで「要素の高さ」を取得する必要が出てきます。
CSSで要素を斜体にする、傾斜させる方法/transform:skewプロパティの使い方
文字の斜体をイメージしてもらえるとわかりやすいかと思いますが、あのようにx軸、y軸で要素を斜めに歪めるためのプロパティがtransform:skewです。
CSSで要素を上下左右にアニメーション付きで動かす方法/transform:translateの使い方
CSSで要素を「ズラす」には、paddingやmarginで要素との距離を取るという方法がまずあります。しかしこれだと他の要素に対しても影響を及ぼしますし、レイアウト崩れを起こす可能性もあります。そういう心配がないのがtransform:t...
CSSで要素を傾ける、回転させる方法/transform:rotateの使い方
transform:rotateはtransformプロパティの一種で、値の「角度」を指定することが可能です。