ねっとぱんだ-プログラミング勉強ブログ-

Webデザイン、プログラミングの勉強ブログ。

HTML・CSS

【javascript・css3】jsで作るtoggleメニュー

DEMO 目標 Timer処理でのスライドイン・アウト表現 javascriptでcss3のアニメーションを動かす 反省、改善点 コードの簡略化 heightを自動で取得できるようにする。 css3でもう少し簡単にかけるかもしれない。 コード html <div> <p id="nav_btn"> <span id="mark"> <span></span> <span></span> </span> </p> <ul id="toggle_menu"> <li><a href="#">HOME</a></li> <li><a href="#">ABOUT</a></li> <li></li></ul></div>

【HTML PHP】フォームの作成

基本的なフォーム 引用:http://www.kanzaki.com/docs/html/htminfo31.html form 形,形状、方式HTMLでは「何を」「どこに」「どうやって」送るかを示す手段 フォームの主要な属性 action属性 データを受け取るプログラムを指定。action属性の値はデータを受…

【HTML,CSS】画像のレスポンシブ、retina対応

DEMO ①imgタグのレスポンシブ 横幅のみ%等指定。 ②background-imageのレスポンシブ heightはpaddingでとる。background:url(300.jpg) no-repeat center/cover; ③解像度によって画像を置換 高解像度の画面で見た場合、mediaqueryで条件分岐させ画像を解像度の…

【HTML,CSS】レスポンシブルwebデザイン

授業のメモ RWD (Responsive Web Design) 同じhtmlの見え方を、デヴァイスや横幅別にスタイルシートで分けていくこと。基本的にHTMLは変えない。 動的な配信 pcと sp フォルダに分けられる。それぞれ別のHTMLで製作。.htaccessというファイルを作りスマホで…

【HTML5】セクショニング・コンテンツ【随時更新】

セクショニング・コンテンツとは コンテンツの塊をグループ化する。 HTMLのアウトラインを作る。 アウトライン 輪郭、HTMLのツリー構造の骨組み。 h1~h6は自動でアウトラインを作る。 HTML4まではh1~h6だけでアウトラインを作っていたため、閉じタグがなかっ…

【HTML5,CSS3】floatと回り込み

たまに分からなくなってしまうfloatについて、ここでしっかり把握しておこうと思い改めて検証しました。 float 通常の流し込みから外れて、要素を左右どちらかに移動させ、他の要素を回り込ませる処理。 他のfloatした要素の辺に触れると左右への移動が止ま…

【HTML,CSS】要素を横並びにする基本的な方法を復習

floatを使うfloatでliがそれぞれ左寄せになるため横に並びます。 li{ llist-style-type:none; margin:50px auto; width:310px; } li{ float:left; } a{ display:block; background:#faa; height:40px; width:100px; } ul li:nth-of-type(2) a{ background:#a…

【CSS】CSS3でアニメーションに関係するプロパティ(animation , transition , transform)

animation transition transform についてまとめます。 animation animation-nameで指定した名前を@keyframesで呼び出して使う。 div.box { /*animeを指定*/ animation-name:anime; } @keyframes anime{ ここにanimeの動きを記述していく } @keyframesの書き…

【CSS】ボタンをアニメーションさせる

transformでボタンのアニメーションを作りました。ハンバーガーメニューの変形不要論もあるハンバーガーメニューですが、アニメーションの練習として製作してみました。上下二本が傾いてXに変形Demohtml <div class="button1"> <span></span> <span></span> <span></span> </div> css /*button*/ .button1{ position:relative; h…

ulとolとdlの使い分け

・ulとolとdtの違い。 ul unordered list(unorderd=順序が置き換わっても意味が伝わる様内容に使う。 ol ordered list 順序が必要な内容に使う。 ol = ordered list(指定されたリスト) dl definition list(definition定義)タイトルと説明文が必要なとき…

CSSで基本的なレイアウトの練習

cssの基本的なレイアウトの枠組みを記述してみます。 ①float layout #container{ background-color:#eee; width:700px; height:550px; } #header{ color:#fff; height:100px; background-color:#000; } #side{ height:450px; width:180px; float:left; borde…

CSSの要素の順番(ボックスモデル)

大まかな要素の順番一般的には外側のエリアから内側に行くごとに重なっていくイメージ。 content border background-image background-color content area(width height) padding margin その他のプロパティより詳細に知る為にはW3CのSpecificationを見た方…

CSSで画像に乗算やスクリーン等の加工をする(background-blend-mode)

CSSで画像に乗算やスクリーン等の加工ができるプロパティ、background-blend-modeについてまとめてみました。 background-image: url("画像のパス");background-color:重ねる背景色background-blend-mode:どうブレンドするかの値;} "background-image" "back…