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サイト制作

関連記事

Atomエディタが便利です

今まで使っていたのはDreamWeaver htmlを書くようになって使っていたのはAdobeのDreamWeaverでした。 こちらも使い勝手がよく好きだったのですがAtomエディタが便利とのことで ...

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

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

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

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

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

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

no image

角丸テーブルのスタイル指定

時々使うテーブルの角丸仕様、毎回調べてる気がする。。 ポイントはborder-collapse border-collapse: collapse;ではなくborder-collapse: separ ...