Webサイト制作

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

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

スタイルなどの装飾

ボタンのホバーアニメ

バリエーションが豊富です。デザインのヒントに

角丸とシャドウのジェネレーター

見た目で調節したらプレフィックスまで書いてくれる。
border-radiusはもういらないんだっけ。

グラデーションジェネレーター

時々グラデーションは記述がめんどうなのでこれで。向きや色の入替えもできて便利です。

CSS三角形作成ツール

border使った三角って、どうやって書くんだっけ?となった時に

吹き出し作成のジェネレーター

書くの面倒だったり忘れたりとかよくあるのでジェネレーター便利です

簡単なタブ切り替え

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

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

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

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

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

Pinterestもおすすめです

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

その他

技術などの情報といえばcoliss

更新頻度も高く、知らない情報がたくさんあるので勉強になる。

デザインならphotoshopvip

デザイン関係の情報ならここ。photoshopの便利な機能とかある。
使ってるバージョン違うけど参考になる方法があったりして面白い

flexbox

めちゃくちゃ使うflexbox。
よく使うけど、記載方法とか全部は覚えていないのでやりたい事に合わせて調べて使います。
flexの使い方に迷ったらここ。基本がしっかり分かるし、記事がわかりやすい。
display:gridもかなり自由度高く便利なので使ってみたいけど、IE対応じゃないからまだ実務では使いにくいかなぁ。

cssのセレクタ

意外と知らないcssのセレクタ。
便利な使い方がいっぱいある

エクセルのテーブルをhtmlに変換したい時

余計なタグが入るのはちょっと嫌なんですが、今のところはここが好きです
最後に置換などで余計なタグは消して使います。

- Webサイト制作

関連記事

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

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

"Swiper"を使ったスライドで左右に画像を表示する

JQueryなしで動く"Swiper"という便利なプラグインを使ってのスライドショー。 左右に画像を表示したい時の注意点をメモ。 ダウンロードはこちらから swiper公式サイト 使う中ですごく分かり ...

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

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

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

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

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

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