サイト制作メモ

サイト制作に役立つ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テーブル変換

- サイト制作メモ

関連記事

cssでlistのborderを斜め線にする

このサイトのメニューでも使ってますが、やってみたかったけどなかなか方法が見つけられなかったリストの区切り(border)を直線でなく斜め線にする方法。 まずはHTMLでメニュー作成 普通にリストで作成 ...
no image

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

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

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

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

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

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

IE10で要素がはみ出してしまう時の対処法

なぜかIEだけ特定の要素がはみ出てしまうことはありませんか?私はよくあります。 ページ作成をしていてブラウザチェックをしているとよくぶち当たるこの問題。 何度か解決してるけど、しばらくしたら忘れてしま ...

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

翻訳する