サイト制作メモ

サイト制作に役立つTips_リンク集

投稿日:2019年1月17日 更新日:

スタイルなどの装飾

ボタンのホバーアニメ。
バリエーションが豊富です。デザインのヒントに
【保存版】CSSだけで作れるホバーアニメーションボタン総まとめ

見た目で調節したらプレフィックスまで書いてくれる。
border-radiusはもういらないんだっけ。
角丸とシャドウのジェネレーター

よく使うグラデーションはこれで。
グラデーションジェネレーター

デザインの参考になるサイト

サイト全体のデザインの参考になります。
81-web.com/

縦長サイトのデザイン。
キレイなサイトがたくさんある
muuuuu.org/縦長サイトのデザイン

バナーデザイン、迷ったらこの辺りがおすすめ
retrobanner
banner design archive

ランディングページも色々。めっちゃ参考になる
webdesignclip

その他

よく使うflexbox。
flexの使い方に迷ったらここ。基本がしっかり分かる。
display:gridもかなり自由度高く便利だけど、対応ブラウザ少ないからまだ実務では使いにくい。
flexboxの使い方

意外と知らないcssのセレクタ。
便利な使い方がいっぱいある
【CSS】実はこんなに便利!cssのセレクタ指定方法をちょっとだけ掘り起こしてみた

エクセルのテーブルをhtmlに変換したい時
余計なタグが入るのはちょっと嫌なんですが、今のところはここが好きです
最後に置換などで余計なタグは消して使います。
ExcelからHTMLテーブル変換

- サイト制作メモ

関連記事

no image

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

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

cssだけで画像をテキストの形に切り抜き表示してみる

面白かったのでメモ。 テキストの形に切り抜くやつです。 どこかで使えそう。 まずはhtml 何でもいいので適当なクラスか何かあたえておいてください。 <p class="text-kirinuk ...

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

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

jQueryで実装!画像の無限ループスライダー

よくサイトで見かけるイメージ画像がひたすら流れるやつをサイトに実装したいと思い調べたところ、下記のサイトに使いやすそうな無限ループスライダーがあったので実装。 jQueryで無限ループスライダー 無限 ...

ページ読み込み時にフェードインのエフェクト【超簡単!】

jQueryの取扱が苦手な私でもすぐに実装することができたフェードインエフェクト。 トップのイメージ画像の上にテキストをふわっと表示させたいなーと思い調べてたら、かなりシンプルな記述でフェードインエフ ...

ゆずむ自己紹介画像
name:ゆずむ
作業時間は平日9:30~17:00です。

翻訳する