作成者別アーカイブ: sa-ka

sa-ka

sa-ka について

旧ブラウザがターゲットに含まれた制作が多いので、参加者のなかでは数少ない重度のpolyfill使いですが、lessの愛好者でもあります。

学習履歴:

職業:

ソースコード

Sublime Text 2を使ってみよう!

エディタのお話です。 

これまで「Dreamweaver」や「Aptana Studio」を使いコーディングをしていました。
最近使ってみた「Sublime Text 2」は使い勝手がよく、これからメインのエディタとして使っていけそうな感じでした。

慣れていたエディタを変えるのは決心がいりますが、今「Dreamweaver」を使っている人の導入のきっかけになれば、と。。

導入手順

導入作業は5ステップ。各ステップで行う作業は下記の内容です。

1. 「Sublime Text 2」のダウンロード

Windows版、Mac版、Linux版があります。OSが違っても同じ作業環境を作れるので魅力的です。

2. メニューの日本語化

sublime text2はメニューなど全て英語です。
日本語化ファイルを使うことで、一部日本語化できます。
(必須ではありません)

3. 日本語インライン入力への対応

Windows版は、日本語をインライン入力できないので、対応できるようにします。
(Mac版の方は不要です)

4. パッケージをインストールするための準備

「Sublime Text 2」にはパッケージと呼ばれる、プラグインのようなものがあります。
追加することで、HTML入力時の自動補完など機能追加をすることができます。
このステップでは、パッケージのインストールや管理を簡単に行うための、機能拡張を行っておきます。

5. パッケージのインストール

パッケージをインストールして、機能追加を行います。

導入には下記の記事が参考になりました。
http://yuuki-arc.jugem.jp/?eid=35
http://tnnsst35.com/2012/12/13/sublime-text2%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%A6%E3%81%BF%E3%82%8B/
http://lab.sonicmoov.com/markup/649/

Dreamweaverに近い使い勝手にする

パッケージは検索するとかなりの数あります。
「Dreamweaver」に近い使い勝手を求めるなら、下記のパッケージを入れておくと良いかと思います。
いつでも、追加できるので必要なパッケージから追加してみましょう。

  • HTML5…HTMLの自動補完
  • CSS Snippets…CSSの自動保管
  • jQuery…jQuery の自動補完
  • SublimeLinter…HTML,CSS,JS のエラーをリアルタイムで指摘
  • Bracket Highlighter…タグの開始タグと閉じタグをハイライト表示
  • AutoFileName…imgタグのsrc属性を記述する際にディレクトリにある画像を相対パスで参照、width 属性と height 属性を自動入力

Dreamweaverの良いところ

「Sublime Text 2」を使ってみて、気づいたのは「Dreamweaver」には下記の良い点があることです。

  • table(テーブル)の作成と編集
  • クリッカブルマップの作成と編集
  • ファイルを移動するとリンクを自動修正

最近は少なくなった作業ですが、テーブルやクリッカブルマップの修正が必要なときは「Dreamweaver」を使っています。
「デザインビュー」を使えるので、ソースコードだけを見ているより簡単に作業ができます。
さすが、高いソフトなだけのことはありますね。

また、余談ですが「vintage」モードを使うと、vimのような操作もできるらしです。
時間のある時にでも試してみようかと思いました。

今更聞けない!レスポンシブWebで役に立つ!6つのCSSリセット

レスポンシブWebデザインをしていると、スマートフォン向けに指定したCSSの値を、PC向けCSSではリセットしないと上手くいかない(?)のような場面に遭遇します。

そんな時、CSSの値に初期値指定してリセットする方法を知っておくと役に立ちます。
特に目新しいものはありませんがレイアウトをする上で、これからお世話になりそうなので自分用メモです。
これもよく使うとか、知っておくと良いよ!というものが他にもあったら教えていただけると嬉しいです。

「max-width」の初期値が「none」に対して、「min-width」の初期値は「0」です。
プロパティ名が似ているので同じ初期値を指定してしまいがちです。
間違えやすいポイントかと思いますので、注意が必要ですね。

あと番外編メモとして、リセットではありませんがIE6以外のブラウザ向けに指定を行いたい場合、下記のような記述を使うと便利です。
セレクタを「>」で区切る子セレクタを対象とした記述方法は、IE6には対応していないので、結果としてIE6以外のブラウザに向けた指定となるわけです。

レスポンシブWebデザインだから迷う?IEと共存するためのポイント!

レスポンシブWebデザインを考える際に、IE8以前(IE8~6)の古いブラウザについて、どのように対応するかを考えてみました。
どうすれば、手間が少なく古いブラウザへの対策ができるのか?
レスポンシブWebデザインを作る際の覚書です。

制作のための前提条件

考えるにあたって、下記の条件のクリアを前提としました。

  • 旧ブラウザはIE8~IE6を含める。
  • IE8~IE6でもCSS3使ったデザインを行う。
  • IE6でもpng画像を使用する。
  • デバイスはスマートフォン、タブレット、PCの3種類を想定する。
  • CSSはモバイルファーストを考慮にいれた記述方法とする。

日本ではまだまだWebページを見るためにIEを使う人が多いです。
デザイン面を考えるとCSS3を使っている場合、ChromeやFirefoxとIEを比べたときに見た目が変わってしまうことがあります。
その辺りの事情は、見る人にはなかなか理解してもらえない現状もあるので、jsライブラリの利用で透過png画像やある程度のCSS3を使えるようにして解決してしまおうというワケです。
また、制作者としてはモバイルファーストも意識したいという気持ちあったりします。

レスポンシブに「必要なこと」「不要なこと」

レスポンシブWebデザインと言うと、デバイスごとに異なるデザインになることに意識が向きがちです。
過度に「レスポンシブ」というキーワードに振り回されていないか、制作の際に必要なこと不要なことをざっくりと切り分けてみました。

「必要なこと」
スマートフォン、タブレット、PCの異なるデバイス間で、それぞれに適したデザインで表示される。
「不要なこと」
PCでブラウザ幅を変えたときに、デザインが変わる。

異なるデバイス間での表示に適したデザインにすることは必要なことですが、PCでブラウザを幅を変えた時にデザインが変わることは必ずしも必要なことには思えませんでした。
その理由としては、PCではわざわざブラウザの幅を狭くして、タブレット用のデザインでWebページを見ることはほとんどないからです。

レスポンシブの対象は@media queryに対応しているブラウザ

「必要なこと」「不要なこと」の切り分けができれば、闇雲なレスポンシブに走ることもなく、デザイン、技術の面で必要な対応が見えてきます。

  • PCでは、PC向けのデザインを見せる。(固定幅のデザインを見せることが出来れば良い)
  • IE8以前のブラウザを搭載したスマートフォン、タブレットがない。

「不要なこと」で切り分けたことを元に、PCでは固定幅デザインを見せるようにします。

また、IE8以前のブラウザを搭載したデバイスは、PC以外には無いことも考慮すると、無理にjsライブラリでIE8以前の環境で@media queryに対応する必要はなくなりますね。

制作の際はIE8以前ブラウザ向けに、固定幅の専用CSSを用意して条件分岐コメントを使って読み込めば大丈夫です。
(モバイルファーストなCSSの記述にしなければ、固定幅専用のCSSを用意する必要はなくなりますが、この辺は個人的なこだわりです。)

画像の扱いから気づいたこと

他に気づいたこととしては、@media queryに対応していないブラウザは「background-size」にも未対応です。
そのため、フルードイメージへの対応も難しく中途半端になってしまいます。

Webサイトを制作する上で、画像を全く使わないということもほとんどないので、フルードイメージに対応出来ないブラウザは、@media queryにも対応しないという制作方針にしてしまうのも1つの方法かなと考えました。(でも、border-radiusなどのCSS3は使いたいので、その辺はjsライブラリで何とかしてしまいます)

画像について考えると、「Retinaディスプレイとか高解像度ディスプレイはどうするの?」という疑問が出てきますが、長くなりそうなので、他の記事としたいと思います。