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

ねっとぱんだ

webdesignとprogramingの勉強ブログ。

【CSS】animationの記述法方、ショートハンド等のまとめ

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

【CSS】transformプロパティ

cssのtransformについて改めてまとめました。 translatetlanslate(x軸の移動,y軸の移動); transform:translate(100px,100px); tlanslateX(x軸の移動); transform:translate(100px); tlanslateY(y軸の移動); transform:translateY(100px); tlanslateZ(z軸の移…

【CSS,HTML】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タ…