HTML+CSSカテゴリー記事一覧

DreamweaverでSass（Compass）を利用する方法

Adobe DreamweaverでSass・Compassを利用する方法の備忘録です。

Gulp・Grunt等でやる方法がありますが、コマンドプロンプト（通称：黒い画面）はちょっと敷居が高いと思われる方も多いと思うので、Adobeユーザーなら大抵入っているDreamweaverの設定方法をお伝えします。

Dreamweaverを利用してWordPressでサイト構築（テーマ開発）することを想定していますが、他のサイト制作でも同様の設定で多分利用できます。

試行錯誤の結果とりあえず動いたという設定方法をご紹介しておりますので、正統なやり方では無いかもしれません。その点ご容赦ください。

2018年2月2日追記

文字コードの関係でエラーになる場合があったため、config.rb、config_prod.rbに以下の一文を追加しました。

Encoding.default_external = “UTF-8”

今回想定するDreamweaverのサイト設定

Dreamweaverのサイト設定が以下のように行われている前提で説明を行います。

今回のサイト設定・構造

サイト直下にwp-content , wp-admin, wp-includes等のファイルがある。
テーマディレクトリを「THEME_NAME」としてテーマを作り込もうとしていることを想定しています（この部分を適宜ご自身の環境に合わせて以降読み替えてください）。

空のディレクトリを作成しよう

以下のように、/wp-content/themes/THEME_NAME/ディレクトリに空のディレクトリを作成します。

scss ディレクトリ

このディレクトリにSassファイルを配置していきます。

css, css/min ディレクトリ

sassディレクトリに配置されたSassファイルがコンパイルされ、生成されたCSSファイルが配置されます（css/minにはminifyされたCSSが配置されます）

fonts, images, js ディレクトリ

とりあえず作ります。Compassが画像等を出力する時に使用するようですが正直よく分かりません（笑）

configファイルを配置しよう

以下Gist からconfig.rbとconfig_prod.rbをダウンロードしてきてテーマディレクトリ直下に配置します。

Gist：Dreamweaverでcompassを動作させようとした時のconfig.rb

https://gist.github.com/onocom/29259b091fdea04e159506bcba6d89ff

config.rb

これはMinifyしない為のコンフィグファイル。このコンフィグが実行されると、最後にMinify用のコンフィグが実行される。

THEME_NAMEディレクトリは適宜書き換えてください。

Encoding.default_external = "UTF-8"

http_path = "/"
css_dir = "/wp-content/themes/THEME_NAME/css/"
sass_dir = "/wp-content/themes/THEME_NAME/scss/"
images_dir = "/wp-content/themes/THEME_NAME/images/"
javascripts_dir = "/wp-content/themes/THEME_NAME/js/"
fonts_dir = "/wp-content/themes/THEME_NAME/fonts/"

output_style = :expanded # :expanded or :nested or :compact or :compressed
sourcemap = true
line_comments = false
relative_assets = true

on_stylesheet_saved do
    `compass compile -c wp-content/themes/THEME_NAME/config_prod.rb --force`
end

Encoding.default_external = "UTF-8"

http_path = "/"

css_dir = "/wp-content/themes/THEME_NAME/css/"

sass_dir = "/wp-content/themes/THEME_NAME/scss/"

images_dir = "/wp-content/themes/THEME_NAME/images/"

javascripts_dir = "/wp-content/themes/THEME_NAME/js/"

fonts_dir = "/wp-content/themes/THEME_NAME/fonts/"

output_style = :expanded # :expanded or :nested or :compact or :compressed

sourcemap = true

line_comments = false

relative_assets = true

on_stylesheet_saved do

`compass compile -c wp-content/themes/THEME_NAME/config_prod.rb --force`

end

config_prod.rb

Minify（圧縮）用のコンフィグ。

なお、output_styleを変更することで様々な出力を選べる。

:expanded ・・・通常のCSS出力
:nested ・・・ネストされたCSS出力
:compact ・・・コンパクトなCSS出力
:compressed ・・・ Minifyされた最も小さいCSS出力

また、sourcemap の設定は.mapファイルを生成するかどうかの指定。
line_comments の設定は、コメントを出力するかしないかの指定になります。

THEME_NAME ディレクトリは適宜書き換えてください。

Encoding.default_external = "UTF-8"

http_path = "/"
css_dir = "/wp-content/themes/THEME_NAME/css/min/"
sass_dir = "/wp-content/themes/THEME_NAME/scss/"
images_dir = "/wp-content/themes/THEME_NAME/images/"
javascripts_dir = "/wp-content/themes/THEME_NAME/js/"
fonts_dir = "/wp-content/themes/THEME_NAME/fonts/"

output_style = :compressed # :expanded or :nested or :compact or :compressed
sourcemap = true
line_comments = false
relative_assets = true

Encoding.default_external = "UTF-8"

http_path = "/"

css_dir = "/wp-content/themes/THEME_NAME/css/min/"

sass_dir = "/wp-content/themes/THEME_NAME/scss/"

images_dir = "/wp-content/themes/THEME_NAME/images/"

javascripts_dir = "/wp-content/themes/THEME_NAME/js/"

fonts_dir = "/wp-content/themes/THEME_NAME/fonts/"

output_style = :compressed # :expanded or :nested or :compact or :compressed

sourcemap = true

line_comments = false

relative_assets = true

テーマディレクトリ直下に配置

上記ファイルを配置するとこんな感じ。

サイト設定でCompassを有効化しよう

サイト設定を開く

Dreamweaverメニュー → サイト(S) → サイトの管理(M)から該当のサイトをダブルクリックして以下の画面を立ち上げます。

CSSプリプロセッサー－一般設定

以下のように設定しておきました。

ファイルの保存時に自動コンパイルを有効にする

をチェック入れとくと勝手にコンパイルしてくれるようです。その他のOutput file Styleやソースマップを生成、ソースコメントを作成などはconfigで設定してあるので無視して良さそう。

Compassの設定をしよう

Compassの設定項目で、

Compassを使用する

にチェックし、

Rubyベースの構成ファイルを指定で先ほど配置したconfig.rbファイルを指定します。

これが出来たら保存をします。

コンパイルされるか確かめてみよう

Sass・Compassの設定がちゃんと動作するか確かめて見ましょう。

scssディレクトリ内に、適当なscssファイル(ここではmain.scss)を作成し、保存します。

数秒待つと

/~~~/main.scss は CSSに正常にコンパイルされました： /~~~/main.css

とうメッセージが「出力」ウィンドウに出力され、以下のファイルが自動的に作成されました。

THEME_NAME/css/main.css
THEME_NAME/css/min/main.css

やったー！出来た！

まとめ

設定さえしてしまえば、DreamweaverでもSassが使えるので大変便利ですね。

黒いウインドウ怖いといって敬遠していたかた、ぜひご活用ください。

config.rb の設定方法でもっと良いやり方があれば教えてください。

Bootstrapで作られたWEBサイトを見たまま印刷(プリントアウト)する方法

Boostrapを使って作ったサイトをPC用の表示で印刷したい！

Bootstrap利用して構築してあるWEBサイトを印刷すると、見たままの状態では印刷されず、紙媒体でも読みやすいように印刷時にレイアウト等が変更されて印刷されます。

以下のURLで印刷プレビューしてもらうと、Bootstrapのデフォルトの印刷スタイルを確認出来ます。
http://onocom.net/code/bootstrap-print/default.html

これは、Bootstrapには予め印刷用のスタイルが定義されており、それが印刷時に適用されるためです。

この印刷スタイルには、

・リンクテキストの後にリンク先のURLが表示される！（ハイテク！）
・背景がすべて消える（インク代節約！）
・レイアウトがシンプルになる（タブレットやスマホ用に近い、コンテンツを読みやすいレイアウトになる！）

などなどが含まれます。
デバイスに応じて適切なスタイル（CSS）を定義すべきという素晴らしい思想だと思います。

しかし、そんなことクライアント様には関係ないようで「印刷用のスタイル？わけがわからない。安く作ってくれればいい。」「印刷すると壊れる！（印刷するとレイアウト崩れておかしくなるの意）」などありがたい意見を頂くことがあります。

印刷する環境はやはりPCなので、PC表示を印刷できるようにして欲しい。という要望です。

[Bootstrap 印刷]とかで調べると、印刷時のURLを消す方法とかはよく出てくるのですが、見たまま印刷する方法って意外と出てこないので頭を抱えておりました。

私以外にもそういうお声に頭を悩ませている方がいることを願い、今回、Bootstrapで見たまま印刷する。という方法に真っ向から立ち向かってみました。

お役に立てれば幸いです。

Bootstrapで見たまま印刷する手順

以下の手順でBootstrapサイトを見たまま印刷できるようにしていきます。

Bootstrap公式サイトから印刷用スタイル（@media print）を除外したパッケージをダウンロード
印刷調整用CSSの適用
微調整

1. Bootstrap公式サイトから印刷用スタイル（@media print）を除外したパッケージをダウンロード

まずは、Boostrapから印刷用のスタイル定義情報（@media print）を削除してあげます。

目視で該当部分を削除する方法もありますが、公式サイトのカスタマイズページやSass・Lessを使った方が間違いないでしょう。

ということでここでは、Bootsrap公式サイトのカスタマイズページを利用する前提で話を進めます。

Bootsrapのカスタマイズページ (Customize and download)
http://getbootstrap.com/customize/

このページはBootstrapのカラム幅や色など、多岐にわたるカスタマイズをウェブ上から簡単に行えるページです。
以下の方法で印刷用のスタイルを除外したBootstrapを取得します。

1-1:ページの最初の方にある大見出し「Less files」の中にある、中見出し「Common CSS」の中の「Print media styles」というチェックボックスのチェックを外し、一番下までスクロールします。

1-2:ページの一番下に「Compile and Download」というボタンがあるのでクリックしてダウンロードします。

ダウンロードしたZIPファイルには印刷スタイルの含まれないBootstrapが出来上がっています！すごい簡単！

1-3:ダウンロードしたZIPファイルの中からbootstrap.css,bootstrap.min.cssをコピーして現在のサイトで使っているBootstapファイルを上書きします。

ここまでの操作でBootstrapで構築されたサイトを印刷プレビューしてみましょう。

以下のURLで印刷プレビューしてもらうと、このステップが完了した状態の印刷スタイルを確認出来ます。
http://onocom.net/code/bootstrap-print/step1-complete.html

当初より大分改善はされているものの、スマホやタブレットのようなレイアウトになっているかと思います。手順２でその部分を改善していきます。

蛇足ですが、ダウンロードしたZIPファイルには「config.json」というファイルが含まれています。このファイル先ほどBootstrapのカスタマイズページの上部からアップロードしてあげることでカスタマイズ情報を引き継ぐことができます。

そのため、Bootstrapのバージョンが変わってもこのファイルをアップロードして再度Bootstrapをダウンロードすることで、印刷スタイルの定義されていないBootstrapのCSSファイルを簡単にダウンロードできるのです。

2. 印刷調整用CSSの適用

印刷用スタイルの定義されていないbootstrap.cssを利用すると印刷が見たままに多少近づきますが、レイアウトがスマホやタブレットのようになりがちです。

そこで私が特別に作った黒魔術のようなCSS（bootstrap-print.css）を以下からダウンロードしてサイトに適用してあげます。

bootstrap-print
https://github.com/onocom/bootstrap-print

するとどういうことでしょう。印刷プレビューがPC表示のままで印刷出来るようになっていませんか！？PC表示のまま印刷出来るという方はここまでで作業終了。

以下のURLで印刷プレビューしてもらうと、印刷対応が全て完了した状態の印刷スタイルを確認出来ます。
http://onocom.net/code/bootstrap-print/index.html

もし、一部印刷が上手く出来ない方は3.微調整を行っていきます。

3. 微調整

サイトによっては（と言うか殆どのサイトでは）、２の調整用のCSSを導入しただけでは細かな部分でおかしい箇所が出てくると思います。

そこは印刷調整用のCSSに追記するなどして一個ずつ潰していきましょう。

先ほどのbootstrap-print.cssに追記するか、以下の用にプリント用のCSS （@print）を作成して最終調整を行います。

bootstrap-print-adjuster.cssみたいなファイルを作成し、以下のように記述する

@media print {
  /* ここに印刷調整用のスタイルを定義 */
}

@media print {

/* ここに印刷調整用のスタイルを定義 */

}

さぁ、これで印刷パーフェクトになったはずです！

まとめ

ここに辿り着くまでに意外と時間がかかりました(^_^;)

印刷調整用CSSはまだまだ改良の余地があると思いますので、お気づきの点などあればリクエストをお願いします。

皆様のウェブサイトが見たまま印刷出来るようになってくれることを願います！

[CSS]font-familyのメモ。游ゴシック体、游明朝体は美しい

個人的なフォントファミリーのメモです。

他の方はどんなふうにフォントファミリーを指定しているのだろう。気になる気になる。

最近よく指定するfont-family

Windowsでも游ゴシックが使えるようになって来たので、游ゴシックを指定するようになってきました。

font-family: "游ゴシック", "Yu Gothic", "YuGothic", "ヒラギノ角ゴシック", "Hiragino Sans", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;

1	font-family: "游ゴシック", "Yu Gothic", "YuGothic", "ヒラギノ角ゴシック", "Hiragino Sans", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", "Meiryo", "ＭＳＰゴシック", "MS PGothic", sans-serif;

游ゴシック、游明朝は大変美しい

游ゴシック、游明朝は大変に美しい。

ただ、Windowsだとfont-weight:500; などと指定してあげないとブラウザ上で掠れた(かすれた)ようになるので要注意。