サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
Pixel 9
dev.shikakun.com
僕が働いている 会社 では、今期の目標や実績などの評価資料を Markdown で書いて、GitHub Enterprise の規定のリポジトリに pull request を送ることで管理しています(エンジニアだけでなく、デザイナーや、一部の部署ではマネージャーやディレクターも pull request で提出している一風変わった会社です)。どうしてこんなことをしているのかは CTO の記事 を参照いただければと思いますが、僕はデザイナーだし pull request も自己アピールの場だなと思って、コミットメッセージで絵を描くことにしました。 FIGlet FIGlet は文字をアスキーアートへ変換するツールです。コマンドラインで実行できるので、開発環境ごとに ssh ログインしたときに違うアスキーアートを表示させるようにしておくと、ログインしたサーバーを区別できて便利ですね。 $ b
単純なようで、実はここにはスタイルシートの大事なことが詰まっていると思うんです。というのも、こんなスタイルシートを書くのだって、考えることがいっぱいあるから。 セレクタの名前は .btn なのか、.button なのか ボタンの上下に隙間を指定するのか、高さを指定するのか ボタンの幅は指定するのか、しないのか ブロック要素にするのか、インラインブロック要素にするのか ブラウザのデフォルトのスタイルは影響しないのか? そんなふうに半分無意識に選択していままでなんとなく書いてきたボタンだけど、みんなどうやって書いてるんだろう。そこで、いくつかの CSS フレームワークのボタンのスタイルシートを読んでみることにしました。 (今回はボタンに関係するスタイルシートだけ抜き出して見ていますが、ブラウザのデフォルトのスタイルをリセットしていたり、抜き出した箇所以外の記述が影響している場合があります。)
スタイルシートを書くのってほんとうにややこしいですね。気がついたら、どこになにが書かれているのかわからない数万行の CSS 地獄になってしまいます。 CSS 地獄にならないためには、例えばボタンなら共通のボタンのスタイルシートに統一して、どのページでも同じスタイルシートでボタンを表現したほうが、効率的だし仕事も早いですよね。デザインのリニューアルだって一瞬です。さらには、デザイナーが作業しなくてもエンジニアだけでボタンを用意できてしまうという CSS 天国が待っています。 CSS 天国を実現するためには、どのような共通のスタイルシートを用意しているのかまとめてあるドキュメント、「スタイルガイド」を用意しておくと便利です。べつに wiki にまとめてもいいんだけど、wiki って更新するの忘れてしまいがち。そこで、スタイルシートに書いたコメントを抽出して自動でスタイルガイドを生成してくれるっ
これまで技術的に調べたことは、GitHub の Tips 専用リポジトリ に issue に書いて公開していた。Markdown で書けるのはもちろん、画像のアップロードもドラック&ドロップでできるし、コメント欄もタグの絞り込みも検索も用意されているので、ブログツールとしてなかなか便利だなーと思っていたんだけど、いいねボタンとかはてなスターとかリアクションがもらえないし、フィードもわかりやすく吐けないし、デザインもいろいろいじってみたいな!と思い、よしブログを作ろうと思ったのでした。 はてなブログ最高だし Tumblr という手もあったけど、この機会に前から興味があった静的サイトジェネレーターを使って GitHub Pages で公開してみようかなと思って いろいろ調べてみると、npm でインストールできる Hexo というツールが 現在の仕事 で扱ってる技術に近そうだなーと思い、あと G
このページを最初にブックマークしてみませんか?
『https://dev.shikakun.com/』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く