not good but great

プログラミング、アート、映画・本の感想について書きます。

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

「真木よう子Viewer」とは?

どんなページにするのか

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

機能は?

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

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

以下、制作メモです。

ng-class

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

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

cssのflexで均等配置

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

liの先頭にスペースが空く

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

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

buttonタグのスタイルを消す

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

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

Github Pagesの作り方

何度かやったことがありますが、未だに覚えられていません・・・・笑。
Creating Project Pages manually · GitHub Help

.gitignoreでswpファイルを除去

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

.gitignoreの存在を我々は見過ごしてはならない。 - Qiita

スマホ対応

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

これがスマートフォン向けサイトを作るときの viewport 設定3パターンだ - てっく煮ブログ