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

ねっとぱんだ

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

【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でボタンをアニメーションさせる(Todays code)

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

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…

nameとidとclassの違いは?

今日はidとname、classの違いについてまとめてみました。 id 原則として固有のもので、同じ文章内で重複して書く事はできない。 class その名の通りグループを指定するもので、複数のタグにつける事ができる。 name idと同じようなものだそうですが、formタ…