★HTML+CSS実践
スライス画像でコーディング（CSS）
ワイヤーフレームを作成 HTML記述例 ワイヤーフレームに沿ってマークアップ Google Fonts（Noto Sans Japanese） FontAwesome（アイコン） <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>
画像スライス １枚画像から、画像を書き出す ガイドライン付き素材 mimipen.net blog.mimipen.net スライスツール ガイドに沿って、画像をドラッグする 「スライス選択ツール」で、スライスエリアをダブルクリック ダイアログボックスで、ファイル名を記述 …
positionを使ったレイアウト ※画像：photoAC 簡単！肉じゃがの作り方 煮崩れしにくい肉じゃがレシピです。 完成した肉じゃがの写真 材料 牛肉 じゃがいも 玉ねぎ にんじん 糸こんにゃく 調味料 水 手順 具材を食べやすい大きさにカットします。 カットした具…
2カラムレイアウト(４) ysd-lab.jp HI University 大学案内 学部・大学院 国際交流 入試情報 キャンパスライフ Information 2013.10.30 オープンキャンパス11月20日 開催！ 2013.09.12 【重要】男子寮の料金プラン変更について 2013.08.02 iWDC&iSFC 2013 WO…
２カラムレイアウト（３） ysd-lab.jp CAKE SHOP ホーム CakeShopについて ケーキメニュー お店のご案内 お知らせ お問い合わせ トピックス 2013.10.30 CAKE SHOP 創業40周年記念ケーキ販売決定！ 2013.09.12 【重要】全国郵送に関するお知らせ 2013.08.02 8…
２カラムレイアウト（２） 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日〜16日ま…
富士山の紹介 （PC用）- CSS リセット ブラウザーの持つCSSの初期値を「0」にする @charset "UTF-8"; /* -------------------------------------- reset -------------------------------------- */ * { margin: 0; padding: 0; box-sizing: border-box; } u…
富士山の紹介（PC用）- HTML クラス名の付与 クラス名は、外側の囲みから内側に向かって付与する <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>【コーディング練習】富士山の紹介</title> <link rel="stylesheet" href="css/style.css"> </head> <body> </body></html>
富士山の紹介（PC用）- ワイヤーフレーム レスポンシブWebデザインにおけるHTML・CSSのコーディングテクニック chot.design
2カラムレイアウト(１) ロゴは、幅300pxで作成する テキストは、架空 コンテンツ幅「960px」 unsplash.com ウェブサンプル株式会社 ホーム 会社概要[f:id:web-0220:20230206233859j:plain] 事業内容 アクセス お問い合わせ 私たちはWebで価値を想像する会社…
CSSによるページ構築の手順 入力内容のチェック 入力内容（文法）チェックは、必須です W3C Markup Validation Service（HTMLのチェック） W3C CSS Validation Service（CSSのチェック） 文書構造のグループ化 グループ化とは、div要素によるコンテンツのブ…
２カラムページ（文書構造） テキストP.096〜 文書構造（セマンティックなマークアップ） HTML Living Standard（日本語訳） セマンティックWeb テキストP.037 検索サイトに正確な情報を提示する Webアクセシビリティも考慮する Webサイトを構成するパーツ …
