デザインをどうするか Webサイト制作におけるレイアウトでの留意点を考察する。

googleの開発者向けサービス googleはWeb開発者に対する様々なサービスを提供している。

ポートフォリオ制作 トップページ 今回はポートフォリオのトップページを完成させる。

可変レイアウトと固定レイアウトを融合 今回は2カラム構成のバナー付きサイトをレスポンシブにするテクニックを学習する。

css3 疑似セレクタその2 css3の疑似セレクタについては以前、nth-childについて学習した。今回はセレクタに対しコンテンツを挿入できる::beforeと::afterについて学習する。また、要素の1文字目や1列目を対象にするセレクタについても学習する。

画像をカテゴリ別に表示させる 画像にカテゴリを付与し、ブラウザ上で一覧表示からカテゴリ別表示に切り替える。

テキストエリア付モーダルウィンドウ 今回はiQueryでテキストエリア付モーダルウィンドウの実装方法を学習する。

3カラムグリッドデザイン 140pxのスクウェア・イメージをmargin:10px;で配置 それをulにliで4枚、2x2で並べる それを縦方向に5段並べる それを3列並べる @media screen and ～の構文でちょっとしたレスポンシブ化が可能。これについては後ほど別途学習する。…

↓↓↓このサイトを模倣した↓↓↓ 今日は実際にあるサイトの画面キャプチャから素材を切り出し styleまで仕上げるという学習をした。 試しにタイムアタックしてみたところ、約50分かかった。 1画面の小さなページだったためもう少し早くできるかと思ったが、 やっ…

環境によりデザインが崩れやすい印象のあったpositionだが、 画像のheightとwidthをしっかりしていしてやれば 思ったほど崩れないということを学んだ。 工数削減のために普段は画像をそのままの大きさで使う場合には HTML、CSSにサイズ指定することなどなか…