Webデザインのこと、いろいろ

Webデザインにまつわることを自分用にメモしています。

css

CSS3:flexbox

CSSを一行プラスするだけで横並びにできる 横並びになった要素の高さが最初から揃ってる 要素を上下左右、好きな順序に並び替えられる 高さの異なる横並びの要素を、簡単に上下中央揃えにできるナビゲーション版 Flexboxを使ったナビゲーション:完成版にリ…

CSS:ナビゲーション:基本

★レギュレーション:複数ページをつくるときのルールになる型 いつでも作れるようにしておく ◎縦ナビゲーション 縦ナビゲーション:完成版にリンク <html lang="ja"> <head> <meta charset="utf-8"> <title>縦ナビゲーション</title> <script src="js/jquery-2.2.1.min.js"></script> <script> $(function(){ //ページが開いたら $('p').on('click',function(){ }); }); </script> <style> /*re…</meta></head></html>

CSS:レスポンシブウェブデザイン

RWD:完成版にリンク★レスポンシブルレイアウトの際、どこに%を指定するのか <html lang="ja"> <head> <meta charset="utf-8"> <title>RWD</title> <link rel="stylesheet" href="style.css"> </head> <body> <div id="container"> <header><h1>header</h1></header> <nav> <ul> <li><a href="#">ボタン1</a></li> <li><a href="#">ボタン2</a></li></ul></nav></div></body></html>

CSS:RetinaDisplay対応の画像

RetinaDisplay対応:完成版にリンク★高解像度ディスプレイで表示するために、2倍のサイズの画像を用意する ★googlechromeで検証する機能があり、端末を持っていなくても確認が可能 <html lang="ja"> <head> <meta charset="utf-8"> <title>RetinaDisplay対応</title> <link rel="stylesheet" href="retina01.css"> <meta name="viewport" content="width=device-width"> </meta></link></meta></head></html>

jQuery:メディアクエリ:楽しいおかず2

楽しいおかず:完成版にリンク★レイアウトはかわらず、固定のまま <html> <head> <meta charset="utf-8"> <title>楽しいおかず</title> <meta name="viewport" content="width=device-width"> <link rel="shortcut icon" href="favicon.ico" type="image/vnd.microsoft.ico"/> </link></meta></meta></head></html>

CSS3:hover時のアニメーション

テキストp295~ transform:完成版にリンク★transition / transform / translate の使い方に気をつける <html> <head> <meta charset="utf-8"> <title>テキストp295~ transform</title> <style> div { width: 200px; height: 200px; } p { font-weight: bold; text-align: center; padding-top: 20px; } /*---------</meta></head></html>…