未経験のwebサイト制作の勉強

未経験からwebサイト制作の勉強をし、現在制作会社で働いております。

2019-09-01から1ヶ月間の記事一覧

Flexboxの使い方

Flexbox(Flexible Box Layout Module)はCSS3の新しいレイアウトモジュールで、複雑なレイアウトを今までより少ないコードでフレキシブルなボックスを組むことが出来ます。以前からあった技術ですが、各ブラウザーによって書き方が違ったり、仕様が変わった…

高解像度ディスプレイへの対応

Retinaディスプレイ Retinaディスプレイの特徴は画面解像度の高さにある。iPhone 4の画面サイズは前モデルのiPhone 3GSと同じ3.5インチのままであるが、Retinaディスプレイの搭載によって解像度は320×480ピクセルから640×960ピクセルに、つまり倍になってい…

input要素にcssを適用させる

php

フォームで使用するinputやtextareaなどの要素は他の要素に比べて、ブラウザやデバイスのデフォルトのスタイルシートが多く指定されています。 特にこだわりがなければこのまま使用したり、多少手を加えるだけということもありますが、異なるブラウザやデバ…

フォームのパーツにアニメーションを追加する「pretty checkbox」

php

チェックボックスやラジオボタンにclassを加えるだけで、さまざまなデザインのチェックボックスとラジオボタンが実装できるラリブラリ「pretty checkbox」。 角を丸くしたり、カラーをつけたり、アニメーションをclassを加えるだけで簡単に実装できます。lok…

xamppでルートパスを使えるようにする

php

相対パスと絶対パスに対して、3つ目のパスとしてルートパスというものがあります。 ルートパスとはサーバーのルート(一番上の階層)からみてのパスになります。PHPなどでファイルを呼び出すような時にはこのルートパスが非常に便利です。 しかし、ルートパ…

データベースからデータを取得する

php

データベースからデータを取得するにはSELECT文を使います。 select フィールド名 from テーブル名 = 値 where 抽出条件;フィールド名を1つ1つ指定しても良いのですが、全部を指定する場合はアスタリスク*を使います。 テーブルの中身を一括で取得する場合 '…

PHPでの配列

php

配列はJavascriptでも出て来ましたが、まずは配列の特性を復習しましょう。 通常、変数は1つの値しか入れる事が出来ず、新しい値を入れると上書きされてしまいます。一方、配列ではひとつの箱に複数の値を入れることができます。データベースと連動させる事…

データをフォームからデータベースに保存する

php

今回はブラウザー上のフォームで入力したデータをデータベースに自動保存出来るようにします。まずはXAMPPに新しいデータベース「form-0315」を作ります。 その次に以下の内容でテーブルを作成。 カラムを作る際には、そのカラムのデータ型に注意しましょう…

phpでのヒアドキュメント

php

PHPで何行にも渡る長い文章を出力する場合、ヒアドキュメントを使うと改行など自由に使ってテキストを出力させる事が出来ます。 また、長い文字列を変数に代入する際にも使用します。 ヒアドキュメントの場合 正式名称は「PHP: Hypertext Preprocessor」で…

メールフォーム(データベースに接続してないバージョン)

php

メールフォーム(データベースに接続してないバージョン) 今回のメールフォームは非常にシンプルでデータベースには接続せず、フォームを記入してくれた人とフォームの管理者(自分)に、フォームに記入された内容がメールで届くようになっています。 mb_se…

PHPでのセッション

php

セッション(session)とは セッションとは、コンピュータのサーバー側に一時的にデータを保存する仕組みのことです。たとえば、あるECサイトへのログイン情報やユーザー情報など、ユーザーに直接紐づくようなデータをセッションに格納して使ったりします。 …

お問い合わせフォーム|入力画面に戻る

php

入力画面に戻る 何か入力ミスをして、入力画面に戻った際に入力内容が全て消えていると、また最初から記入する必要があります。入力画面に戻った際に入力したデータが保持されていれば、訂正したい箇所だけ直してまた送信する事が出来ます。細かい事ですが、…

PHPでのif文

php

if文を使うことで、プログラムの結果を分岐する事が出来ます。例えば 値が〇〇以上であれば、Aルート値が〇〇以下であれば、Bルートというように、ある条件をもとにルートが分岐する事を条件分岐といいます。 if文の書き方 if (条件) { 条件が真であれば実行…

PHPのinclude関数を使って外部ファイルを読み込む

php

include関数を使う事でhtmlファイルをテンプレート化する事が出来ます。ページ数が多いサイトやコンテンツが増えていくようなwordpressなどのCMSでは必須の技術です。 include関数の使い方 外部ファイルを読み込ませたい箇所で、include関数を記述します。 …

time関数とstrtotime関数

php

UNIXタイムスタンプとは UNIXタイムスタンプとは、コンピューターのシステム時刻の一種で、協定世界時(UTC)での1970年1月1日(午前0時0分0秒)からの経過時間を指します。 time関数 現在のタイムスタンプを取得 strtoti…

PHPでの日付や時間取得

php

基本的にはJavascriptと同じです。 「どのような形式で」を指定できる関数:date関数(フォーマット文字列) 「いつの日付を」を指定できる関数:mktime関数(タイムスタンプ) timezoneの設定 本来は「php.ini」ファイル上で設定しますが、設定していない場…

htmlspecialcharsとENT_QUOTESの設定

php

特殊文字をブラウザで文字列として表示させるには htmlspecialchars 関数を使用します。これを使用すると、各文字列が 、&、" に変換されて返されます。 さらに続けて ENT_QUOTES と書くと、' (シングルクォート)も ' に変換されて返されます。この処理は…

PHPの記述方法

php

PHPファイルは「.php」という拡張子をつけることで、PHPファイルであることをコンピューターが認識してくれます。(例 index.php) PHPを記述する場合、 と書く事でブラウザーにテキストを出力する事が出来ます。 html内に記述する場合は <html> <head> <title>基本的なPHPの</title></head></html>…

PHPとは

php

PHPとは? HP: Hypertext Preprocessor(ピー・エイチ・ピー ハイパーテキスト プリプロセッサー)とは、動的にHTMLデータを生成することによって、動的なウェブページを実現することを主な目的としたプログラミング言語、およびその言語処理系である。一般…

XAMPPとMAMPの文字コードとタイムゾーンの設定

php

これらを使用する時に気をつけないといけないのが、文字コードの設定です。 XAMPP・MAMP共にドイツで開発されたソフトであるため、初期設定のままだと日本語を使用した時に文字化けを起こす危険があります。 文字コードの設定は「php.ini」ファイルに書かれ…

PhotoshopCCで自由にトリミング

CC以前のバージョンだと(私はCS5,6を使用していました)自由にトリミングが 出来ていましたが、CCだと比率でしかトリミングが出来ずに困っていました。 どうしたら自由なサイズにトリミングが出来るのかというと設定をしなければいけなかったようです。Phot…

Illustratorでギンガムチェックのパターンを作る

20x20pxの正方形を4つ作り2x2に並べ、好きな色をつけ、(※左下のブロックは必ず塗りを白色に設定する)スウォッチに登録します。 好きなサイズでオブジェクトを作り、上で作ったパターンを適応させる いつでもギンガムチェックのパターンが使えるようにす…

PDFをIllustratorから書き出す

ポートフォリオをPDF形式で面接先の会社にメールで送りたいのにPDFのデータが非常に大きく、困ってしまう。就職活動中によくある事です。 IllustratorからデータをPDFで書き出す場合、書き出す形式に気をつけないと、必要以上にデータ量が大きくなってしまう…

Illustratorで放射状のオブジェクトを作る

よくバナーなんかで見る、放射状の背景。作り方は色々なやり方がありますが、1番簡単なのは楕円を線のみにして、「線幅」と破線の「線分」と「間隔」で調整するやり方です。 1、まずは300✕250の長方形を作り、塗りの色を放射状の片方の色に設定する。塗り…

Illustratorでロゴを作る

Illustratorのアートブラシとアピアランス機能を使ってブラシで描いたイメージのクールなロゴを制作してみましょう。Illustratorのブラシライブラリーにはアーティスティックなものから幾何学模様まで、さまざまな種類のブラシが用意されています。これらを…

トンマナを合わせたバナー作り

トンマナ とは、「トーン&マナー」の略で、 広告 における デザインの一貫性を持たせることを指します。 また、ブランドのイメージカラーとホームページのデザインカラーを 合わせる必要があるなど、「 トンマナ 」は 企業部 ブランディング においても重要…

Photoshopでの文字ツールの使い方

文字ツールを使う 文字入力(配置したい位置ではなく、別の開いているスペースで入力する) 入力後、移動ツールで配置したい位置に置く 見出しを書く時はクリックして文字を書き始める 段落文を書きたい場合はドラッグで段落文の範囲を決める(禁則処理を「…

画像の補正

トーンカーブを使った補正 トーンカーブはデータの劣化をおこさずに細やかな補正ができます。 トーンカーブを使えば「明るさ・コントラスト」、「レベル補正」でできることはもちろん、最大で14個のポイント(制御点)を作成しより微妙な部分の調整をおこな…

Photoshop 基礎

Photoshopの基本的な使い方 画像を作る。 画像を補正する。 画像を加工する。 Photoshopの初期化 目的は、無駄に消費されているメモリの記憶をリセットすること。 特に容量があまりないPCだと尚更です。 アイコンをダブルクリック等で起動。 このとき[Ctrl…

photoshopの描画モードを使う

psgips.blog.fc2.com 焼き印のようなロゴを作る 白い台紙とロゴ画像を1つのレイヤーに結合する 結合したレイヤーを選択し「フィルター→ノイズ→ダスト&スクラッチ」を選択し、「半径:4」でクリック。全選択でコピー。 木のテクスチャにペーストし、チャンネ…