javascript(jQuery)で印刷プレビューをする

データベース系のサイトを構築している。

一覧表のページに印刷需要があるので、print.cssに@media print { #sidebar {display:none;} }なんて書いていたが、

  • 画面全体をそのまま印刷できること
  • サイドバーなどを非表示にしたデータのみの印刷も可能なこと

の2パターンで印刷したいらしい。

画面全体の印刷はブラウザの印刷機能に任せるとして、別にデータのみの印刷に対応した印刷プレビュー機能を実装する。

以下実行した対応。

(さらに…)

続きを読む

.clearfixという古(いにしえ)の魔法

初級のウェブ制作者には、.clearfixというclassを魔法だと思っている人が多いようだ。

どういうわけか、floatの解除=親要素に.clearfixと刷り込まれているようである。

しかし親要素にいちいち.clearfixを付けるコーディングなど数年前に死滅している。

そんな古のclearfix使いにまつわるお話。

(さらに…)

続きを読む

Table of Contents Plusがjetpackの共有や関連の見出しを拾ってしまう

Table of Contents Plus(TOC+)は記事内の見出しから簡易的な目次を作成してくれるプラグイン。

最近ではWEB制作系のサイトのほとんどが導入しているように思える。
右にならえであまりカッコよくないが、HTMLを文書として正しく捉えている我々だからこそ、ありきたりのプラグインでも必要だから導入している。

便利なTOC+だが、jetpackの一部の機能と相性が悪いようだ。
以下、問題と解決方法を提示する。

(さらに…)

続きを読む

WordPressが勝手にpやbrを操作してくる場合の対処法

WordPressは厳密なHTMLを強要してくることで有名だ。

確かにHTMLは正しく書く必要がある。ウェブ制作者である我々にとってはなおさらだ。
しかし間違っていると分かっていても本能の赴くままに表現したい場合もある。

例えば、人は精神的に追い詰められるとエンターキーを連打しがちだが、
(異論は認めない)
それをWordpressのテキストエリア上でやると、大量の改行が挿入されることになる。

そうして怒りを改行に変えて投稿ボタンを殴りつけるのだ。

そしてさぞかし殺意に溢れた記事ができただろうと思って表示してみると・・・

(さらに…)

続きを読む

カスタム投稿とカスタムフィールドでCMS化

WordPressで定型的なコンテンツを定型的に運用するには、カスタム投稿タイプとカスタムフィールドでCMS化する。

HTMLの分からない顧客から「自分で更新したい」という要望があった場合にはまず間違いなくCMS化して納品する。

プラグインを使うことで簡単に実現可能なため、昔に比べずいぶんと敷居が下がった。

以下手順を説明する。

(さらに…)

続きを読む

Sublime TextでCompassを快適に使う(Windows)

IE6や7や8のシェアが少なくなり、ウェブサイトも表現の多様化が求められています。

CSS3を使ったインタラクティブな表現はもはや当たり前であり、サイト制作の比重もHTMLコーディングからCSS・javascriptへと大きくシフトしています。

javascriptはjQueryの登場により随分と手軽になりましたが、CSSだけは書式も機能も変わらず、記述量だけが何十倍にも増えました。

そこで登場したのがCSSメタ言語です。
CSSメタ言語とは、CSSを拡張した言語で、セレクタを入れ子にできたり、四則演算が出来たり、変数が使えたり、関数が使えたりします。

この上なく強力で便利で実用的です。

CSSメタ言語の候補には、主にSCSS・SASS・LESS・Stylusなどがありますが、日本を含め世界的に受け入れられているのがSCSS(サス)になります。

SCSSは今や上級のWEB製作者のみならず、基礎として覚えるべき業界のデファクトスタンダードとなりつつあります。

以下では現代のWEB製作者の最もポピュラーな制作環境である、

Sublime Text + Compass

による開発環境構築までの手順を紹介します。

(さらに…)

続きを読む