桜咲く地の気まぐれ日記

管理人の半暴走日記です。勢いのまま書いてることもあるので支離滅裂でも生暖かい目で見てくださいな。

BracketsとHTMLタグ

sengenzakura.hatenablog.com

大昔にこんな記事を書いてたのを見つけてしまったので、せっかくだし今の開発環境や参考にしてるサイトを書いてみようかなと思い立った次第。
少しでも誰かの参考になれば幸いです。

開発環境

iMacApache

テキストエディタ

Bracketsが出てからはメインはBrackets。でもJavaScriptいじる時とかに時々Sublime Text使ってる。
お仕事も含めるとメモ帳/CotEditor → Sublime Text 2 → Bracketsって流れで乗り換えてる。

BracketsはSublimeText2と同じショートカット設定ができるし、エディタカラーも似せられるしカスタマイズできるしで慣れるともうサイト開発はこれでいいかな感。
カラーコードをカラーサークルからいじれるのとかすごく助かる。
特にBracketsは最初から日本語検索対応してるから助かるのです。

開発ブラウザ

前はOperaをメインブラウザとして使用してたのですが、中国企業に売却されたためFirefoxにお引っ越し。
でも開発者ツールはChrome系の方が見やすいですね。ただ、Chrome使ってて操作性とかにあまりいい印象を持てなかったのでメインとしては使いたくない。

元々Opera12ラブ勢でもあったのでVivaldiには期待したいところである。
ただまあ、Firefoxで現状困ってないっちゃ困ってない……。

せっかくのMacだしSafariでも良かったんですが、ペンタブのマウスジェスチャー認識するようにってどこかで設定できたり……しないかなぁ。

とりあえず、大体このへんで表示&動作確認しています。

FTPソフト

なんかずっとこれを使ってるな……。

参考サイト

HTML

HTML5.JP
HTML5お勉強するのに何度も通わせていただきました。
ここ以外のサイトの情報と照らし合わせてこういう理解でいいんだろかと悩んだものです(今でも悩む)。
HTMLクイックリファレンス
タグの使い方とか軽く確認したい時とかにこのサイトにぶち当たる……ことが多い気がする。簡潔にまとまっててわかりやすいなーと思ってます。
CSSについてもここで確認できますね!
このタグの中ってなんのタグがかけるんだっけ?
時々忘れる、ど忘れする時に大変お世話になってます。
情報がHTML4系の時のなので、HTML5の情報とも照らし合わせないといけないんですが、まあ大体これでいける。

CSS

Web Design Recipes
marginやfloatとかを理解するのに大変お世話になりました。
それ以外にもWordPress開発の仕方やデザインについてやサイト制作についてもまとめられていて何度か足を運んでいます。とにかくわかり易い文章の上にサンプルもあるので大助かりです。
Codrops
色々なCSSデザインのコードなんかが提供されているサイト。今のサイトの作品ページリンクへのホバー効果(PC版のみ)はここで見つけたものを使用しています。
Ultimate CSS Gradient Generator
グラデーション使うときなんかはこのサイト辺りを使用させていただいてた気がする。視覚的にグラデーション作れるのは大変便利。
Lopan.jp
動くCSSアニメーションの実装例と実装方法がまとめられているサイト。タブ実装の時とか参考にさせていただいてます。
他にもWebサイトの作り方についてもまとめられているみたいです。(そういえばちゃんと見てみようと思って見てみてない……)

その他、検索で出会ったCSSデザインを色々掲載してくださってる皆様。とっても参考にさせていただいてます。


こんなところでしょうか。
JavaScriptは特定のサイトを見るってことあまりしてないよーな気がしたので割愛。