BracketsとHTMLタグ

浅間桜

メモ帳とHTMLタグ | 浅間桜

サイトをいじる時によく参考にするサイト

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

開発環境

iMac + Apache。

テキストエディタ

Brackets

A modern, open source code editor that understands web design

Brackets is a lightweight, yet powerful, modern text editor. We blend visual tools into the editor so you get the right amount of help when you want it. With new features and extensions released every 3-4 weeks, it

Sublime Text 2

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

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

開発ブラウザ

  • Firefox(メインブラウザ)
  • GoogleChrome
  • Safari
  • IE 11 / Microsoft Edge

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

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

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

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

FTPソフト

FileZilla

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

参考サイト

HTML

HTML5.JP

HTML5お勉強するのに何度も通わせていただきました。
ここ以外のサイトの情報と照らし合わせてこういう理解でいいんだろかと悩んだものです(今でも悩む)。

HTMLクイックリファレンス

タグの使い方とか軽く確認したい時とかにこのサイトにぶち当たる……ことが多い気がする。簡潔にまとまっててわかりやすいなーと思ってます。
CSSについてもここで確認できますね!

develo.org

このタグの中ってなんのタグがかけるんだっけ? - develo.org

タグのなかってどのタグいれていいのかまよったときに(大雑把にしかかいてないけど)。

CSS

Web Design Recipes

marginやfloatとかを理解するのに大変お世話になりました。
それ以外にもWordPress開発の仕方やデザインについてやサイト制作についてもまとめられていて何度か足を運んでいます。とにかくわかり易い文章の上にサンプルもあるので大助かりです。

Codrops

Codrops

Codrops is a web design and development blog that publishes articles and tutorials about the latest web trends, techniques and new possibilities.

色々なCSSデザインのコードなんかが提供されているサイト。今のサイトの作品ページリンクへのホバー効果(PC版のみ)はここで見つけたものを使用しています。

ColorZilla

Ultimate CSS Gradient Generator from ColorZilla

A powerful Photoshop-like CSS gradient editor

グラデーション使うときなんかはこのサイト辺りを使用させていただいてた気がする。視覚的にグラデーション作れるのは大変便利。

Lopan.jp

Lopan.jp

Webデザインとかサイト制作について、知ってる事知らない事を展開するサイト。リニューアルしたて!

動くCSSアニメーションの実装例と実装方法がまとめられているサイト。タブ実装の時とか参考にさせていただいてます。
他にもWebサイトの作り方についてもまとめられているみたいです。(そういえばちゃんと見てみようと思って見てみてない……)

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

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

コメントを残す

応援する