AngularJSを使って「真木よう子Viewer」を作り始めた

「真木よう子」をかっこよく表示しようと思っています。

これといって決まっていません。いいねボタン的なもので人気投票みたいなのができればいいなと思っています。

この他にもAngularJSを折角使うので、機能をつけたいですが、まだ何が出来るのかわかっていないので未定です。

以下、制作メモです。

<img ng-src="{{user.url}}" ng-class="'sampleImg'">

クラス名はシングルクオテーションで囲む必要があることに注意。

仕様としては「display: flex」が現時点で一番新しいです。「display: flexbox」とか「display: box」は古い仕様となります。参考サイトは更新日によって記述がまちまちとなっているので注意して下さい。
・参考
A Complete Guide to Flexbox | CSS-Tricks - CSS-Tricks
フレキシブルボックスモデルを使ってみる - HTML5 Rocks
CSS3のFlexboxを基本から理解して、使い方をマスターしよう！ | 株式会社LIG

ul,li{
	margin:0;
	padding:0;
}

様々な解決方法があるみたいですけど、自分はmarginとpaddingをゼロにして解決しました。これでスペースがなくなります。
・参考
リストの横並び時に生まれる< li >の隙間を解決する5つの方法

button{
	outline:none;
	border:none;
	width:250px;
}

focusしたときの青い枠線を消すには「outline:none;」が必要です。

何度かやったことがありますが、未だに覚えられていません・・・・笑。
Creating a GitHub Pages site - GitHub Docs

vimで編集していると、編集ファイルがswpファイルとして残っています。この状態で「git add .」してしまうと、swpファイルもコミットされます。バージョン管理には不必要だと思ったので、除外しました。

bootstrapを使用する方法もあると思いますが、ひとまずviewportの設定をコピペしました。

not good but great