webページのつくり方 | 学びの道

webページのつくり方、web制作、web作成、学びの道を歩み中!フェリカテクニカルアカデミー「東京・池袋」にてWeb作成を勉強中です。学んだ事をメモしていきます。

css3

SVG画像でアイコンを作成する方法。【高解像度なデバイスへの対応】

本日は、SVG画像でアイコンを作成する方法を記載します。 SVGとは?】 ベクトルデーター画像を描写する事が出来るXMLベースの言語です。拡大してもぼやけたりすることがなく、アイコンなどの図形の描画に適しています。(写真等の複雑な画像には向かない。)…

ウェブフォント(webfonts)を使おう!(Google Fonts:グーグルフォント)

本日は、ウェブフォント(webfonts)の使用方法を記載します。(Google Fonts:グーグルフォント) 【使用する利点】 ①PCに設定されていないフォントでも指定できる。 ②画像化する必要が無い(どうしてもフォントを変えたくない場合、画像化して表現するしか…

CSS3 演習問題

CSS3 演習問題 問題。 【問1】CSS3で影をつける場合の、プロパティ名を書きなさい 【問2】CSS3で影をつける場合、プロパティに設定する4つのパラメータ のうち、1つ目のパラメータは何を設定するか書きなさい 【問3】CSS3で角を丸くする場合の、プロパテ…

CSS3 角丸の記載方法③ 応用編:画像を表示させる

本日は、CSS3 角丸の記載方法③ 応用編を記載します。 【ポイント】 画像を表示させる事も可能です。 border-radius: 50% にする事で、円を描くことができます。 (html) <html lang="ja"><head><meta charset="UTF-8"><title>CSS 角丸テクニック</title><style>div { width: 150px; height: 150px; margin: 50px; background: gre</meta></head></html>…

CSS3 角丸の記載方法②

本日は、CSS3 角丸の記載方法② を記載します。 【記載方法のポイント】 .border-radius-xy { -webkit-border-radius: 80px 50px 20px 50px/40px 50px 50px 25px border-radius: x方向の左上 右上 右下 左下 / y方向の左上 右上 右下 左下; <html lang="ja"><head><meta name="viewport" content="width=device-width"><meta charset="utf-8"><title>border-radiu…</meta></meta></head></html>

CSS3 角丸の記載方法①

本日は、CSS3での角丸の記載方法①を記述します。 【記載方法のポイント】 border-radius: 10px 15px 20px 25px; 10 : 左上 15 : 右上 20px: 左下 25px: 右下 ※下記の記載方法ですが、角丸2(#radius2) と 角丸3(#radius3) は同じ結果となります。 ※…

CSS3  テキストシャドウの記載方法

本日は、CSS3でのテキストシャドウの記載方法を記述します。 【記載方法のポイント】 -webkit-box-shadow → css3に対応していない環境のgoogle Chrome safari -moz-box-shadow → css3に対応していない環境のfirefox box-shadow → css3に対応している環境向け…

CSS3 ボックスシャドウの記載方法

本日は、CSS3でのボックスシャドウの記載方法を記述します。 【記載方法のポイント】 -webkit-box-shadow → css3に対応していない環境のgoogle Chrome safari -moz-box-shadow → css3に対応していない環境のfirefox box-shadow → css3に対応している環境向け…