サイト制作メモ

投稿日: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テーブル変換

- サイト制作メモ

関連記事

背景画像を複数指定する方法(css)

背景画像を複数指定したい時があり調べてたところ 順番にcssを指定するところまでは分かったけど書き方がよく分からない・・・ 複数背景の使用はよく使いそうなのでメモ。 基本的には,(カンマ)区切りで続け ...

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

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

パーマリンクの設定

stinger8のダウンロードサイトにはパーマリンク設定を"postname"にしているとあったのでそのように設定してみた。 で、実際に新規で記事を追加すると 記事のタイトルが反映されURLは以下のよ ...

display:flexを使った時のIE10のバグに対応する

display:flex;を使った時、IE11では問題なくてもIE10で見ると色々な不具合が生じることが多い。例えば、このサイトのレイアウト。クロームで見るとこんな感じまぁまぁ均等に並んでいるように見 ...

スライドショーの画像を切り抜いたように表示する

よくあるスライドショーで 上だけ丸みを帯びていたり、波打っていたり、三角になっていたりと フレームの中でスライドショーが動いてるやつがやりたくて調べていたところ意外と簡単にできることがわかった。 次回 ...

翻訳する