Webデザインの勉強と製作 | あかとんぼ

フェリカテクニカルアカデミーの学習をベースに、Webについての勉強と製作の過程をまとめています。

[HTML][CSS] [HTML][CSS]リード文とは/デザイン豆知識/line-heightの性質/CSSの書き方

はじめに 今日は基礎のまとめとして、ワンカラムサイトのレイアウト演習を行いました。 ちょっとしたテクニックについて備忘録的にまとめました。 リード文とは HTMLではp.leadでクラス指定することがありますが、リード文自体の意味をはっきり理解できてい…

[CSS] [Web] [CSS]レイアウトの種類

はじめに 今日は主なレイアウトの種類について学びました。 レイアウト大別 グリッドレイアウト 文字や画像、カラムなど一定の規則に従い格子状にレイアウト 整然としたイメージ 主にfloatを使って要素を配置 フリーレイアウト グリッドにとらわれずに配置 H…

[HTML][CSS]ワンカラムページの制作

はじめに 今日はHTML+CSSを使い、画像を多く使うワンカラムのWebページを制作しました。 ポイント ブロック要素とインラインレベル要素を使い分ける 画像ボタンを横に並べる 画像のalt属性を有効に使う backgroundとimgの違いを意識する 適切に画像を配置す…

[CSS]ボックスモデルをもう一度理解

CSS

はじめに 今日は重要なボックスモデルをもう一度基礎から振り返りました。 ボックスモデルの基本 ボックスモデルの親子関係 ボックスモデルの基本 ボックスの横幅は、widthで指定した横幅にpaddingで指定した余白と、borderで指定した罫線太さを足したものに…

[CSS]ボックスモデルについて

CSS

はじめに 今日はボックスモデルの概念と、横レイアウトに必須であるfloatプロパティの概念を学びました。 ボックスモデル HTMLでマークアップした要素は箱とみなされます。 ボックス幅は、 コンテント領域幅(width) + パディング + ボーダーの太さ + マー…

[CSS]擬似クラス、ワイヤーフレーム制作、リセットCSS

CSS

はじめに 今回は擬似クラスの使い方を学び、HTML+CSSによるwebページの制作(マークアップ〜ワイヤーフレーム設計〜スタイルシートの適用)を行いました。また、CSSリセットの方法についても学習しました。擬似クラスとは擬似クラスとは、文書の持つ木構造か…

[CSS]CSSの書式と記述、セレクタの種類と使い分け

CSS

はじめに 今日はCSSを記述するための基本書式と、その記述方法を勉強しました。さらに代表的なセレクタの種類と、使い分け方について学びました。 CSSの基本書式 セレクタ{プロパティ:値;} h1 {color: #FF0000;} セレクタ:範囲を指定 プロパティ:属性…

[CSS][基礎知識]CSSとは

はじめに 今日はCSSの基本を勉強しました。 CSSとは Webページのレイアウトを定義する規格。これまで、WebページのレイアウトはHTMLを用いて記述され、HTMLにはレイアウトに関する仕様が大量に取り込まれたが、これは、文書の論理構造を記述するという本来の…

[HTML]ブロックレベル要素とインライン要素

はじめに 今日は文書構造の理解に必須である、ブロックレベル要素とインライン要素について勉強しました。 ブロックレベル要素とインライン要素とは ブロック要素は「入れ物」インライン要素は「中身」にあたります。 ブロック要素の中には、インライン要素…

[HTML]マークアップの方法とbody要素

はじめに 今日はbody要素の記述方法(マークアップ)の基本と、body内の代表的な要素について勉強しました。 body要素のマークアップ 見出しと段落 body要素の内容は、主に「見出し」と「段落」から成り立ちます。 見出し(Heading)→内容が一目で把握できるも…

[HTML]head要素

はじめに 今日はhead要素の記述内容について学習しました。 HTML文書のメタデータ メタデータとは、HTMLでは“その文書に関する様々な情報”を意味します。 HTML文書のメタデータは、head要素の中に、 <title>タイトル <base>基準URL <link>リンク情報 <style>スタイルシート <script>スクリプト </link></base>…

[HTML]マークアップとHTMLの構造

はじめに 今日はHTMLのマークアップの記述方法と、HTMLの構造について学びました。 マークアップとは マークアップ(Markup)マーク(目印、荷札、タグ)をつけること。 日本語の情報はそのまま理解表示されない→言語指定 マークアップし意味づけることで表示…

[HTML][基礎知識]HTMLとは

はじめに 今日はHTMLの基礎知識について学習しました。 HTMLとは ブラウザに情報を伝えるには、HTMLで記述する必要があります。 Webで情報を発信するには必ずHTMLのルールを理解しなければなりません。 HTML:HyperText Markup Language ・Webページを記述す…

[Web][基礎知識]Webページの表示のしくみ

はじめに 今日はWebページがどうやって表示されているかを学びました。 Web表示の仕組み クライアント:自分のPC サーバ:プロバイダのデータ格納場所 クライアント→サーバ URLで指定されたHTMLのファイルを要求 サーバ→クライアント HTMLファイルを提供 ク…

[IT][基礎知識]ノイマン型コンピュータ

はじめに 今日はノイマン型コンピュータの基本的な仕組みについて学びました。 コンピュータ(computer)とは 広義には計算機、狭義には計算開始後人手を介さず計算終了まで動作する機械 つまり計算する道具 世界初のコンピュータ…ABC(1949) 当時は真空管の配…

[Web][基礎知識]インターネットとWWW

はじめに 今日はインターネットとWWWの基本的な仕組み、成立過程について学びました。 インターネット(Internet)とは インターネット・プロトコル(IP)技術による、コンピュータ間のネットワーク全体のこと。 WWW(World Wide Web)とは インターネット上で提供…

[基礎知識]Webへの心構えと日本におけるWeb

はじめに 初学者が学習を始めるにあたって、デザイナーとしての心構えやあり方を学びました。 Webの使われ方 Webにおける<ゴールデンタイム>は<パーミッションタイム>。 それぞれに許された時間のこと。ユーザに多大な選択の自由がある。 人々の許された…