nDiki : CSS

CSS - Cascading Style Sheets - カスケーディングスタイルシート

スポンサード リンク

2011年11月11日 (金)

www.naney.org のトップページを nDiki

www.naney.org のトップページは、大学のサーバで /~naney/ として使っていたレガシーなものをたまーに修正しつつずっと置いておいたのだけれども、まあもういいでしょうということで。

302 Found で nDiki にリダイレクトするように .htaccess に設定を追加。

今は普通にできる 1+ 2 カラム構成を、当時 Web ブラウザの初期の CSS 実装互換性に悩まされつつ試行錯誤したり、Content negotiation による言語設定にあわせた出力切り替えやってみたりとかは思いで。

スポンサード リンク

今日のさえずり: PHPer にならなかったのは、コマンドラインから実行するスクリプトを書きにくそうだったからです

2011年11月11日

  • 09:43 おにぎり他 365円。 (@ ローソン 渋谷三丁目東店) http://t.co/LtrMccc2
  • 09:44 11:11:11 はミーティング中なのでスクリプトを組む必要があります。
  • 09:57 ポッキーとプリッツ買い忘れた!
  • 11:08 ミーティング中なのに 11:11:11 狙ってるやつがいる。
  • 13:22 コンポタが嬉しい季節になった。
  • 16:45 午後、コツコツとチームの過去タスクのリスト作ってた。
  • 16:50開発が進んで、もれなくトラッキングできてて、必要なコミュニケーションが取れて、記録が残せていれば ITSチケットの分類とかステータスの変更とかちょっとぐらいルーズでもいいでしょ。」って開発中は思うんだけれど、後で集計してねっていうのがくると途端に泣ける。
  • 16:53 同じ誕生日の人が6人もいる日があるのか。
  • 17:36 クランキー ポップジョイ 100円。
  • 21:21 退勤。
  • 21:35 PHPer にならなかったのは、コマンドラインから実行するスクリプトを書きにくそうだったからです。
  • 24:24 髭 sorry.
  • 24:50 Web サイトのトップページほったらかしだったので nDiki にリダイレクト設定。
  • 26:03 500 潰したり、CSS 微修正したりしてたらこんな時間。

[ 11月11日全て ]

2012年8月1日 (水)

今日のさえずり: ギャバンの「なるほど!」ポーズが好きです

2012年08月01日

  • 08:35 本日の YouTube ラジオ体操 done.
  • 08:42 S 式を延々と解く公文式ドリルないの。
  • 08:44 KUMON じゃなくて公文と書くやつは古いってこのあいだ言われた。
  • 08:49宇宙刑事ギャバン THE MOVIE」観に行きたいっていったら、「行っておいで行っておいで(ただし一人で)」て言われた。
  • 09:05 @yaizawa 小学校のクラスの中では公文やってる奴は計算速かった記憶があります(自分はやってなかった)。
  • 09:11 ギャバンの「なるほど!」ポーズが好きです。
  • 09:48 今日の雲はカッコいい。 (@ 株式会社ミクシィ (mixi, Inc.)) http://t.co/Nu2kRywU
  • 22:24 CSS と戦う戦士をあとに退勤。
  • 22:28 明日はアキヨドに予約に行くかなあ。
  • 23:29 今回のアンパンマン、やっぱり復興ものだったらしいよ。
  • 23:59 オフィスからアキヨド行くの中央線経由が速いって出ているけれど、5分の差なら山手線の方が楽でいいか。

[ 8月1日全て ]

2013年2月3日 (日)

nDikiサイドバー無くした

nDiki(この Web 日記)では長らく右にサイドバーのある2列レイアウトにしていたんだけれど、昔みたいな「ブログパーツ!」みたいな時代でもとうに無くなっているし、簡単な自己紹介と直近の Tweets を載せているぐらいだったので、バスッと消すことにした。

時代はスマートフォンだしね(スマートフォン向けにまでは CSS 修正していないから、まだまだ最適化されていないけど)。

あと昔貼った Facebook ソーシャルプラグインの挙動が変になってきたので、HTML5 用の新しいのに変えた。多少ましになったかな。

時代とともに仕様もデバイスもトレンドも変わっていってしまうから、長く継続していくにシンプルにしてメンテナンスコストを抑えよう。


[ 2月3日全て ]

2013年8月27日 (火)

今日のさえずり: Firefox の Pearl Crescent Page Saver Basic 使ったら固定ヘッダ重複することなく全体キャプチャできました!

2013年08月27日

  • 19:43 ヘッダ固定の Web ページをスクロールキャプチャできるいいソフトウェアが見つからなくて、結局 GIMP で結合する世界へ流れてきた。
  • 19:53 @maru_kei 試してみます!
  • 20:21 @maru_kei おお Firefox の Pearl Crescent Page Saver Basic 使ったら固定ヘッダ重複することなく全体キャプチャできました! (下の方に固定の要素がキャプチャに繰り返し出たけど、そちらは CSS いじって対応できました)
  • 22:32 新しいあれの plackup まで環境構築できたので帰る。 (@ 株式会社ミクシィ (mixi, Inc.) w/ 2 others) http://4sq.com/14AwLqU

[ 8月27日全て ]

2013年12月1日 (日)

Bootstrap 3 に移行して Web 日記を延命

この Web 日記(nDiki)がスマートフォンで見にくいのがずっと気になっていたので、さくっと Bootstrap 3 に移行した。CSSBootstrap 3.0.2 のものに変えて、navbar を使うようにコードをちょっと変更程度の軽い対応。

もともと tDiary テーマ CSS 用の HTML 構造を生成していたんだけれど、そのあたりが問題で崩れることはなく BootstrapCSS を当てることができた。もともと Wiki 記法で書いたソースドキュメントを HTML に変換しているので、変な構造の HTML は吐かないようになっていたというのもサクっといけた点かな。

細かいところういうと画像の回り込みに対応させなければならなかったり、テーブルなど適宜 Bootstrap のクラスを指定した方がいいところがあるけれど、まあ追い追いで。

あとそもそも iPhoneAndroid などのスマートフォンで見にくかったのは CSS の問題というよりは、viewport の指定がなかったからだった。Bootstrap に差し替えただけではやはりスマートフォンでは見にくくて、Bootstrap の Getting started の通り、

 <meta name="viewport" content="width=device-width, initial-scale=1.0">

と書いたら文字サイズなど見易くなった。

2004年2月22日にハイパー日記システム(hns)から自作の DiKicker移行してからもうすぐで10年。そういえば2004年2月22日は奇しくも mixi がプレオープンした日だっとはなあ。何かの縁か。


[ 12月1日全て ]

2013年12月16日 (月)

プレゼンテーションスライドを Markdown で書いて pandoc で reveal.js なページを生成する

ちょっとした勉強会などの資料は Markdown とかで軽く書いて、Web ブラウザプレゼンテーションするための HTML ファイルと、参照用のシンプルな HTML ファイルを生成したいなと思ってちょっとチェックしてみた。pandoc を使うと Markdown から reveal.js を使ったスライドページを作れるし、普通に HTML5 なページにも変換できるので良さそげ。

pandoc をインストール

pandoc は Haskell で書かれている。 GHC + Haskell Platform が入っている環境なら

 cabal update
 cabal install pandoc

を実行すればインストールできる(Fedora 17 の home 以下に GHC + Haskell Platform をインストールした時のメモ)。Debian GNU/Linux sid にも pandoc Debian パッケージはあるのだけれど、まだちょっと古めなので cabal で入れた。

スライド原稿を用意する

 mkdir pandoc-sample
 cd pandoc-sample
 emacs source.md

してサンプルを Markdown で書く。

できたら reveal.js をとってくる。

 git clone https://github.com/hakimel/reveal.js.git

CSS の微調整が必要なら reveal.js/css/reveal.min.css に手を入れる(自分の場合 text-align: center を left にしたり、.reveal h<n> のサイズを小さくしたりする)。

reveal.jsHTML を生成する

 ~/.cabal/bin/pandoc -s -t revealjs -V theme:default -o slide.html source.md

でスライド HTML ファイルが生成される。

HTML のテンプレートを変更したい場合は、例えば

 cp -a ~/.cabal/share/pandoc-1.12.2.1/data/templates/default.revealjs .

とコピーしてきて編集後、

 ~/.cabal/bin/pandoc -s -t revealjs -V theme:default --template=default.revealjs -o slide.html source.md

とする。

シンプルな HTML5 版を生成する

 ~/.cabal/bin/pandoc -s -t html5 --toc -c /path/to/bootstrap.min.css -o doc.html source.md

などとしてシンプルな HTML5 版も作っておける。


[ 12月16日全て ]

2013年12月17日 (火)

今日のさえずり: 東急東横線だいぶ撤去された

naney:11414315283

2013年12月17日


[ 12月17日全て ]

2014年9月7日 (日)

今日のさえずり: 加水分解でベトベトになっていたグレゴリーのクイックポケットを処分

2014年09月07日


[ 9月7日全て ]

2015年2月22日 (日)

nDikiBootstrap 3 CSS を調整

Bootstrap 3 を使っているんだけれど見出しが本文とちょっと区別がつきにくいなどちょっと気になる点があったので修正。

  • 見出しが目立つように h2 h3 h4 に "font-weight: bold;" を追加。
  • フォントファミリを指定していなかったので body, h1, h2, h3, h4, h5, h6 に "font-family:'Lucida Grande','Hiragino Kaku Gothic ProN', Meiryo, sans-serif;" を追加。
  • 段落が詰まった感じなので p に "line-height: 1.7;" を追加。
  • 短いセクションに "float: right;" 画像があるとその高さまで文章の無い空白ができて、間延びするので h4 に自分で設定していた "clear: both;" を削除。
  • 前記の h4 の "clear:both;" 指定で各セクションの "float: right;" な画像が同じ段にならないようにしていたのだけれど、これを消したことで画像が階段状に並んでしまうケースが出ることになるので img に "clear: both;" を追加。

[ 2月22日全て ]

2016年10月30日 (日)

Markdownプレゼンテーションスライドを書ける Deckset for Mac

https://www.naney.org/nDiki/2016/10/30/Deckset.jpg

ここ最近はプレゼンテーションスライドを用意する時は reveal.js を使っています。Markdown で内容を書けるので便利なのですが、個人的には書き始めが億劫というネックがあります。ディレクトリを作って reveal.js のファイル一式を最初に用意するのがちょっとしたことなのですが面倒くさいのです(自分用に若干アレンジしたサンプル一式をコピーする作業)。

Markdown で書けるもので、かつもうちょっとさくっと書けるツールがあるかなと探してみたところ Deckset for Mac が良さそうなので使ってみることにしました。

スライドを書く

Deckset 方言の Markdown で記述したファイルを1つ用意すれば Deckset でスライドとしてレンダリングしてくれるのでお手軽。Deckset アプリ自体には Markdown エディタは内蔵されておらず Emacs や Atom など好みのテキストエディタで編集するスタイルというのも良いです。テキストエディタ側で保存すると Deckset 側が更新を検知してスライドを更新してくれます。

スライドに使う画像URL で指定することができる(そして推奨している)ので、ローカルディレクトリに用意してという必要がありません(もちろん Markdown ファイルと同じディレクトリに用意して読み込ませることもできます)。「プレゼンテーション時にネットワークにつながっていなかったり URL 先から消えていたら困るのでは?」というのが気になるところですが、 Deckset 側でローカルホスト上にキャッシュしてくれるので大丈夫になっています。

テーマ

テーマは Deckset が用意しているものから選びます。欧文系らしいちょっと派手なのが多く、個人的に使えるなというのはそれほど多くない印象です。個人的には Titillium がいちばんしっくりくるかなと。

エクスポート

PDF ファイルや画像でエクスポート可能なので困ることはなさそうです。

好みの設定

スライドの冒頭にそのスライドの設定を書いておくことができます。

 theme: Titillium,1
 footer: [各ページ下部のフッタに載せたい文字列]
 slidenumbers: true
 autoscale: true

が良さそげ。

reveal.js との比較

reveal.js と比べて良いなというところは以下です。

  • すぐ書き始められる。
  • さくっと画像を貼れる。
  • 「右半分画像」というレイアウトが簡単にできる(reveal.js だと厳しい)。
  • autoscale を有効にするとページに収まるようにフォントサイズを調整してくれる。

reveal.js では Web ブラウザで表示するため縦横比が変わる前提である程度余裕をもってページを書く必要があるのですが、Deckset はそこを気にしなくて良いのが楽です。CSSJavaScript コードをいじれる reveal.js に比べると細かいカスタマイズは全然できないのですが、その分デザインは Deckset に任せると割り切って内容だけに集中してさくっと書けます。

reveal.js が便利なところもあるのでプレゼンテーションシーンに合わせて使い分けることにします。

(画像http://www.decksetapp.com/ より。)


[ 10月30日全て ]

Related term

About Me

Naney Naney (なにい)です。株式会社ミクシィで SNS の企画開発を行うグループのマネージャーをしています。CS 向上・コミュニティマネジメント・ユーザーサポート・健全化などにも取り組んでいます。

nDiki1999年1月に始めたコンピュータ日誌を前身とする NaneyWeb 日記(兼パーソナルナレッジベース)です。

※内容は個人的見解であり所属組織とは関係ありません。

月別インデックス

Process Time: 0.054459s / load averages: 0.26, 0.38, 0.34
nDiki by WATANABE Yoshimasa (Naney, Google profile)
Powered by DiKicker