2022-03-01から1ヶ月間の記事一覧
富士山の紹介 （PC用）- コーディングポイント header部 ロゴ「h1」の右開きを「auto」にする（ロゴを囲む要素に「max-width」が指定されている場合、autoが設定可能） nav内の２番目からの「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) ysd-lab.jp CAKE SHOP ホーム CakeShopについて ケーキメニュー お店のご案内 お知らせ お問い合わせ トピックス 2013.10.30 CAKE SHOP 創業40周年記念ケーキ販売決定！ 2013.09.12 【重要】全国郵送に関するお知らせ 2013.0…
LESSON2：２カラムレイアウト(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年を…
