サイト制作メモ

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

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

スタイルなどの装飾

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

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

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

cssで三角作りたい時に
CSS三角形作成ツール

吹き出しとか
css矢印ジェネレーター

簡単なタブ切り替え機能
CSSやjsを使った簡単なタブ切り替え機能の実装

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

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

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

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

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

あとは、Pinterest!
バナーとか、いろんなデザインとかクオリティ高いのが山程出てきます。関連で出てくるやつもいい感じです。
Pinterest

その他

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

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

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

- サイト制作メモ

関連記事

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

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

画面の縦幅いっぱいに背景画像を表示する

画面全体に背景画像を表示するには、 background:url('画像を指定'); background-size:cover; でできますが、 いやいや、一画面だけでなくその下にもコンテンツがあっ ...

サイトのタイトルを画像置換する方法

よくやり方忘れてしまうのでメモ。 サイトのタイトルをh1とかで記述した場合 それを画像置換するための方法は色々あって 評価が分かれるので現時点でいいなと思っているものを。 まずはhtml <h1 ...

mmenuは初心者でも簡単に使えるjQuery plugin|スマホ用メニュー

スマホ用メニューを作成する時によく使っているのがjQuery pluginのmmenuあまりjQuery詳しくない私でも簡単に使えるところが気に入ってます。オプションで色々設定もできるみたいなので、初 ...

動画や連続写真からのアニメーションgifの作成

アドビのサイトにとっても分かりやすく説明されていたアニメーションgifの作り方。 連続写真や動画から簡単に作成できます。 アニメーションgifの作成方法 動画の再生やアニメーションgifのサンプル作成 ...

翻訳する