サクサク読めて、アプリ限定の機能も多数！
トップへ戻る
ドラクエ3
www.designmap.info
WordPressの学習のゴールは様々だが、本記事ではWordPressを使ってオリジナルのサイト制作をしたい人向けに独学手順をご紹介したい。 2016年にWordPressベースのポータルサイトの運営に関わって、その後自分でもWordPressでポータルサイトを作った。ここでWordPressの独学ポイントをまとめておきたい。 入り口はHTML・CSSから WordPressの制作は一言で言うとHTMLのコードにWordPressで定義されている関数（言語はPHP）を埋め込んで、CSSでレイアウトや装飾をしたものである。 実際に書くコードの大部分はHTML・CSSになる。なので最初の一歩はHTML・CSSから学んでいこう。 HTML・CSSの入門書を選ぶときは、なるべく発売が新しいもの、詳しい手順形式になっているものを選びたい。HTML・CSSは情報の陳腐化が早いので生モノである。発売時
オブジェクトはユーザーが定義できるオブジェクトと組み込みのオブジェクトがあります。組み込みのオブジェクトは、配列、関数があげられます。今回はユーザーが定義できるオブジェクトを学びます。 オブジェクトは名前のついた値を集めたコンテナです。 Atomで新規ファイルをつくり「文字列型 ー ゼロから始めるJavaScript入門（ECMAScript 2015）【Vol.2】」で作った「js-study」フォルダ内に、「obj1.html」というファイル名で保存します。 以下のコードを書いて保存します。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <script> var book = new Object(); book.id = 1; book.title = "三四郎"
今回はECMAScript 2015で導入されたMapオブジェクトを学びます。 Mapオブジェクトは「キーと値」のセットを管理するオブジェクトです。キーは重複できません。 連想配列、ハッシュ、辞書ともいわれます。 以下の […]
これからプログラミング言語のJavaScriptの学習をおこなっていきます。プログラミングが初めての方を対象とします。 JavaScriptは言語開発者の想定を超えて大きく使われるようになった言語です。2015年にECMAScript 2015の仕様が策定され、言語として本格的な仕様に進化しました。本講座ではこの新仕様も含めて解説していきます。 まずは環境構築をおこなっていきます。JavaScriptを動かす環境は複数のやり方があります。本講座では最もお手軽なWebブラウザを実行環境として使います。Webブラウザは「Google Chrome」をつかいます。 Google Chromeのインストール 「Google Chrome」のインストールは、ブログの過去記事をご覧ください。 「Google Chromeのインストール（Windows）」 「Google Chromeのインストール（M
プログラミングを学んでみたい人に向いている言語は何か、というお題がある。 言語によって得意分野が違うので、何を作りたいかによっておすすめする言語はかわってくる。 であるが、教育用の言語としては筆者の結論はPythonである。 理由はPythonの言語仕様がシンプルでコンパクトだから。 Pythonを選ぶと実践的なコードを書くまでの学習コストが少なくて済む。 言語仕様が分厚い言語を選んでしまうと、勉強はつらくなる。 Pythonはif文で丸括弧や波括弧を書く必要がない。条件分岐にswitch文がない。繰り返し処理にdo while文がない。forループはイテレーターを使ったモダンなforループしかない。変数の宣言はなにも記号をつけない。関数の仕様もシンプルである。データ型は100%オブジェクトなので、説明がすっきり。 このようなシンプルなPythonの設計思想に共鳴する。 一言で言うとPyt
これから数回にわたってプログラミング言語のPythonの学習をおこなっていきます。プログラミングが初めての方を対象とします。今回はPythonをインストールしていきます。 WindowsとMacにわけて解説していきます。 Windows インストーラーのダウンロードとインストール Pythonの公式サイトのダウンロードページにアクセスします。https://www.python.org/downloads/ Pythonはバージョンは2系と3系にわかれます。本講座は3系で学びますので、［Download Python 3.5.2］ボタンをクリックして、ダウンロードをおこないます。バージョンの数字は執筆時点の最新バージョンです。数字が異なる場合、本講座のバージョンに合わせず、最新版をダウンロードしてください。 ダウンロードが完了したら、画面左下の［Window］ボタン（）を右クリック→［エク
Todoリストを仕上げていきます。 まずWebサーバーを起動しましょう。 Windowsはコマンドプロンプト、Macはターミナルを起動して、現在位置を「python-study」フォルダに移します。 Windowsは p […]
Warning: require_once(/home/kokken/www/designmap/setting.php): failed to open stream: No such file or directory in /home/kokken/www/designmap/tobewebdesigner/frontend-engineer-2016/vol1/index.php on line 26 Fatal error: require_once(): Failed opening required '/home/kokken/www/designmap/setting.php' (include_path='/home/kokken/ZendFramework-1.5.2/library:/home/kokken/pear/PEAR') in /home/kokken/ww
著者はヘンドリー・ウェイジンガー、J・P・ポーリフ＝フライ 、二人とも心理学者。20年にわたるプレッシャー研究の集大成的な本になっている。企業、政府機関、スポーツチームを対象にしたワークショップが調査対象のベース。調査対象12,000人のうち、プレッシャーを受けても結果を出している上位10パーセントはどこがすぐれているかを調査してきた。 プレッシャーは脳の作業記憶を縮小させてしまう 本書は三部構成。 第一部は理論編。心理学、脳科学の観点から、プレッシャーにより、実力を発揮できなくなるメカニズムをまとめている。 一般的にピンチに強い選手がいるというイメージがある。あるNBAのフリースローの研究が興味深い。全シーズンの平均成功率は76%、プレッシャーが最大になる状況（点数差が5点以内で試合終了まで1分以内に放たれたフリースロー）だと69%に下がるという。 また時間的な制約が創造性を損なう研究例
WordPressのテンプレートをつくるWeb制作者向けのPHP入門講座です。 テンプレート制作に必要なところだけにしぼって、最小限の内容で学んでいきます。 今回学ぶ内容 学習環境の準備 関数の定義、呼び出し、戻り値 引数を関数定義より多くとっての関数呼び出し 引数を関数定義より少なくとっての関数呼び出し（Warningエラー、Noticesエラー） デフォルト引数 学習環境の準備 OSの拡張子を表示する まずOSの拡張子が表示される設定にします。 OSの拡張子が表示される設定（Mac、Window） 次に、Google Chrome、XAMPP、Bracketsのインストールをおこないます。 Google Chromeのインストール Google Chromeのインストール（Windows） Google Chromeのインストール（Mac） XAMPPのインストール XAMPPのバージ
ある時期、人は世の中から「オマエは無力だ」ということを嫌というほど思い知らされる。そこで、大半の人たちは何かをあきらめてしまう。だが大切なことは、逆に無力だと自覚することだ。そして「無力」だと思っても、「無能」だと思ってはいけないということだ。 作家、村上龍さんの『ふたり』（唐沢寿明著、幻冬舎文庫）の推薦文からの引用です。 単行本が出た時、この言葉がながく記憶に残っていました。文庫版を買ってみたら、しっかり裏表紙の裏（表３）にこの言葉がのっていました。 無能、つまり"才能がない"と思ってしまうと、その時点で努力をやめてしまい、失敗を恐れてリスクをとらなくなってしまいます。結果としてそれ以上伸びたり、経験を得る可能性がなくなります。 うまくいかないことがあっても、単に現時点で力が不足していただけです。 失敗とも、頭が悪いとも、自分がダメとも考えないことです。 内容が良くても、タイミングが悪く
Internet Explorer9以上と他のモダンWebブラウザを前提としたHTML、CSSのコーディング本。 2016年以降のWeb制作のコーディングを先取りした内容になっている。 文字サイズの単位はremを採用。bodyに%で文字のサイズを指定して、残りはremでサイズ指定をする。セレクタはタグセレクタとIDセレクタはほとんど使わない。基本クラスセレクタを採用。クラス名の名前のつけ方もクレバーですぐにでも参考にしたいスタイル。 ３つのサンプルはどれも実践レベル。 各サンプルともまったくのゼロからハンズオン形式でつくる構成になっている。 特にPART3が圧巻 特にPART3のシングルページレアイウトが圧巻。 画像の縦横比率を利用して、marginを割り出したり、display:table;をつかった可変型の段組みレイアウトをくんだり、::afterで画像をいれて、transformプロ
文字組みは錯視調整 まずこの５つの図形をみてください。 大きさ、間隔、上下の重心が揃っていなく、ばらばらにみえます。 ところが、枠をつけてみると... 実は枠のサイズは同じで、枠の間隔も同じです。 下図はサイズ、重心、間隔を微調整したものです。 ようやく揃えってみえてきます。 単なる図形の並びですが、これだけで秩序感がでて美しくなります。 最初の図形と比較するとわかります。 正方形はややサイズを小さく、円形はサイズを少し大きくし、重心をあげています。三角形は重心を調整、菱形はサイズを少し大きくしました。 図形同士の間隔は図形と図形の間のスペース（カウンタースペース）が均一になるように調整してます。 接近するパーツの間隔が揃うように組むといいでしょう。 日本語は、英語、漢字、ひらがな、カナカナ、数字、記号が混在する複雑な言語なので、上の例のように様々な図形を並べる世界に近いです。 このような
タグは語源をおさえていく HTMLのタグは、語源がある。pタグであれば、paragraph、h1はheading、ulはunordered list、dtはdefinition termである。タグは語源でおさえておくと自然に覚えられるだろう。 また実際に頻繁に使うタグはわずかである。細かいタグはその都度リファレンスサイトで調べればいい。 CSSはHTMLの構造に依存したセレクタを書かない 運用段階までを考えると、CSSのコツはHTMLの構造に依存したセレクタを書かないことである。 <div class="news"> <h2>News</h2> <ul> <li>新書体「やすらか」をリリースしました。</li> </ul> </div> というようなHTMLの場合、従来は .news h2 { font-size: 16px; text-align: center; } というように H
膨大かつ、どんどん機能が増えてゆくPhotoshop。 対象ユーザーの裾野も広い。 カメラマン、グラフィックデザイナー、建築家、Web／UIデザイナー、CGクリエイター、イラストレーター、それぞれの立場で、独学の習得ポイントはかわってくる。 今回は、Web／UIデザイナー向けに独学の習得ポイントをまとめておこう。 Web／UIデザイナー向けの習得ポイント 膨大な機能から、習得ポイントを5つに絞った。 トーンカーブ ペンツールによるパスの作成 レイヤーマスク クリッピングマスク カンプ制作テクニック トーンカーブは色補正の万能ツール トーンカーブは写真の色み、明るさ、コントラストを調整するのに使う。しっかりマスターしておきたい。必須でありながら、詳しい解説書は少ないため、多くの制作者にとって急所になりやすい機能である。 色補正だけでも、多くの機能やコマンドがあるが、トーンカーブが万能で、これ
まったくお金をかけずに独学を習慣化する方法として、イフ・ゼンプランという手法がある。 初めてこの言葉を知ったのが心理学者、ウォルター・ミシェルさんの『マシュマロ・テスト』である。 ウォルター・ミシェルさんのピエロの人形の実験 『マシュマロ・テスト』では、ミスター・クラウン・ボックスという悪役になるピエロの人形の実験が紹介される。ピエロは、ライトを点滅させたり、音をたてたり、声をかけて遊ぼうと話しかけて、子供の作業の邪魔をしようとする。その間、10分間、実験室で一人で子供たちは、木のピンのようなものを盤に差し込む課題をおこなう。 これを前もって、ピエロがもしこう言ったっら、こう対処しなさいというように対処のルールを決めておくと、ピエロの誘惑にのらず、作業に集中できる結果がでた。このプランを準備していない場合、平均24秒作業を中断して、平均97本のピンを差し込んだ。一方、準備した子供たちは、平
当サイトでは、「印象に残る、海外のポートフォリオサイト」というタイトルの記事を連載しています。現在、Part1からpart13まで続いています。今回は、過去ご紹介したポートフォリオサイトから、さらに厳選して、制作のポイントとともに紹介します。 トップページで主要なメッセージを伝えよう 多くのポートフォリオサイトでは、トップページに代表作のサムネールを並べます。たとえば、Part 8でご紹介したJohann Lucchiniさんのフォリオサイトは、トップページをさっと見ただけで、どんな人で、どんな代表作があるのかが、瞬時に伝わります。 ポートフォリオサイトをじっくり、何分もかけてみてくれることは稀です。アクセスされて、最初の数秒が勝負なのです。 Johann Lucchini http://johannlucchini.com/ 強み、コンセプトを短い言葉で語ろう 言葉のセンスの良いサイトは
本コンテンツは公開を終了しました。 加筆・再編集したものを電子書籍で販売しております。よろしくお願いいたします。
Photoshopを学ぼう Illustratorと並ぶグラフィックソフトがPhotoshopである。Illustratorと同じくAdobe社の代表ソフト。 Photoshopはビットマップデータをメインに扱うソフト。 おもな機能は、写真の補正、合成のソフトだが、Webデザイナーの場合、バナーやカンプ制作としても使われている。この場合、Photoshopをレイアウトソフトとして使ってゆく。 Illustratorは、トレースなど手を動かして慣れることが大事である、一方、Photoshopは描画モード、アルファチャンネルなどの概念を理解することが大事になる。 Photoshopの場合、コマンドのパラメーターなどの数が多いため、暗記することはとてもできない。むしろ、根本的な理解をしていくことで、未知の局面でも機能の意味を類推したり、調べたりするようにしておいたほうが応用がきく。 ビットマップ
次のページ
このページを最初にブックマークしてみませんか？
『ホームページ制作｜web制作はオフィスエヌ』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
