ねこきっくぱんちのメモ帳

webの勉強メモです。 HTML,CSS,JavaScript,PHP,Illustrator,Photoshopなど。

css

web026 ハンバーガーメニュー

ハンバーガーメニュー ■考え方 ・span要素のみで、cssで装飾していく。 ・positionで配置 ・擬似クラス(::before,::after)で要素を追加する。 ・::afterは::beforeの直下に配置されるため、marginの取り方をうまく計算する。 ・表示されるコンテンツは、jQue…

web025 CSSのみでのキャプションエフェクト

css

CSSのみでのキャプションエフェクト ■考え方 ・positionレイアウト ・キャプションはimgの下に配置しておき、overflow:hidden;で非表示にしておく。 ・hoverでpositionのbottomを変更し表示する。 ・リセットcssにfigure,figcaptionなど入れ忘れに注意。■コ…

web023 ヒーローヘッダー(マルチイメージ)

ヒーローヘッダー(マルチイメージ) ■考え方 ・2カラム(header,container)でfloatをかける。 ・高さは単位vhで調整。 ・横は%指定。 ・headerのロゴを中央指定★ポイント■コード html <body> <header> <img src="img/logo.svg" alt="logo"> </header> <div id="container"> <div class="ph topL"> <div class="text"> <h2>Frog</h2> <p>~Episode1~</p> </div> </div> <div class="ph topR">…</div></div></body>

web022 hover(border-bottom)でリストがずれないやり方

hover(border-bottom)でリストがずれないやり方 ■考え方 あらかじめborder-bottomを入れておく。 色は背景色ど同色にしておき、hover時に上書きで色を変更する。 ※レスポンシブ対応でliを上下させた際にガタガタとカラム落ちする場合があるためそれの防止の…

web021 ヒーローヘッダー

ヒーローヘッダー ヒーローヘッダー(Hero Header)とは、ウェブサイトのファーストビューに全画面の画像を使用するなど、巨大なイメージで構成されたウェブサイトのことを指します。(引用) ■考え方 ・ビューポートの高さを考慮( E { height: [x%/100%]vh …

web020 CSSシグネチャー

CSSシグネチャー 各index.htmlのbody要素にidを指定し、cssで対象idを指定して記述していくやり方。■利用シーン ページが遷移するたびに、body(背景色)を変更させる場合など■記述 ・各index.htmlのbody要素にidを付与 ・各index.htmlのtitleを変更 → neko-ca…

web019 リキッドデザイン(2カラム)で1カラムのみ横幅を固定(width:calc(XX% - YYpx))

css

リキッドデザイン(2カラム)で1カラムのみ横幅を固定(width:calc(XX% - YYpx)) width:calc(XX% - YYpx);■利用シーン リキッドデザインでサイドバーに広告を載せており幅を固定し、コンテンツだけリキッドとする場合。 ※caniuseでほぼ全てのブラウザで利用…

web018 スキルレベル確認(html,css)

スキルレベルの確認(html,css)現在のレベル:2.8位 ノーマル (基礎的な知識があり,ある程度の画面を作れるようになった段階) 次のレベル:3 中級者 (Webアプリの開発プロジェクトで1人月としてカウントできる水準)■参考 HTMLとスタイルシート(CSS)の業…

web017 transitionプロパティ(時間的変化の過程)

css

transitionプロパティ(時間的変化の過程) 主に:hover時の動きに時間的変化をつける。■ポイント ・ショートハンドである。 ・各プロパティのざっくり説明 transition-property:どこを(背景色を) transition-duration:どれくらい(1.5秒位で) transition-…

web015 コーディング規約 (個人)

コーディング規約 (個人) 悩まず迷わず効率的な開発ができるよう、 考えて決めた事に関するコーディング規約を記載していきます。 ※随時更新0.心得的なところ ・htmlは「文書構造」を作る。 ・htmlの文法及びアウトラインチェックが完了後、css記述にうつる…

web014 HTML・CSSのテンプレート(スニペット)

HTML・CSSのテンプレート(スニペット) 新規サイトを作成する場合のテンプレートに使用しているものです。■コード <html lang="ja"> <head> <meta charset="utf-8"> <title>TEMPLATE</title> <meta name="Description" content="title,h1,pなどのキーワードを含めての紹介文"> <meta name="viewport" content="width=device-width"> </meta></meta></meta></head></html>

webめも011 ナビゲーションの中央寄せ(2パターン)

css

サンプル1.ボタン間に余白をつくる場合 liをインライン要素化してtext-align:center;で中央寄せ。※ブロック要素の中央寄せは「margin: Xpx auto;」 ※この方法で余白をなくすテク ・htmlのliの改行を無くし1行で記述すると余白を詰めることは可。可読性下が…

webめも009 text-shadow,box-shadowによる装飾

css

■結果(text-shadow) ■コード html <section class="textShadow"> <h3>text-shadow: x軸 y軸 ぼかし幅 色 ;</h3> <ul class="sample font"> <li>Drop Shadow</li> <li>Grow</li> <li>Bevel</li> <li>Embos</li> <li>Stroke</li> <li>Neon</li> </ul> </section> css h3 { padding: 20px; } .sample>li { margin: 5px; padding: 5px; bord…

web002 CSS Sprite

CSSスプライトの1事例■手番 ※Illustratorで作成したスプライト用の画像サイズ980x110 ※1ボタンは140x50 ・ナビゲーションとしてリスト作成(html) ・background-imageで画像を指定(css) ・bakcground-positionで画像の位置指定(css)■コード html <div class="header"> <h1><img src="img/h1-logo.png" alt="hatena"></h1> <ul class="nav"> <li id="top"><a href="#">トップペ</a></li></ul></div>…