CSS に関する投稿を表示しています

WordPress にプラグインを使わずに JavaScript だけで目次機能をつけてみた

目次機能が出来るプラグインとかってあるけど、別に自分で作ってもいいよねって思ったので作った。そのうちモリモリっとテーマやプラグインの整備に力を入れていくので、そのあたりに介入されると困るので~~ってくらいの理由で作った次第。

これこれ!この目次! h2 タグを使うんだよ

2階層までなら対応するよ! h3 タグだよ

ここは h3 タグ

ここは h2 タグなので 1 階層目になる

ここは 2 階層。 h3 タグだからね

デモおわり

ここまで見出しだらけで見にくいのは仕方ない。

仕組み

  1. h2 タグと h3 タグを投稿箇所から探す
  2. それぞれのタグに ID をつける
  3. それぞれへのリンクを生成する
  4. 目次用の HTML を作る
  5. 一番最初の見出しの直前に HTML を挿入する

タイトルこそ WordPress って言ってるけど JavaScript が差し込めるブログサービス的なものなら、投稿箇所を探す部分を調整する必要はあるけど、どれでもできるんじゃないかな。
jQuery を使わなくていいように作ったので jQuery ないんだけど、みたいな環境でもいいと思う。いやそもそもそういう環境はまた違う問題っぽいけど…。

JavaScript

(function() {
	setTimeout(function() {
		var headingIndex = 1;
		Array.prototype.forEach.call(document.querySelectorAll('.post_content'), function(postContent) {
			if (postContent.innerText.length < 100) {
				return;
			}

			var headings = postContent.querySelectorAll('h2,h3');
			if (headings.length <= 0) {
				return;
			}

			var indexHtml = '
    '; var lastElement = 'H2'; Array.prototype.forEach.call(headings, function(e) { var id = 'heading-' + headingIndex; e.id = id; if (lastElement != e.tagName) { if (lastElement == 'H2') { indexHtml += '
      '; } else { indexHtml += '
    '; } lastElement = e.tagName; } indexHtml += '
  • ' + e.innerHTML + '
  • '; headingIndex++; }); indexHtml += '
'; var wrapper = document.createElement('div'); wrapper.classList.add('content-index'); wrapper.innerHTML = indexHtml; headings[0].parentNode.insertBefore(wrapper, headings[0]); }); if (location.hash.length > 1) { setTimeout(function() { var element = document.querySelector(location.hash); if (element != null) { window.scroll(0, element.offsetTop); } }, 10); } }, 10); })();

CSS

.post_content .content-index {
	border: 2px solid #eee;
	border-radius: 20px;
	padding: 20px;
	background-color: #fefefe;
}

.post_content .content-index:before {
	content: '目次';
	display: block;
	font-size: 24.5px;
	margin-bottom: 15px;
}

他のスタイルとのバッティング回避した部分を除くとこれだけ。シンプルに線を引くことと色味の調整くらい。

SEO的な観点とか

目次足すと SEO に効果あるのかわからんけど、ふつうに見ていて、長めの投稿だったら合ったほうが便利だよね、とは感じる。

一応 Fetch as Google をして Google Bot にこの目次が認識されていることは確認したので、まあいいんじゃないかな。

CSS 設計の教科書 を読み終わった

「 CSS 設計の強化を読みました」って言ってたけどめっちゃ途中で止まっていたので完走しました。

前の記事
CSS設計の教科書を読んだ@途中まで | ごみばこいん Blog

読んだ本
Web制作者のためのCSS設計の教科書 モダンWeb開発に欠かせない「修正しやすいCSS」の設計手法 | 谷 拓樹 |本 | 通販 | Amazon

コンポーネント設計の実践

コンポーネントをどのように作るか。

コンポーネントを作るタイミングの問題。始めからあらゆる事態を想定してコンポーネントを作っていくことは困難であり、そんなところにパワーを使いすぎてはいけない。早すぎる最適化は悪の根源。 "YAGNI" (You ain't gonna need it.) = いらないものをつくらない。

"Rule of Three" はそれを解決するための 1 つの案。たとえば「3回繰り返すものがでてきたらコンポーネント化する」あるいは「別の3プロジェクトでも使うならコンポーネント化する」といった意識を持つのがよい。

粒度感の問題もある。ここについては、プログラミングにおける原理原則がCSSにおいても適用できることに着目し、「単一責任の原則」「開放・閉鎖の原則」などを意識するとよい。そもそも OOCSS ではオブジェクト指向プログラミングの考え方を CSS に取り入れた。

この章にはこの後、本の中では「コンポーネントの設計・実装パターン」としてボタンや見出しなど、筆者の経験上こうすることが多い、が書かれている。実際に1から作るとき、これを試してみるとよさげたん。

CSS プリプロセッサを用いた設計と管理

SMACSS や MCSS にはカテゴリやレイヤーといったルールが設けられていることを既に学んだ。これらを CSS の書き方の上でキレイに整えて書いていくことはなかなか大変。
そこで Sass を使うのがよい。Sass によってルールの構造化、使い回しなどが容易にできる。

Sass: Syntactically Awesome Style Sheets

コンポーネントの運用に必要なツール

コンポーネントを作る上で・・・。そもそも CSS を書く上でコメントを書くことは非常に大事。どんなところに提供されるルールなのか、なぜそういう書き方をしているのか、どのようなコンポーネント単位なのか。

CSS 設計をしたり、何かしらのルールを設けたのであれば、そのルールを文章化していくことが必要。全体の設計のやり方、細かいルール、ガイドラインといったことを記載するのがよい。なにせその CSS は他の人が受け継いでいくのだから。

どのようなコンポーネントがあるか、どんなクラスをつけるとどんな見た目になるか、といったスタイルガイド、パターンライブラリがあると、開発時に非常に便利になる。ある一定の決まりにそってコメントを記述すると自動で生成できるツールもあるので、活用するべし。
紹介されていたのはこれ。

KSS · Knyle Style Sheets
StyleDocco
thomasdavis/kaleistyleguide web サイトが終了しているようです。。

そのほか CSS 開発の効率を上げるために次のようなツールが紹介されていた。

  • csslint // 正しく書かれているか
  • stylestats // CSSの指標について数値化
  • autoprefixer // -webkit- などの自動付与
  • csscomb // 記述の並び替え、フォーマット
  • csso // 構造の最適化
  • Grunt, gulp // タスクランナー

Web Components の可能性

ここまで CSSの設計、ルール化によって壊れにくい、戦いやすいCSSが出来るようになった。しかし、それでも壊れる可能性は高い。それをこれからの未来に解決するための案が W3C で進められている Web Components という仕様だ。

Web Components は 4 つの技術から成り立つ。

  • Templates
    • マークアップと CSS を内包できる
  • Custom Elements
    • 独自の要素を定義できる
  • Shadow DOM
    • 隠蔽された DOM を作成できる
    • Templates と Custom Elements を組み合わせることで影響を受けない出さないコンポーネントを作成できる
  • HTML Imports
    • 外部の HTML ファイルを読み込める

まだ仕様策定中であり、利用できるブラウザも多くはないが Polymer というポリフィルがあるので、これを使うことでどのブラウザでも試すことは可能。これからのコンポーネントがやってくる未来に備え、 Web Components に触れておくとよいだろう。

読み終わってみて。

2014 年に初版が出たのもあって、 2017 年のフロントエンド界隈の話と比較するといくつか話が古そうなところもあります。

たとえばコンポーネントについては React を筆頭に Vue や Angular といった仮装 DOM を使ってコンポーネントを実現していくライブラリが活躍しています。 Web Components の実装も進み、 Chrome や Safari ではおよそ利用することが可能に、 Firefox でも実装が進んでいるようです。

React - A JavaScript library for building user interfaces
Vue.js
Angular

Web Components の実装状況
Can I use... Support tables for HTML5, CSS3, etc

CSS についても cssnext と呼ばれる、未来の CSS 仕様に向けた先行実装が今の流行り…?なのかなあ。
Sass で使っていたようなネストや変数、 Mix-in といったものは利用できますし、実行環境が cssnext というツールではなく PostCSS を利用するところに人気があるのかもしれません。

cssnext - Use tomorrow’s CSS syntax, today.
PostCSS - a tool for transforming CSS with JavaScript

PostCSS は Sass などが行っていたようなプリプロセッサというよりは babel のような、 Pluggable な CSS を処理する君で、プラグインを足して独自記法やブラウザが未実装な機能を書けるようにするものです。

このプラグインの一覧サイトがあるのですが、眺めているだけでも非常に様々なものがあります。
きれいなグラデーションを自動生成したり、 @component なんてすると BEM の命名を自動でつけてくれたり、画像や SVG を CSS のインラインに展開してくれたり…。以前までは、それぞれ別のプラグインとして作られ、 Grunt や gulp を使ってバケツリレー変換をしていたものが、 PostCSS というプラットフォームに乗っかることで、 CSS に対する前処理を容易にできるようになったようです。

PostCSS.parts | A searchable catalog of PostCSS plugins

ちなみに Sass っぽく使えるよ!というものもあるので、 Sass がどうしても!の場合にはこういう選択もありだと思います。

jonathantneal/precss: Use Sass-like markup in your CSS

というわけで、現代の先端?流行?と比べると、本で言われている技術ポイントと乖離がありそうですが、ぼくがこの本を読んでみたかった理由はそこではなく。CSS 設計のやり方、考え方、大切さ、コンポーネント分け方のイメージをつけることが目的でした。あとはそもそも OOCSS って? SMACSS って?みたいな状態だったので、これを解消したかったというところですね。

ここについては十分に解消され、実践できる武器になっているかわかりませんが、イメージはなんとなくついたので、あとは実践するのみになりましたとさ。おわり。

Chrome の console.log で CSS プロパティが指定できるよ

この記事は公開されてから1年以上経過しており、情報が古い可能性があります。

以前からごみばこいんでは、コンソールにようこそメッセージを出していました。

Chrome Devtools のドキュメントを見ると console.log の詳細が書かれています。

診断とコンソールへのログ出力  |  Web  |  Google Developers

ドキュメントには CSS プロパティが利用できるとあるのですが、なぜかこれまでは色とサイズが変えられる程度だと思っていました。試すと text-shadow が出来たり border が出来たりと、様々なプロパティが効くようです。

var properties1 = [
    'font-size: 8em;',
    'color: white;',
    'padding: 5px;',
    'background: linear-gradient(red, orange, yellow, green, aqua, blue, violet);',
    'text-shadow: white 0 0 15px;'
];

var properties2 = [
    'font-size: 8em;',
    'color: #222;',
    'text-shadow: white 0 0 3px;',
    'margin-left: calc(-15em - 6px);',
];
console.log(
    '%cうぇるかむとぅーごみばこいん!%cうぇるかむとぅーごみばこいん!',
    properties1.join(''),
    properties2.join('')
);

いくつかプロパティを試してみたのですが display だったり float だったり position 、 top や left あたりは無効化されているようです。。

で。実は Inspector を使うと、ここも HTML/JS/CSS で構成されていることがわかります。
Inspector は URL バーに chrome://inspect/ と入力するとアクセス出来ます。その中でも Other の項目を見ると Developer Tools について Inspect することができます。

DevTools の DevTools ができるなんてちょっと不思議な光景ですねw

こうやって console.log した結果を眺めてみると %c で指定したものは span タグの style 属性に入っています。
これでは :beforeなどのセレクタが使えなかったり、階層構造が持てないのでアニメーションしたりなどなども出来ないです。先にあった使えないプロパティのところもあるので、凝ったことをするのはできなさそうですねー。残念。

CSS設計の教科書を読んだ途中まで

この記事は公開されてから1年以上経過しており、情報が古い可能性があります。

こんにちは、ごみばこです。

最近になってようやく、ちゃんとしっかり CSS の教科書を読みました(設計の大事さと紹介まで)。そのメモというか、まとめです。CSS 設計マジ大事やなー。

Web制作者のためのCSS設計の教科書 モダンWeb開発に欠かせない「修正しやすいCSS」の設計手法 | 谷 拓樹 |本 | 通販 | Amazon

余談ですけど、ここのところブログをちょこちょこ書いているのですが、トップページが遊び要素メインで中身が無いと見なされてか Adwords も Amazon アソシエイトも審査落ちしたので、ごみばこいんからのリンクはノーアフィリエイトです。かなしみ、ビールの一杯くらい稼いだっていいじゃない

CSS設計がなぜ重要か

フロントエンドも作って終わりではない。
web サイトのコンテンツが増えたり、キャンペーンをしたりなど、 web サイトの内容が変わっていくので、それに合わせて各コードのメンテナンスをしていかないといけない。それはもしかしたら誰かに引き継ぐかもしれないし、自分でやるかもしれない。リッチな表現が求められる今の web サイトでは HTML も Javascript も CSS も複雑なものになっていく。

中でも CSS はシンプルに書ける一方でたくさんの記述が必要がゆえ、複雑なことをしようとすると、スパゲッティコードになりやすい。だから設計というルールを設けていく。
プログラミングと同様に CSS も設計をすることで、予測しやすい、再利用しやすい、保守しやすい、拡張しやすい、ものを記述できるようになる。

設計をどうやっていくか

見た目の変更や入れ替えがあるなかで、使いまわすようなものも多くある。その使いまわしのために、要素を部品=モジュール、コンポーネントと考えていく設計が有効になる。
そのコンポーネントとして考えるために、いくつかの実際に活用されている設計方針を紹介していく。

OOCSS

Object-oriented CSS

構造と見た目の分離、コンテナとコンテンツの分離を挙げている。
コンポーネントとしての構造、ブラウザ上での見た目を分離して考えること。ある要素がどこにいるかのコンテナ、ある要素のコンテンツを分離して考えること。

後者は難しいが「場所に依存しないセレクタを書くこと。どこそこの中にある○○、とし定義されるようなものを避けること」と考えるとわかりやすい。

SMACSS

Home - Scalable and Modular Architecture for CSS

OOCSS で言われている分離を実践するためのカテゴリが決められている。

Base :見た目のリセット、標準化
Layout:全体的なレイアウト設定(2カラムなの、3カラムなの、ヘッダー?)
Module:コンポーネント自体
State :コンポーネントの状態
Theme :コンポーネントの見た目違い

もう一つのSMACSSのポイントとして「HTMLとCSSの分離」が挙げられている。

要するに。
SMACSS = OOCSS + OOCSSを使うためのカテゴリ + HTMLとCSSの分離

BEM

BEM — Block Element Modifier

CSSにおける命名規則の提案。OOCSS、SMACSSを考えてのコンポーネントを記述できるよう規則が決められている。

Block
Elementの集合体、ひとつのコンポーネント
命名は自由

Element
コンポーネントに含まれる要素の1つ1つ
命名は Block_Element という形式

Modifier
BlockとElementについて、場合分けが起こるときに使う
命名は Block__Modifier または Block_Element__Modifier という形式

たしかにBEMでは、アンダースコアを付けるように、と言っているがそれはさほど重要ではない。キャメルでもハイフンでもいい。コンポーネントの体に合わせた命名規則を設けることで、シンプルにたくさん書けるCSSへ規律をもたらし、事故を未然に防いだり可読性を上げることが大事。

MCSS

MCSS

SMACSS にレイヤーというルールを足すようなもの。複数のレイヤーを構成することによってCSSを設計する。レイヤーとして縛りを設けることで、CSSプロパティの汚染を防いでいく。

Foundation
プロジェクトの土台、resetcssやnormalize.cssがそれ
最初に読み込まれる

Base
コンポーネント定義
他のレイヤーから拡張変更ができる必要がある
Baseレイヤーコンポーネントは上書きできる

Project
具体的なページを構成する要素、Baseレイヤーコンポーネントの集まり。現実的にはこのレイヤーが厚くなりがちだけど、上書きによって階層が深くならないようにする
Baseレイヤーコンポーネント、Projectレイヤーコンポーネントを上書きできる

Cosmetic
下層レイヤーコンポーネントに含まれないちょっとしたスタイル。ヘルパー、ユーティリティのようなもの、グローバルなModifierなど。
基本的に上書きは出来ない

Context
例外的なレイヤー。すべてを上書きできる。
特定のブラウザ、デバイス、状況によって切り替えるようなもの。PC / スマホ、ログインしてる / してない。
セクションを持たず、各コンポーネントについて書かれるセクションの中で記述される。

レイヤーの分け方に合わせて、CSSを記述するときの基本原則がいくつかある。

  • コンポーネントを1つのセクションにまとめる
  • Modifierを個別クラスにし、単体で利用しない
  • コンポーネントのカスケーディング(上書き)が出来る
  • あるコンポーネントに含まれる別のコンポーネントに適用するスタイル。ただし上層のコンポーネントを上書きしてはいけない。同じ層か、下層のみ上書き可能
  • クラス名を略語にする

FLOCSS

この本の筆者が考えている、全部まぜのいいとこ取り。

ソースファイルのセクションわけ、レイヤー制約、命名制約が盛り込まれている。詳細は Github で!
hiloki/flocss: CSS organization methodology.

ルールこそ多いように見えるが、ルールに乗れると非常に楽(体験談)

ここまで読んで

個人的なちょっとしたやつで Bootstrap を入れた上で、新たに書き足す部分を FLOCSS を意識して作ったところ、非常にわかりやすく、事故もなく、安心安全にできてちょっと感動してました。
…、とはいえ FLOCSS でみんなやろうぜ!というわけではなく。本にも書かれているのですが、色々な考え方があるけど俺達はどうやってやるよ、というのを改めてちゃんと考えないとね、って思いましたとさ。

いじょ。

激安 JS を作ってみた

この記事は公開されてから1年以上経過しており、情報が古い可能性があります。

こんにちは。ごみばこです。

某所で激安 CSS が盛り上がり、実際に使うとなったら JS に全部書かれていて、数字だけ入った要素に適用されると嬉しいだろうなあ~、と思ったので、作ってみました。

※激安 CSS についてはこちら > http://qiita.com/shiozaki/items/0e42e101b7483df13c8f

ソースはここ(gist)
✨安い!!お得!!激安JS!!✨

せっかくなので、ただ作るではなく、普段書かないようなメソッドや記述を盛り込んでみようかなあと。

  • ライブラリを使わない
  • document.querySelector と document.querySelectorAll で要素検索
  • テンプレートリテラルで CSS の定義
  • innerHTML じゃなくて createElement で地道に作っていく
  • let! let!
  • アロー関数でクロージャ

 

↓実際に実行するとこちらになります

 

あの大人気の掃除機が今だけナント!49800


<p>あの大人気の掃除機が今だけナント!<span class="gekiyasu">49800</span></p>
<script src="/tool/gekiyasu.js"></script>
<script>gekiyasu.initialize();</script>

 

元の CSS 作者に圧倒的感謝?