もみのころぐ

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

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

執筆者:

関連記事

さくらからKDDIホスティングサービスへのWORDPRESS移行で死ぬ

さくらで開発してたWORDPRESSサイトをKDDIホスティングサービスに移行しようとして死んだお話。 まず環境から。 さくらレンタルサーバ(開発環境) PHP 7.1 [標準のPHP] (CGI版) …

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

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

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

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

さらば、Samara Oblastの友よ

このブログはまだ実験中なので、あまり人にアドレスを言っていない。言っていない状態でアクセスとかあるものなのか、Google Analyticsを突っ込んで覗いているのだが、ある日、ロシアからのアクセス …

俺メモ:死なないように、HTML+CSSの無料テンプレダウンロードサイトをメモる

ババアは耄碌してて、何をやってもうまくいかないので、サイト作成用のベースになる、HTML+CSSの無料テンプレダウンロードサイトをメモっとく。 でも、前にちょこっとやったことあんだけど、元々のテンプレ …