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

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

ワードプレス 予約システムのカレンダーを表示する方法

本日は、ワードプレスで予約システムのカレンダーを表示する方法を記載します。 1.予約システムの設定 ①予約システム → 各種設定 →予約全般のパラメーターにチェックを入れます。 ↓ 2.予約品目の設定 ①予約品目 → ②新規予約品目 ↓ ③名称『会社説明会予約…

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を繰り返して一つずつ解除して下さい。

ホームページ制作にあたって イラストレーターでグリッド線の下地を作成する。

ホームページ制作にあたって イラストレーターでグリッド線の下地を作成する方法を記載します。 【出来上がり】 1. イラストレーターを開き、・幅210mm ・高さ297mm で新規作成します。 2. ・幅190mm ・高さ277mmの四角を作成します。(①長方形ツー…

ホームページ制作にあたって 文字等のバランスについて

ホームページ制作にあたって、文字や写真の配置方法が分からなかったので、 お聞きしてみました。 Q. HP画面で、文字や、写真等、配置するコツはありますか? A. HP画面をこうした紙(A4)に例えると・・・ 一番情報の多い箇所を下からエンピツで支えたと仮…

PHP プログラミングの準備 ④XAMPP 設定の確認

PHP プログラミングの準備 ④XAMPP 設定が正しく反映されているかの確認を行います。 Xampp → Admin ↓ Xampp管理画面が開いたら、phpinfo( )を開きます。 と、下記の画面が開きます。 設定した内容を確認します。 反映されてました。 これで、プログラミング…

PHP プログラミングの準備 ③XAMPP php.iniファイルの変更

PHP プログラミングの準備 ③XAMPP php.iniファイルの変更を行います。 今回で設定は完了します、頑張ってまいりましょう! 1.php.iniファイルを開きます。 C:¥Xampp¥PHP¥php.ini 番外1.】php.ini見つからない、php.iniが無い場合 環境によって、php.iniの見…

PHP forを使用して、九九表を作成する。

PHP

PHP forを使用して、九九表を作成してみましょう。 出来上がり例 では、入力してみましょう。 1. 縦軸と横軸の1~9を表示。 <body><h1>九九表</h1><table><tr><th>&nbsp;</th><th>1</th><th>2</th><th>3</th><th>4</th><th>5</th><th>6</th><th>7</th><th>8</th><th>9</th></tr>'; print '<th>' . $i . '</th>'; print '</tr>' .…

PHP 送信データを受け取る 【radio】

PHP

PHP 送信データを送るinput(入力画面) → 受け取るoutput(吐き出し画面)を作成しよう。【radio】 復習 ラジオボタン <input type="radio" name="※※" value="※">※</label> 送信ボタン input type="submit" value="送信" input(入力画面) ↓ output(出力画面) input(入力画面) <html lang="ja"><head><meta charset="UTF-8"><title>ラジオボタン</title></head><body></body></html>

PHP 送信データを受け取る 【checkbox】

PHP

PHP 送信データを送るinput(入力画面) → 受け取るoutput(吐き出し画面)を作成しよう。【checkbox】 PHP 送信データを受け取る 【checkbox】 → input(入力画面) ↓ PHP 送信データを受け取る 【checkbox】 → output(入力画面) input(入力画面) <html><head><meta charset="utf-8"><link rel="stylesheet" href="style.css"><title>無題ドキュメ</title></link></meta></head></html>…

PHP 送信データを受け取る 【Textbox】

PHP 送信データを送るinput(入力画面) → 受け取るoutput(吐き出し画面)を作成しよう。【Textbox】 input(入力画面) ↓ output(出力画面) input(入力画面) <html><head><meta charset="utf-8"><link rel="stylesheet" href="style.css"><title>無題ドキュメント</title></head><body><h1>入力フォームあれこれ</h1></body></html>

PHP 入力された名前に挨拶を返す。input(入力画面)とoutput(吐き出し画面)を作成しよう。

PHP

PHP 入力された名前に挨拶を返す。input(入力画面)とoutput(吐き出し画面)を作成しよう。 input(入力画面) ※画面例 <html><head><meta charset="utf-8"><title>PHPで挨拶をしようinput</title></head><body><form method ="POST" action="request2.php"> <p></p></form></body></html>