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

naMemo

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

パララックス効果をスマートデバイス対応させる時につまづいたこと

最近、あちこちで話題のパララックスデザイン。 流行りに乗じて挑戦してみたら、まんまとつまずいた。 CSSだけで簡単にパララックス効果をつけられる! HTML <section class="img_wrap"> <div class="background_img"> <div class="h1_wrap"> <h1>Parallax!</h1> </div> </div> </section> CSS .img_wrap{ height: 740px; } .background_img{ background-image: url('samp…

レスポンシブデザインのブレークポイント

レスポンシブデザインをする時のブレークポイントが未だによく分からんのでメモ 一般的な数値(iPad, iPhone準拠) @media screen and (min-width:480px){//スマホ}@media screen and (min-width:768px){//タブレット} @media screen and (min-width:1024px)…

某演習が終わった

今期一番力を費やした演習が終わった 作ったものはこれ Nostradamus このWebサイトのコンセプトとしては,グラフで可視化したIT機器の数値的な未来予測. 過去から現在までのIT機器の情報を集め,過去・現在・未来予測した結果を基にグラフを作成する. グラフ…

自力でレスポンシブ・ウェブデザイン

今までレスポンシブにするときCSSフレームワークつかってたけど、自力でやるとエライ大変だったので忘れないようにメモ viewportの設定 head内に <meta name="viewport" content="width=device-width, initial-scale=1.0"> スクリーンサイズごとにCSSを指定 deviceごとのスクリーンサイズScreen Sizes PCでは横並びのディスプレイ、</meta>…

compassのコマンド

compassが便利なのでメモ compassの新規プロジェクト作成 cssとかjsのディレクトリもここで指定できる プロジェクトに余計なファイルがいろいろ生成されている気がするけど無視していいのかな compass create --sass-dir "sass" --css-dir "css" --javascrip…

やっとindexページつくった

せっかくお金を払ってサーバを借りたのに何もしてなかったのでとりあえず自分のwebページのindexつくった CSSとか 流行りっぽい丸い&フラットデザインにしてみた。 あと、CSSのtransitionという要素もつかってみた(a:hoverしたときに丸が大きくなる)。 tr…