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

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

2014-06-01から1ヶ月間の記事一覧

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

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

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

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

CSS3 RSSを取得し表示させる。

本日は、CSS3 RSSを取得し表示させる方法を記載したいと思います。 1.yahoo 【html】 <html lang="ja"><head><meta charset="UTF-8"><title>Yahoo! トピックスの RSS を表示</title><style>span { margin-left: 1em;}</style></head><body><h2>RSSを表示</h2></body></html>

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に対応している環境向け…

WordPressでHPを作成【準備】

WordPressでHPを作成する為に準備を行います。 【準備】 Xamppを起動します。 Dreamweaverを起動します。 Dreamweaverのサイト管理から、先日作成したサイトを選択します。 ローカル環境でWordpressを開きます。 3.Dreamweaverのサイト管理から、先日作成し…

WordPressでHPを作成する際の利点と留意点

WordPressでHPを作成する前に利点と留意点 WordPressを使用する利点 PHPを使用する為、頻繁に更新作業を行う場合に作業が楽になる。(ブログなど) 無料で使用できる。 web上に、無料テンプレートが記載されているので、参考に出来る。 WordPressを使用する…

xamppのローカル環境内で、WordPressを使用出来る様に設定する。【サイト管理編】【Windows】

本日は、xamppのローカル環境内で、WordPressを使用出来る様にサイト管理を行いたいと思います。 データ保存の為のフォルダを作成する。 サイト管理を行う。 注意】サイト管理が正しく行われないとXamppがきちんと動きません。 XAMPPを使用する理由】WordPre…

xamppのローカル環境内で、WordPressを使用出来る様に設定する。【インストール編】【Windows】

本日は、xamppのローカル環境内で、WordPressを使用出来る様にインストールして設定します。【Windows】 1.WordPressをダウンロードする。 http://ja.wordpress.org/ を開き、DLボタンをクリック。 →DLされたwordpressフォルダを解凍 → C:\xampp\htdocsに保…

PHP メールフォーム【init.php】【style.css】

PHP

PHP メールフォーム【init.php】【style.css】 について記載します。 ※但し、あくまでも練習です。 下記5枚のファイルで構成されます。 index.php thanks.php check.php init.php style.css 本日は、4.init.php 5.style.css について記載します。 【init.php…

PHP メールフォーム【check.php】

PHP

PHP メールフォーム【check.php】について記載します。 ※但し、あくまでも練習です。 下記5枚のファイルで構成されます。 index.php thanks.php check.php init.php style.css 本日は、3.check.php について記載します。

PHP メールフォーム【thanks.php】

PHP

PHP メールフォーム【thanks.php】について記載します。 ※但し、あくまでも練習です。 下記5枚のファイルで構成されます。 index.php thanks.php check.php init.php style.css 本日は、thanks.php について記載します。

PHP メールフォーム【index.php】

PHP

PHP メールフォーム【index.php】について記載します。 ※但し、あくまでも練習です。 下記5枚のファイルで構成されます。 index.php thanks.php check.php init.php style.css 本日は、1.index.php について記載します。

PHP 習得度確認試験4

PHP

問1】変数「$a」に「1000」を代入し、 「$a」の値をブラウザ上に表示するよう記述しなさい。 Q.

ホームページ制作にあたって Illustratorでカラムで段組みの作成(インデザイン手法)

ホームページ制作にあたって カラムで段組みの作成(インデザイン手法)について記載します。 1.カラム設定したいと思う範囲を、文字ツールで指定します。 ①文字ツール → ②ドラッグで範囲を指定 2.エリア内オプションを表示させ、行数等を指定します。 書式…

ホームページ制作にあたって イラストレーターで作成したグリッド線を消す方法

ホームページ制作にあたって イラストレーターで作成したグリッド線を解除する方法 1.解除したいグリッド線を → Ctrl + Shift + ダブルクリック ※複数ある場合は、1を繰り返して一つずつ解除して下さい。