nDiki : CSS

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

スポンサード リンク

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日全て ]

2017年2月18日 (土)

nNote を最近使うようになってきたとか 【日記】

先月末に作った「ちょっとしたノートを置いておくスペース nNote」、どう使うか定まっていなくて当初はあまり書くこともなかったのですが、最近はちょこちょこメモを置くようになってきました。気軽に書き留めておける場所があるのやはり楽でいいです。小さいエントリが多いのでぱっと自分で見られるようにトップページに表示する記事数を増やしてみました。

それから nDiki(と nNote) に画像が無い記事がシェアされた時にフッタにあるプロフィール写真が機械的に選ばれる場合が多くてちょっとなと思ったので、フッタの上に 1200x630 の画像を置いておくことにしました(ページ上では大きくならないように CSS でサイズ制限)。

記事ごとに OGP 画像を指定する機能・記事に OGP 画像が無い場合にデフォルトを指定する機能を用意せねばと思いつつとりあえずということで。

[ 2月18日全て ]

About Me

Naney Naney (なにい)です。株式会社ミクシィでマネージャー・PO をしています。

nDiki1999年1月に始めたコンピュータ日誌を前身とする NaneyWeb 日記(兼パーソナルナレッジベース)です。ちょっとしたノートは nNote にあります。

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

月別インデックス
Process Time: 0.052863s / load averages: 0.23, 0.44, 0.53
nDiki by WATANABE Yoshimasa (Naney, Google profile)
Powered by DiKicker