Step-by-Step Creating a Website Guide
2014年8月17日 Webサイト制作 8回に渡り連載した「実践で学ぶWebサイト制作ガイド」がついに終わったので、ここで簡単にまとめておきます。この記事では基本的な流れを説明していますが、リンクをクリックでより詳しい説明記事を読むことができます。これからWebサイトを作ってみたい！という人のお役に立てればいいなあと思います :) サンプルファイルもあるので、ご自由にダウンロードしてくださいね！ ↑私が10年以上利用している会計ソフト！ サンプルファイル 今回作成したファイルをサンプルとして配布します。参考になれば幸いです。説明するために制作したものなので、学習目的以外でのご利用はご遠慮ください。Google Chrome, Safari, Firefox, IE8・9で動作確認済み。 デモ ダウンロード 1. プランニング 誰のため？何のため？Webサイトを作り始める前に。 突然Phot
Guide to HTML Semantic Markup
2014年8月17日 HTML, Webサイト制作 連載企画「実践で学ぶWebサイト制作ガイド」も佳境を迎え、今回いよいよHTMLマークアップの段階に突入します！「デザインは好きだけど、コーディングは苦手…」という人も、焦らず少しずつ記述していけばちゃんと形になります！お手持ちの「TextEdit」や「メモ帳」などのテキストエディタツールを開いて、さっそく始めましょう！ ↑私が10年以上利用している会計ソフト！ 実践で学ぶWebサイト制作ガイド：その6 目標：正しいページ構造のHTMLが書ける 必要なもの：Windows メモ帳 や、Mac OS Text Editなどの文章エディタツール。もちろんAdobe DreamweaverなどのWeb系オーサリングソフトがあるならそれでOK 対象レベル：HTMLの基礎知識がある・基本的なHTMLタグが手打ちで書ける 目次 誰のため？何のため？We
Emmet CSSショートコード
Emmetは、Zen-Codingの次期バージョンの名前です。 Zen-CodingはHTMLの記述方法が取り上げられることが多いですが、個人的には、CSSの入力補助こそ真価が発揮されると思っています。 私は、EmmetまたはZen-Codingがなければ、CSSのプロパティを打つのが苦痛なほどです。 Emmetから、さらに多くのプロパティに対応し、数値も含めて展開できるようになりました。CSSの記述がより使いやすくなったので、紹介します。 Zen-Codingから使える CSSの展開は、ほとんどのZen-Codingから使えます。 Emmetではさらに使いやすくなりましたが、Emmetは現在開発中のため、不安定な部分があります。不安な方は、Zen-Codingをおすすめします。 プロパティに、ショートコードが用意されており、+でつないで展開(Expand Abbreviation)する形
HTML5 × CSS3 × jQueryを真面目に勉強 – #6 パララックスエフェクトの基本 | DevelopersIO
そんな訳で、パララックス・スクロールについて少し学んでみたので、超初心者向け（※自分含む）のサンプルをいくつか紹介していきたいと思います。 はじめに - パララックスエフェクトについて パララックス（parallax）を直訳すると視差です。視差効果とは、視界が移動する際に各物体がそれぞれ異なったスピードでスクロールすることで、奥行き間をはじめとした視覚効果を指します。 アニメーションの世界ではディ○ニー映画で古くから使われていたり、ビデオゲームにおいても横スクロールアクションのゲームなどで昔から使われています。 JavaScript（jQuery）でパララックスエフェクト 1 | スクロール値を取得 どれだけスクロールしたかという値を取得します。これだけではまだパララックスも何もありませんが、全てはここから始まるのです。 $(function() { $(window).scroll(fu
WordPress使いならこれだけはやっておきたい本当のセキュリティ対策10項目
どうも、ブルーです。秋ですね。 季節がめぐるごとに「WordPressがクラックされたので、セキュリティ対策について調べてみました」的なブログ記事がソーシャル上で出まわり、そのたびにWordPressを扱うデベロッパー層が「また無意味な対策がはてブされてる…」と嘆くのが恒例行事のようになっております。例えば… 「WordPressのバージョンを隠す」 「データベースのプレフィクスを変更する」 「サブディレクトリーにインストールする」 うん、気休め程度かな… 「2年以上放置されている怪しげなセキュリティ対策プラグインを入れる」 そっちのほうがこええよ！ 「サーバーのディレクトリー一覧の非表示」 それ見えちゃってるサーバー管理者では、何しても不安だよ！ とはいえ、そう思いつつも「これが決定版だ！」的な記事を書くのは勇気がいるものです。特にセキュリティ業界は怖いお兄さんが多…うわ何をするやめr
Youtubeの動画を背景に
Introduction In the ever-evolving landscape of web browsing, staying abreast of the latest technologies is crucial. HTML5, the fifth and current version of the Hypertext Markup Language, has revolutionized the way we experience the web. With its advanced features and enhanced capabilities, HTML5 has become the cornerstone of modern web development, offering a more seamless and interactive user exp
Slicing Images for Your Website with Photoshop
2014年8月17日 Photoshop, Webサイト制作 印刷物のデザインではそのまま印刷すればいいのですが、Webサイトの場合は出来上がったデザインをパーツごとに画像をスライス（分割）し、HTMLとCSSで組立ててWebサイト上に表示します。「実践で学ぶWebサイト制作ガイド」5回目ではそのスライス作業に注目！私は普段Fireworksを使ってスライスしていますが、ここでは前回と同様Photoshopを使ったスライス方法を紹介します。実践に入る前に、いくつかのポイントもおさえておきましょう。 ↑私が10年以上利用している会計ソフト！ 実践で学ぶWebサイト制作ガイド：その5 目標：コーディングしやすいパーツ画像を用意できる 必要なもの：Adobe Photoshop 対象レベル：Photoshopの基本的なツールの使い方がわかる 目次 誰のため？何のため？Webサイトを作り始める前に
あなたはいくつ当てはまる？デキるWEBディレクター7つの特徴 | DECONCEPTER
WEBディレクターは平均点の高いゼネラリストである WEBクリエイティブのディレクションという仕事の範囲は多岐に渡る。提案段階では見積もりの依頼対応から、要件にあった技術とデザイン、実現可能なWBSの作成、運用フローの策定などプロデューサーと相談しながらプロジェクトの骨子を決める役割がある。 プロジェクトがスタートすれば常に進捗管理に目を配り、クライアントの追加要望に対する調整業務も発生する。上がってきた制作物にしっかりと目を通してクオリティーをコントロールをして、成果物というゴールに向けて走り続ける仕事である。 こんな広範囲の仕事をこなすには経験と日頃の姿勢が重要になってくる。デキルWEBディレクターはどんな特徴を持っているのか考えてみようと思う。 1. 作ることが好き WEBクリエイティブの現場はものすごい数のタスクにあふれています。一つ一つが深く重く、何かわからないことがある度に人に
画像不要！HTML5のCanvasでグレースケールのマウスオーバーが作れるチュートリアル | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、ももこです。 HTML5の新要素であるCanvasを使って、グレースケールのマウスオーバーを実現するチュートリアルをご紹介します！ 現在CanvasはFirefox/Chrome/Safari/Operaなど殆どのブラウザの最新版で実装されています。 ■DEMOを表示 Javascript <script> $(window).load(function() { $('#gallery img').each(function() { createCanvas(this); }); function createCanvas(image) { var canvas = document.createElement('canvas'); if (canvas.getContext) { var ctx = canvas.getContext("2d"); // キャンバスサイズを指
この順番で読めばOK！JavaScriptを理解するための14冊 | DECONCEPTER
JavaScriptの書籍はjQueryやサンプル中心のチップス本などを含めると、多数出ており、これから勉強したい人にとってはどれから読めばいいか迷うところだと思います。 今日はここ数年で出た書籍の中で初級者から脱中級者になるまでに読みたい書籍を、この順番で読めばステップアップできるという内容で紹介したいと思います。 STEP1. 初心者へのおすすめはダントツでこれ一択。 初心者向けの内容としてはこれがダントツでおすすめです。内容が易しく丁寧な上にサポートサイトで書籍の内容を動画で説明してくれています。 Amazon.co.jp： よくわかるJavaScriptの教科書: たにぐち まこと: 本 サポートサイトはこちら STEP2. 全体を把握するには十分なボリューム。脱初級者向けにはこの2冊。 2冊とも初級者にとっては少し厳しい内容になっていますが、この2冊が理解できれば後は作りまくる
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
SEO検索エンジン最適化チュートリアル
ウェブ制作者に必ず役立つ！iOS, HTML5, CSS, jQuery, WordPress, .htaccessなどのチートシートのまとめ