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

ITに関することいろいろめも。たまにアニメ。

html

web027 上付き/下付き文字で利用する要素(sup/sub) * ...

上付き/下付き文字で利用する要素(sup/sub) * ... ・supタグはsuperscriptの略で、上付き文字を表す際に使用します。 ・下付き文字はsub(subscription)を利用する。html <p>必須項目の印<sup style="color: red;">*</sup></p> ■参考 <sup>-HTML5タグリファレンス 上付き文字を表すsup要素>テキストに意</sup>…

web026 ハンバーガーメニュー

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

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…

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

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

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>

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>…

web001 動画の埋め込み

■手番 ***サービスの貼り付け ・Youtube,GoogleMapから貼りたい動画までいく。 ・共有>埋め込みコード>コードをコピペ。 <iframe width="560" height="315"src="対象のURL" frameborder="0" allowfullscreen></iframe> ※height,widthは変更可 ・htmlに貼り付ける。 ***動画ファイルの貼り付け <video autoplay controls width="320" height="240"> <source src="pastaSauce.mp4"></source></video>