読者です 読者をやめる 読者になる 読者になる

webサイト制作の勉強@迅

webサイト制作の基本やホームページ制作を学ぶ、webサイト制作の勉強@迅。webサイト制作に必要なイラストレーター|フォトショップ|Dreamweaver|HTML5|CSS3|javascript|jQuery|の基本を紹介しています。

javascriptの基本操作【まとめ】

javascriptの基本操作 皆さんこんにちは、今日はjavascriptの導入から、基礎までをざっとやっていきたいと思います。この記事は自分用のまとめになりますので、説明をざっくりした感じで進めると思いますのでご了承ください。 javascriptの基本操作 javascri…

jQuery基礎 基本的な使い方【保存版】

jQueryの基本的な使い方【保存版】 皆さんこんにちは、迅犬です。今回はjQueryの基本的な使い方を見ていきましょう。 jQueryの導入方法をまず知りたい!という方は以下の記事をご参照いただければと思います。 webdesignzin.hateblo.jp jQueryの基本構文 jQu…

photoshop基礎 整列の基本操作

photoshopにおける整列 photoshopで整列機能を使用するには、基準となる選択範囲が必要です。まず選択範囲で基準を指定して、選択したレイヤーを整列させるというイメージで、一緒にフォトショップでの整列を行っていきましょう。 イラストレーターとフォト…

photoshop基礎 特定の色域部分にのみ加工をする

ある特定の色の部分だけを加工する方法 皆さんこんにちは、今回はフォトショップを使って、特定の色を持った一部分のみを加工したい場合に、非常に有効な選択範囲を作る方法と元画像をそのままにその選択範囲化した部分の加工をやっていきます。選択範囲は特…

jQueryをこれから使いたい人のために~jQuery入手&導入編~

jQueryとは 簡単に特徴をまとめておきます。 javascriptをより少ない記述でかけるようにしたjavascriptライブラリです。 javascriptのライブラリは他にもありますが、一番ポピュラーで浸透しているものと言っても過言では無いでしょう。 jQueryを入手する jQ…

photoshopデザインカンプ制作のための環境設定(cs6)

デザインカンプ制作におけるphotoshop環境設定 イラストレーターでのワイヤーフレーム制作同様、1pxにこだわる作業をしたいためピクセルベースの環境設定をフォトショップにおいてもやっていきたいと思います。 環境設定の単位をピクセルベースにする ①編集→…

メディアクエリによるレスポンシブ対応

メデイアクエリによるレスポンシブ対応の前準備 レスポンシブ対応(マルチデバイス対応)させるには、必ずビューポート設定を行っておきましょう。 <meta name="viewport" content="width=device-width"> なんでビューポート設定が必要なのでしょうかという方はこちらを参考にしてみると納得していただけると思い</meta>…

.htaccessを使ったレスポンシブ対応

.htaccessを使ったレスポンシブ対応 今回は.htaccessファイルというものを使って、アクセスされたデバイスによって、見せるindex.htmlを切り替える、.htaccess手法をやっていきましょう。 自己流の理解が入っているので、何か問題や間違いがあればご指摘お受…

リセットCSS

リセットCSS そもそもリセットCSSとは、標準的に予め設定されているものをとっぱらって、制作する人が0からCSSを設定するために一旦まっさらな状態に戻すことです。これにより、制作者が、レイアウトを0から設定していくことが出来るため、自分の思い通りに…

headにさらに情報を

ファビコンとタッチアイコン ファビコンとは?.icoとは?という方はこちらの記事にすごくわかりやすく載っています。 yachin29.hatenablog.com favicon.icoはジェネレーターにて生成すると楽。ジェネレーターは色々あるみたいですが、上記のブログと合わせて…

HTML5基本の型

HTML5基本の型 <html lang="ja"><head><meta charset="utf-8"><title>各ページタイトル</title><meta name="description" content="ページ概要文"> </head> <body> <header></header> <nav></nav> <div id="container"></div> <footer></footer> </body> </html>

web制作向けillustratorの作業設定

web制作向けillustratorの作業設定 web制作においてイラストレーターといえば、ロゴを作ったり、バナーを作ったり、webサイト用の部品素材を作ったりと何かと重宝するillustratorですが、イラストレーターでそれらの制作を行う際に、注意しなければならない…

illustratorの基本操作13 クリッピングマスクと複合パス

クリッピングマスクと複合パス みなさんこんにちは、迅犬です:D 今回はクリッピングマスクと、クリッピングマスクとよくセットで使われる複合パスについてやっていきましょう。 クリッピングマスクとは? クリッピングマスクとは、上のオブジェクトの形で下…

illustratorの基本操作12 パスファインダー

イラストレーターのパスファインダー 皆さんお元気ですか?迅犬です:D 今回はパスファインダーをやっていきましょう。複数の図形オブジェクトを組み合わせて新しいカタチを生み出す時にとても便利な機能になりますので、是非この機会に習得してしまいましょ…

illustrator 基本操作11 文字ツール

イラストレーターの文字ツール 皆さんこんにちは、迅犬です:D。今回は、イラストレーターの文字ツールをやっていきましょう。 まずは、イラストレーターの文字ツールには主に3種類ありますので、そちらからみていきましょう。 イラストレーターの文字ツール…

illustratorの基本操作10 ベジェ曲線

ベジェ曲線の基礎知識 イラストレーターのベジェ曲線を通して、セグメント、アンカーポイント、パス、方向線といったものを学んでいきましょう。 パスとは? ベジェ曲線を理解するためにまず理解しなければならないのがパスというものです。 パスとは、簡単…

illustrator 基本操作9 オブジェクトのグループ化

オブジェクトのグループ化 皆さんこんにちは、迅犬です:D 今回もイラストレーターの基本を勉強していきましょう。 今回は、グループ化についてやっていきます。グループ化とは、複数のオブジェクトを1つのまとまった塊として扱えるようにすることです。操…

illustrator 基本操作8 整列

イラストレーターで整列をしてみよう こんにちは、迅犬です:D 今回は、覚えると非常に便利な機能、”整列”についてやっていきましょう。 イラストレーターでの整列とは、選択したオブジェクトを、基準となるもの(キーオブジェクトやアートボード)に対して…

illustrator 基本操作7 正方形や正円の作り方

イラストレーターで正方形や正円を作る 皆さんお元気ですか?迅犬です。 今回は、イラストレーターで正方形や正円を作る方法を学んでいきましょう。 イラストレーターで正方形を作成する ツールパネルから長方形ツールを選択した状態で、Shiftを押しながらド…

illustrator 基本操作6 表示の切り替え

表示の切り替え 皆さんお元気ですか?迅犬です。 今回は、イラストレーターにおける表示の切り替えをショートカットキーを使ってやっていきましょう。 前準備として、横幅700px、高さ500pxの新規ドキュメントを作成しておきましょう。 ※ちなみにこの新規ドキ…

illustrator 基本操作5 スマートガイドとポイントにスナップ

スマートガイドとポイントにスナップ 皆さんお元気ですか?迅犬です。最近涼しくて過ごしやすくなってきましたね。 今回はweb素材や、ワイヤーフレームを作成する際に、イラストレーターにおける作業が非常に効率的になる2つの機能を紹介したいと思います。 …

illustratorの基本操作4 オブジェクトの移動と複製

オブジェクトの移動と複製 皆さんお元気ですか?迅犬です。 さて前回の続きからになります。前回はオブジェクトの選択とその選択したものを解除するということをやりましたね。 今回は、選択したオブジェクトを移動させたり、複製したりといった基本操作を学…

webサイト制作で役立つ4つの検証ツール 2016年度版

webサイト制作で役立つ無料検証ツール4選 2016年度版 皆さんお元気ですか?最近禁煙し始めました迅犬です。 今回はwebサイト制作又は、ホームページ制作を0からコーディングする際に絶対に欠かせないと思うツールを厳選して4つ紹介させていただきます。 こ…

illustratorの基本操作3 オブジェクトの選択と解除

オブジェクトの選択と解除 皆さんお元気ですか?迅犬です。 さて前回の続きからになります。前回はオブジェクトの作成と削除を行いましたね。 今回は、作成したオブジェクトを選択してみましょう。 複数選択したり、ダイレクトツールでパスだけを選択したり…

illustratorの基本操作2 オブジェクトの作成と削除

オブジェクトの作成と削除 皆さんお元気ですか?迅犬です。 さて前回の続きからになります。前回は新規にドキュメントを作成しましたね。 今回は、そのドキュメント上に、オブジェクトを作ってみたいと思います。 ※オブジェクトとは?=簡単にいえば、イラス…

illustratorの基本操作1 新規ドキュメントの作成

illustratorによる新規ドキュメントの作成方法 皆さんお元気していますか?迅犬です。 今回は、イラストレーターのはじめの一歩として、新規ドキュメントの作成方法をご紹介していきます。 イラストレーターを使いこなせれば、web素材やワイヤーフレーム、デ…

このブログの紹介とご挨拶

このブログの紹介とご挨拶 皆さん初めまして、迅犬と申します。 このwebサイト制作の勉強@迅では、これからwebサイト制作を始めたいという方や、htmlって何?という方まで幅広い方にとって勉強になるwebサイト制作の基本を紹介して行きたいと思っております…