もみのころぐ

テーブルレイアウトしか知らんババアが、慣れないツールいじって脳みそのリハビリをする美貌…おっと備忘録。

WEB・WORDPRESS

俺メモ:死なないように、CSSスタイリングのコードコピペ元になるサイトをメモる

投稿日:2018年3月10日 更新日:

ババアは耄碌してて、何をやってもうまくいかないので、コードのパクリ元をメモっとく。順番にベンキョーすっしかねえなあ。
そのうち、HTML+CSSのベーステンプレがあるサイトとか、サイトデザイン集めたとことかもメモっとこう。

コピペで実装!すぐに使えるCSSサンプルコードまとめ
リンク先ページも外部リンクをまとめたリスト。
「ボタン/見出し/テキスト/メニュー/フォーム/チェックボックス/ラジオボタン/タブ/モーダルウィンドウ/テーブル」の10品。リンク先の外部リンクには、読み込みに超絶時間かかるサイト複数。

コピペでデザイン!簡単マテリアルデザイン風コードまとめ
「カードUI/ボックス/ボタン/ポップアップ/メニュー/フォーム/検索/チェックボックス/ヘッダー」

コピペで使えるCSSデザインサンプル集(Web用コード250個以上まとめ)
いつも頼りになるサルワカさんのサイト。
「ボタン/リスト(箇条書き)/見出し/ボックスデザイン/リボン/引用/吹き出し/パンくずリスト/ウォシュレット/CSSが効かないときは?」

地味に使えるCSS小技のメモ&サンプル集
情報が古いので、モダンブラウザでOKな場合はむしろ見ない方が吉なのだが、最近ババアが質問されて困った骨董品サイト対応のときに参考になったサイト。
IE6での!imporantのバグを使ったテクニックだの、heightにアンダーバー付けるだの、耄碌ババアが現役の時代でも使ったことねーわ。でも、こーゆーページが生き残ってて助かる。

●●っぽい表現ができる「CSS3」サンプル集
しょっぱなの「高級フレンチのメニューっぽい見出しデザイン」をあとで読んどく。

ここまで動かせる!楽しいcss アニメーションのサンプル集
「アニメのようにテキスト下の画像を移動させる/映画のように文字や画像に遠近感を出して動かす/動く斜線プログレスバー/文字をバウンドさせながら表示する/文字を一瞬だけ反射させる/カウントダウン/アニメーション/transform(変形)の種類/左右に広がるプリローダー/文字を遅延させ表示/動くテキストリンク/オープニングを連想させるテキスト/モーダルウィンドウ2つ/アウトラインを使ったボタンエフェクト」

-WEB・WORDPRESS

執筆者:

関連記事

公式テーマ「Habakiri」をカスタマイズ(1)

出来心でHabakiriをいじってみました。Habakiri…どう見ても「腹切り」か「はばかり」です。でも、まかせて安心、WordPress公式テーマなんですよ、奥さん! 一応、なんかコーポレートサイ …

画像にCSSでリボン飾りを付けようとしたらできなくて死ぬ

よくありがちな、画像にCSSでリボンっぽいものが付いてるものを作ろうとしたら、できなくて死んだお話。もうね、耄碌ババアは生きてんのイヤになりますよ。何をやってもうまくいかない;;まあ、そもそもCSSが …

公式テーマ「Habakiri」をカスタマイズ(3)

『公式テーマ「Habakiri」をカスタマイズ』の3回目です。グローバルナビゲーションを、これまたありがちなタイプに整え、ヘッダーに「電話番号」や「お問い合わせ」ボタンを仕込みます。またフッターのコピ …

公式テーマ「Habakiri」をカスタマイズ(2)

『公式テーマ「Habakiri」をカスタマイズ』の2回目です。コーポレートサイトっぽくするために、まず、トップページによくありがちなスライドショーを組み込み、スライドショーの下に、3カラム分の情報エリ …

公式テーマ「Habakiri」をカスタマイズ(4)

『公式テーマ「Habakiri」をカスタマイズ』の4回目、最終回です。トップページに、投稿データのカテゴリ毎に新着情報を表示します。 目次1 新着情報をフロントページ上にリスト表示する1.1 func …