webサイト制作の勉強|2018月2月クラスブログ

webサイト制作の勉強に関する解説ブログです。

jQueryプラグインを使ってみる

<html lang="ja"> <head> <meta charset="utf-8"> <title>Bxsliderの導入</title> <link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="css/jquery.bxslider.css"> <link rel="stylesheet" href="css/lightbox.css"> <script src="js/jquery-2.2.4.min.js"></script> </link></link></link></meta></head></html>

javascriptでの論理演算子

「&&」演算子(and演算子) 左辺及び右辺の値が共にtrueだった場合に全体の式がtrueとなります。「||」演算子(or演算子) 左辺及び右辺のどちらか1つでもtrueだった場合に全体の式がtrueとなります。「!」演算子(not演算子) 右辺の値がtrueならば全体の式…

jQuery UIを使ってみる

jQuery UIとは、jQueryの色々な機能を機能別にパッケージした物のことです。 jQueryは、もともJavaScriptを使いやすくするためのライブラリでしたが、そのjQueryをさらにパッケージ化したものなので非常に使いやすいものになっています。 例えば、日付を入力…

縦書きとrubyタグの使い方

「webは横書きが当たり前」そんな常識は変化しつつあります。 実はwebにおける縦書きの取り組みは、Internet Explorer5.5(2000年)が独自に実装していましたが、他のブラウザーでは実装されていませんでした。CSS3の策定を機会に最新の主要なウェブブラウザは…

Illustratorでロゴを作る

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

Javascript 演習問題

Javascript演習問題 サムネイル画像にマウスを乗せたとき、メイン画像が変化するように記述しなさい。(画像、記述方法は自由) 今日の西暦年月日曜日(〜年〜月〜日〜曜日)を表示させなさい。 入力された値が5の倍数かどうかを判別する記述をボタンを押し…

クライアントへのヒアリング

いよいよサイト制作が始まります。 サイト制作のワークフローでまず最初にするべき事はクライアントへのヒアリングです。 ヒアリングで1番大事なのはしっかりと意思の疎通が出来ているか、につきます。こちらの状況や目的をしっかりとクライアントに伝え、…

Webサイトの構成表の作成

Webサイトの構成を明確にする為に必ず、Webサイト構成表を作成しましょう。 「サイト全体で何ページになるか?」「どのページにどんな内容のコンテツを入れるか?」「どういう順番でコンテンツを並べたら、ユーザーが見やすい・解りやすいか?」 などは、必…

jQueryとCSS3を使ったアニメーション

HTML5 × CSS3 × jQueryのハイブリッドアニメーション 最近のWebアニメーションはスマホで表示する事も考慮し、動きの軽いアニメーションが求められています。その為には単一のスクリプトではなく複数のスクリプトを合わせる必要があります。jQueryの特徴の1…

jQueryとは

jQuery(ジェイクエリー)とは、ウェブブラウザー用のJavaScriptコードをより容易に記述できるようにするために設計された軽量なJavaScriptライブラリである。ジョン・レシグが、2006年1月にリリースした。様々な場面で活用されており、JavaScriptライブラリ…

スマートフォンでのナビメニュー

ナビゲーションメニューの押し易さ(使い易さ)というのはページ全体の使い易さに繋がる為、非常に大切です。 PCレイアウトの場合は、ある程度大きい面積の中でホバーアクションと組み合わせる事で、ある程度の解り易さは確保出来ます。 スマホでは制限され…

配列の使い方

配列とは複数の値を入れる事が出来る箱の事です。 今まで使っていた変数は1つにつき、1つの値しか入れる事が出来ず、新しい値を入れると上書きされてしまう、という特徴がありましたが、配列を使う事で同時に複数の値を収納出来るようになります。 配列の使…

photoshopの描画モードを使う

描画モードを上手に使う事で、様々な合成が出来るようになります。 各描画モードの特性を覚えて目的にあった描画モードを使い、円滑に合成などの処理を行えるようになりましょう。 psgips.blog24.fc2.com 焼き印のようなロゴを作る ロゴの画像を選択し「フィ…

Dateオブジェクトで時間の取得

「 new Date()」を使う事で、現在の時間を取得することが出来ます。 <script> var date = new Date(); document.write(date); </script>実際に表示してみると「 new Date()」には日時についての様々なデータが収納されているのが解ります。 このままでは使いづらいので「 new …

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

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

for文の多重ループ

for文でのインクリメント/デクリメント演算子 上記のインクリメント演算子を使って 2から100まで2づつ増えていくfor文を作成しましょう。 一つのfor文(ループ)の中に、さらにfor文を入れることができます。 もちろん入れ子の深さを二重、三重、...と深くし…

DOMでのオブジェクトの使い方

Windowオブジェクト Windowオブジェクトは、ブラウザーが持っている情報をそのまま持っています。ブラウザーの様々な情報を確認・取得する事が出来ます。 早速確認してみましょう。 <script> console.log(window); </script> documentオブジェクト documentオブジェクトとは、…

DOM (ドキュメント・オブジェクト・モデル)とは

Document Object Model (DOM) は、HTML および XML ドキュメントのための API です。これはドキュメントの構造的な表現を提供し、内容や表示形態の変更を可能にします。簡単に言い換えるとhtmlの各要素、たとえば「p」とか「img」といった要素に直接アクセス…

for文の使い方

for文もwhile文と同じ繰り返し(ループ)処理ですが、記述方法が変わるので、違いをしっかりと覚えましょう。 for ( 変数iの初期値 ; 繰り返し条件 ; 変数の変更 ) { 処理の結果 } 記述例 <script> for (var i = 1 ; i <= 100 ; i++) { console.log( i ); } /* for </script>…

メニュー部分のレスポンシブ化

<html lang="ja"> <head> <meta charset="utf-8"> <title>おすすめメニュー部分の練習</title> <meta name="viewport" content="width=device-width"> <link rel="stylesheet" href="css/menu2.css"> </head> <body> <div class="container"> <div class="menu"> <div class="menu-wrapper"> <h3>おすすめメニュー</h3> </div></div></div></body></html>

Math.randomの使い方

JavaScriptで乱数を取得したい場合には「random関数」を使います。 覚えるメソッド Math.random Math.random()は、0〜0.9999...(1未満)の間から、1つの数値をランダムで返すメソッドです。0は含みますが、1は含みません。 Math.round Math.round()は、小数点…

javascriptでのparseIntを使った型変換

javascriptでは文字列と数値は明確に区別されています。 扱う値が文字列と数値では結果が全く変わってしまうので、常に型のチェックをする必要があります。特にpromptで入力された値は文字列として認識される為注意が必要です。文字列のままでは演算等の処理…

switch文の使い方

「switch文」とはif文と少し似ていて、同じように分岐処理を行う物ですが、if文の場合、AルートもしくはBルート、というように二者択一を続ける分岐に対し、今回の「switch文」は同時に多数の分岐処理を行うことが出来ます。 switch (式or変数) { case 値1 :…

関数の使い方

一連の処理をひとまとめにして、名前をつけたものを「関数」と呼びます。 手間のかかる処理を関数として定義しておけば、必要なときに必要なだけ何度も呼び出すことができます。関数は、function文を使って定義する。 定義した関数を実行するときは、関数名…

if文を使った条件分岐

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

javascript 演習問題

以下の指示に従い、Javascriptを記述せよ。 ユーザーがプロンプト画面で年齢を入力したら、if文を使って以下のように条件分岐されるよう記述せよ。 0歳は「生まれたての赤ちゃんです」 19歳までは「未成年です」 20歳〜60歳は「成人です」 61歳以上は「シニ…

色々なメソッドの使い方

基本的なメソッドの使い方を覚える window.document(ブラウザーに文字を表示させる) JavaScriptで文字列を表示するには、「window.document.write( )」を使います。 表示したい文字列をシングルコートではさみます。「window.」は省略できます。 .document…

モバイルレイアウトのカンプを作成

スマートフォンのデザインカンプ、アートボードの全体幅は例外を除き、640pxで作ります。 この640pxというサイズはiPhoneのレティナディスプレイの横幅の最小サイズに合わしているもので、実際に表示されるviewport(device-width)は320pxです。文字の大き…

変数の使い方

JavaScriptでまず覚える事は変数の使い方です。変数とは値を入れておくことができる箱のようなものです。 処理結果などの値を変数に格納したり、それをまた別の処理へ引き渡したりすることができます。 変数宣言 変数を使用する上で、まず行うのが変数宣言で…

JavaScriptによる文字列操作

今後少しずつ複雑なJavaScriptに入ってきますが、その前にJavaScriptによる文字列操作のルールと、デバック(エラーチェック)の際に使用するコンソールログ関数の使い方を覚えましょう。 console.log console.log関数とは文字通り、コンソール画面にログ(…