★実践演習
dl:description list description listの略で用語説明型リストを表す要素 HTML5より前は、definition listの略で定義リストを表す要素でした dl要素内は、dt:description term と dd:description details 以外入りません dtとddの横並び 横に並べて1行と…
Cafeコーディング - CSS記述 記述例 @charset "UTF-8"; /* ------------------------------------------ reset ------------------------------------------ */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } ul, li { list-s…
Cafeコーディング - サイト設計 共通モジュールの設定 幅「1040px」で、左右空きを均等にするために共通「.container」を設定します 記述例 <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width"> <title>【コーディング練習】Cafeサイト</title> <link rel="stylesheet" href="css/style.css"> </link></meta></meta></head></html>
画像スライス 1枚画像から、画像を書き出す 素材 mimipen.net blog.mimipen.net スライスツール ガイドに沿って、画像をドラッグする 「スライス選択ツール」で、スライスエリアをダブルクリック ダイアログボックスで、ファイル名を記述 すべてのスライス…
富士山の紹介 (PC用)- コーディングポイント header部 ロゴ「h1」の右開きを「auto」にする(ロゴを囲む要素に「max-width」が指定されている場合、autoが設定可能) nav内の2番目からの「li」の左空きを「margin-left」で設定する key-visual部 テキスト…
富士山の紹介(PC用)- ワイヤーフレーム 模写コーディングの手順 ワイヤーフレームを作成 クラス名を付与 書体・line-heightを決める ワイヤーフレームを作成 クラス名の付与 クラス名は、外側の囲みから内側に向かって付与する <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width"> <title>Document</title> </meta></meta></head></html>
富士山の紹介(PC用)- コーディング レスポンシブWebデザインにおけるHTML・CSSのコーディングテクニック chot.design HTML記述例 文書構造を構築 <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width"> <title>Document</title> <link rel="stylesheet" href="css/style.css"> </head> <body> </body></html>
PC版を作成 ロゴは、幅300pxで作成する テキストは、架空 コンテンツ幅「960px」 footer部は、positionでブラウザー下部に固定 unsplash.com ウェブサンプル株式会社 ホーム 会社概要 事業内容 アクセス お問い合わせ 私たちはWebで価値を想像する会社です。…
2カラムレイアウト(3) HI University 大学案内 学部・大学院 国際交流 入試情報 キャンパスライフ Information 2013.10.30 オープンキャンパス11月20日 開催! 2013.09.12 【重要】男子寮の料金プラン変更について 2013.08.02 iWDC&iSFC 2013 WORKSHOPについ…
LESSON2:2カラムレイアウト(2) ysd-lab.jp CAKE SHOP ホーム CakeShopについて ケーキメニュー お店のご案内 お知らせ お問い合わせ トピックス 2013.10.30 CAKE SHOP 創業40周年記念ケーキ販売決定! 2013.09.12 【重要】全国郵送に関するお知らせ 2013.0…
LESSON2:2カラムレイアウト(1) ysd-lab.jp SHELLY'S NEWS PROFILE DISCOGRAPHY MEDIA/LIVE CONTACT TOPICS 2013.10.30 TV/CM日本グランプリ 主演賞に選ばれました! 2013.09.12 【重要】チケット発送料金の変更について 2013.08.02 勝手ながら、8月12日〜1…
ナビゲーションの種類(PC版) ボタン形式(面) ロゴとナビゲーションを横に並ぶ ボタン形式(面) <html lang="ja"> <head> <meta charset="UTF-8"> <title>SHELLY’S</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div class="container"> <header class="header"> <h1 class="logo"><a href="#"></a></h1></header></div></body></html>
ワンカラム - コーディング例(プロフィール) プロフィール - ワンカラム <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width"> <title>【コーディング練習】ポートフォリオ</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div class="container"> </div></body></html>
ワンカラム - コーディング例 観光ガイド - ワンカラム <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width"> <title>石垣島観光ガイド</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div class="container"> <header class="header"> <h1>石垣…</h1></header></div></body></html>
ワンカラム 情報を1つの文脈で伝えることができる スマホ画面のデザインと統一感が生まれる alan-trigger.info 観光ガイド - ワンカラム 石垣島観光ガイド 石垣島は八重山諸島の中で一番大きな島で、沖縄で3番目に大きな島です。 気候は亜熱帯気候で、1年を…