読者です 読者をやめる 読者になる 読者になる

naMemo

うぇっぶやアプリやデザインに興味深々なキモオタのメモ

やっとindexページつくった

web css html デザイン

せっかくお金を払ってサーバを借りたのに何もしてなかったのでとりあえず自分のwebページのindexつくった

CSSとか

流行りっぽい丸い&フラットデザインにしてみた。
あと、CSSのtransitionという要素もつかってみた(a:hoverしたときに丸が大きくなる)。

transitionつかうと、いろいろアニメーションが付けられて、リンクにマウスオンしたときにぼやっと文字色を変えたり、今回のように速度をつけて何かの大きさを変えたり等できる。
今回は、円の中心から広がるようにしたかったけど、どうもうまくいかなかった。

transition-timing-function(変化の具合を設定するらしい)とかあんまり使いこなせてないので、ほかの使い方も勉強してみたい。

擬似要素(:beforeとか:after)もよくわかってない。CSS3難し。

Google Fonts

Google大先生が提供してるGoogle Fontsがめちゃくちゃ便利で捗る。
いわゆるWebフォントというやつ。

本来、PCにプリインストールされていないような、自分でダウンロードしたフォントをWebページで使用するときは、画像にして使わないといけない。

でもWebフォントを利用すると、web上のフォントファイルを読み込むことで、インストールせずに美しいフォントたちが使える!すてき!!

いちいち画像編集ソフトを開かなくてもCSS使えばロゴっぽいものが作れるし、文字情報だからSEO対策にもなる。すごい〜

ちなみに今回はSnippetっていうフォントを使わせてもらった。いろいろいいフォントがあるのでロゴ集でもつくってみたい。

Sass

CSSをいろいろと便利にかけるSaasをいれて、使ってみた。初めてまともにターミナル使ったけど、Macだとインストールがすごい楽。

入れ子構造でかけるのと、変数が使えるのが個人的に捗る。あとMixinでテンプレっぽいのつくって使いまわしたりとか。

レスポンシブデザイン

地味にレスポンシブデザインにした

リキッドレイアウトだけじゃなくてちゃんと

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

てなかんじにviewportっていうのを指定しなきゃだめなんね。

デバイスによって空の丸メニューが増えて、見栄えがよくなるようにしたかった。
(5つ並んでる丸の、1個の丸だけ下にいっちゃってなんか見栄えがよくないとかいう現象)
jsとかでできそうな気はする。

参考にしたページ