【新講座】「Dart SassとBEM講座」を動画で受講できます

レスポンシブWebデザインやスマートフォン対応のため、CSSは複雑で管理しにくいものになってきています。
そこで、効率よくCSSを管理できる「Sass」と「BEM」について動画で学べる講座を開催します。

うわっ、日本のWebデザイナーの年収、低すぎ…?

以前、Webクリエイターボックスの「世界のWebデザイナーのお給料はいかほど?」という記事が話題になっていました。
「他の国とくらべて日本のWebデザイナーの年収は低すぎる」とか「海外に脱出するしかない」と嘆いている方がかなりいらっしゃったようですが、こういう見方もありますよ、ということで記事にまとめました。

「1日で分かるJavaScript・jQuery講座」を開催します

「HTML・CSSは分かるけどJavaScriptやjQueryがよく分からない」という方向けに、1日でJavaScriptやjQueryの基礎が分かる講座を開催します。

Web制作で気になることのアンケート結果(2018年版)

Web制作で以前から気になっていたことについて、Twitter の投票機能でアンケートを取ってみました。
それぞれの項目について、解説も書いています。

Emmetでより良いコーディングライフを送ろう

EmmetとはHTML/CSSを省略記法で記述し展開することで、コーディングの効率を上げることができる入力補完ツールです。
この記事では基本的な使い方や設定について解説しています。

ChromeのアドレスバーからCan I useやWordPressを検索できるようにする方法

Can I useで特定の要素やプロパティについて検索するために有料の検索アプリをインストールしている方もいらっしゃいますが、私の場合Chromeのアドレスバーから検索できるようにしています。
この記事ではWordPressの記事を検索する方法、クックパッドの人気レシピを検索する方法についても解説しています。

WordPressにJetpackを入れるべき理由

Jetpackは、WordPressを開発しているAutomattic社が開発した多機能なWordPressプラグインです。
この記事では、特に役に立つと思った機能を紹介しています。

おそらく最もわかりやすいWordPressテーマ制作チュートリアル

はじめてブログ用のオリジナル WordPress テーマを制作される方向けに書いたチュートリアル記事です。サンプル付きで、PHPやWordPressが初めての方にも分かりやすく解説しているつもりです。

スマートフォンサイトコーディング講座を開催します

PC用のHTML・CSSは書ける方向けに、スマートフォン・タブレット・PCなど様々なデバイスで閲覧できる「レスポンシブWebデザイン」を実際に作ることで身につける講座です。 意味がよくわからないままコピペで済ませるのでは …

意外と知られていないHTMLの基本の話

私はWeb制作が初めての方向け講座だけでなく現役の制作者の方向けに様々なWeb講座をしていますが、現役のWeb制作者の方でもHTMLに関して意外と知られていないんだなと思うことがいくつかあります。

特に、HTML5以前の古いHTMLの使い方のまま覚えている方が多いように思われますので、この記事ではそれを中心に取り上げてみました。

iPhone XでWebページを見るとどんな挙動になるか

iPhone Xではディスプレイの形がこれまでのように長方形ではなく、複雑な形になりました。
そこため、アプリやWebページの表示がどうなるのか気になっている方も多いと思います。
Xcode 9のiOSシミュレーターでiPhone Xのシミュレーションができるようになったため、早速いろいろなWebページをiPhone X・iOS 11のSafariで見てみたところ、いくつか思わぬ発見もあったのでまとめたいと思います。

Web制作で気になることのアンケート結果(2017年版)

Web制作で以前から気になっていたことについて、Twitter の投票機能でアンケートを取ってみました。
アンケートの実施期間は2017年1月〜8月です。

ChromeのアドレスバーからGoogle翻訳する方法

Web制作をしていると、ちょっとした英語の文章を日本語に訳したい、または日本語の文章を英語にしたいということがあります。
そういったとき、[Google翻訳のページを開く>文章をペーストして翻訳ボタンを押す]よりも、ChromeのアドレスバーからGoogle翻訳できると少し便利なのでやり方を解説します。

Macで素早く作業する10のTIPS+α

Macで作業するときに知っておくと素早く作業できる10個のTIPSと、素早く作業する以外のTIPSを3個まとめました。

Adobe Illustrator CC 2015.3の新機能まとめ

Adobe Illustrator CC はマイナーアップデートでしたが、Web制作者にとっては嬉しい機能も追加されたため紹介します。

HTML5のセクショニング・コンテンツについて知っておくべきこと

HTML5で一般的なWebページをマークアップしようとした際、セクショニング・コンテンツへの理解は不可欠であると私は考えています。
この記事は、2016年5月14日に開催した HTML5再入門講座 という「HTML5を学び直す」ための無料講座のスライドの一部を再構成した記事です。

DOCTYPE宣言、IE対応、デザインカンプの解像度などのアンケート結果

DOCTYPE宣言はHTML5かXHTMLか、IEはどのバージョンまでサポートするか、RetinaディスプレイのPhotoshopでカンバスサイズはどうしているかなど、Web制作で気になっていたことをアンケートで調べてみました。

iMac Retina 5Kレビュー

この記事は、2014年10月に発売された27インチの「iMac Retina 5Kディスプレイモデル」のレビューです。
これまで、自宅で作業する時は MacBook Air に Apple Cinema Display 20インチを接続して作業していましたが、それとは比べものにならないほど快適で、「もっと早く買えばよかった」と思っています。

ブログのスマートフォン対応の際に考えたこと

遅ればせながら、2014年8月にこのブログのスマートフォン対応を行いました。
この記事では、その際に考えたことや工夫したことなどをまとめています。

Macの基礎の基礎: テキスト入力と編集とテキストエディット編

このブログをお読みの方であれば、「テキスト入力や編集、テキストエディットなんてさすがに分かってる」という方が多いかもしれません。
しかし、Mac には文字列を一時的に保持しておくための「クリップボード」のようなものが2つあることや、control キーを使用した高度なテキスト編集機能についてはあまり知られていないかもしれません。

Macの基礎の基礎: Spotlight編

Mac を使い始めたばかりの方にとって、Spotlight は「ファイルやフォルダを検索する時に使うもの」のように見えるかもしれません。
確かにそれは Spotlight の主要な機能ですが、Spotlight はあらゆる調べ物に利用することができます。

Windows XPだとページ全体に警告表示するJavaScriptを配布します

恐ろしいことに、ほぼWeb制作者向けの記事ばかりのこのブログもいまだに Windows XP からのアクセスが多い事がわかりました。
そこで Windows XP 利用者が記事を表示しようとした場合に警告(Webブラウザーの種類にかかわらず警告)するようにし、その JavaScript を配布することにしました。

HTML5 Conference 2013の資料まとめ

HTML5 Conference 2013 の各セッションの資料(スライド等)、動画、ツイート等をまとめています。
今年はかなり大量の資料があるため、この記事は7ページに分割しています

Web制作者必見!Photoshop CCにSlicyのような画像アセット(Generator)機能が追加

2013/9/9 に、Adobe Photoshop CC がバージョン 14.1 にアップデートされました。
アップデートされた機能の中で、Web制作者にとって重要なのは画像アセット(Generator)機能だと思います。
この記事では、Generatorの使い方、使ったほうが良いケースと使わないほうが良いケース、問題点やバグなどについて解説しています。

HTML5カンファレンス2012の資料まとめ

HTML5カンファレンス2012の講演資料のまとめです。CSS3やJavaScriptについての講演もたくさんありました。

Coda 2 ファーストインプレッション

Coda 2 が5月24日の0時に発売され、「本日限り半額(App Storeで ¥4,300)」ということで、発売直後から Twitter でだいぶ盛り上がってましたね。 私もせっかくなので、半額のうちに買いました。 …

WordPressのトップページを雑誌や新聞のような段組にする方法

jQuery Masonry プラグインを使用すると、このブログのように雑誌や新聞のように記事一覧を並べることができます。

Croppyの作り方

Web サイト構築のためのトータルデザイン誌 Web Designing 2011年 12月号 に、jQuery × WordPress 活用事例ということで Croppy の作り方を掲載させて頂きました。 記事は2ペー …

WordPressサイトをデザインする時に気をつけていること

この記事は、2011/9/11 に神戸芸術工科大学で開かれた「WordCamp KOBE 2011」で私がお話しした「WordPressサイトをデザインする時に気をつけていること」というセッション内容をブログ記事として起 …

新MacBook AirはWeb制作のメインマシンになり得るのか

この記事は、2011年版の MacBook Air について書いています。2012年版の MacBook Air については以下の記事をご覧ください。 MacBook Air 2012のレビューとWeb制作者のための設定 …

[連載]WordPressでWebサービスを作る方法(1:PHPとは)

このブログでは何度も触れていますが、3月に フリー写真素材 :: Free.Stocker という無料写真素材サイトをオープンしました。 このサイトは、WordPress というブログ向けの CMS(コンテンツ管理システ …

HTML/CSS/PHP等のコーディングに、無料のNetBeansが快適過ぎる件

私は結構エディタ難民で、HTML/CSS/PHP等をコーディングする際のエディタをWindows・Mac含め色々試してきましたが、最近は NetBeans IDE に落ち着いています。 NetBeans IDE は厳密に …

ブログをリニューアルし、ポートフォリオを公開しました

ご覧のとおり、このブログ(Stocker.jp / diary)をHTML5でリニューアルしました。 今回のテーマは「紙のように軽く、昔の雑誌のように上質で、見る人の印象に残るページ」とし、h1〜h3の文字詰めにこだわり …

ついに出た!Chrome版「Page Speed」の使い方

2011/3/22に、GoogleがようやくGoogle Chrome版「Page Speed」拡張機能を公開しました。 「Page Speed」は、項目をある程度理解できれば自分や自社のサイトの表示速度の改善にとても役 …