ウェブ学のすすめ

Study of Web Design & Programing

はてなブログにMaterial Design風のソーシャルボタンを設置する方法

現在、公開しているMaterial - テーマ ストア - はてなブログに ソーシャルボタンについてご相談があったので回答の1つとして実装してみました。他のテーマを使っている方でもそのままコピペもしくは調整することで使えると思います。

簡単なjQueryでtableにアコーディオンを実装する方法

jQueryを使ってテーブル内でアコーディオンするための方法をご紹介します。 開くボタンを押すと隠れていたコンテンツが開閉するようになっています。 テーブルをすっきり見せたいけど詳細なども表示させないといけないときのUIとして参考になるかもしれませ…

はてなブログテーマ「Material」のタイトル画像を最適化しました

はてなブログテーマ「Material」でタイトル画像をアップロードした際、画面に最適化するようにしました。またCSSを追加するだけで海外サイトのように画像に薄い色が重ねっているようなカスタマイズ方法もご紹介します。

はてなブログテーマ(レスポンシブ)にブログアイコンを表示させる方法

はてなブログテーマのスマホ版にはブログアイコンが表示されていますが、レスポンシブデザインにするとHTML自体が書き出されません。レスポンシブデザインでもブログアイコンを表示させる方法を無理やりですが編み出したのでご紹介します。作成したはてなブ…

はてなブログテーマ「Material」のカラーを変更する方法

はてなブログテーマ「Material」のヘッダーやフッターのカラーをカスタマイズする方法をご紹介したいと思います。CSSを追加するだけで自分だけのカラースタイルにカスタマイズできます。カスタマイズしたらぜひコメントやはてなブックマークからお知らせくだ…

はてなブログテーマ「Material」を2カラムにカスタマイズする方法

先日公開した、はてなブログテーマ「Material」を2カラムにしたいというご要望がありましたのでカスタマイズ方法をご紹介したいと思います。CSSを追加するだけで2カラムになり、プロフィールや最新記事がサイドに表示されます。お試しください!

Material Design(マテリアル デザイン)風のはてなブログテーマ「Material」を公開しました

Material Design(マテリアル デザイン)風のはてなブログテーマを作成しました。

AirPrintって何?AirPrint対応プリンタまとめ

プリンタを買い替える時にAirPrint対応のものが欲しかったのでまとめてみました。 AirPrintとは、iPhone、iPod touch、iPadなどのiOS端末とAirPrint対応のプリンターを無線で接続し、写真、Eメール、ウェブページ、文書などを直接印刷する機能です。

Photoshopの教科書 | sitebook [サイトブック] をリリースしてました

フロント側のWebサイト制作者のためのサイトとしてsitebookを制作しました。Webサイトを作るために最低限知っておくべき基礎から高度なテクニカルなことまで丁寧に解説していくサイトになります。

詳しく解説!twitterのAPIキーを取得する方法

API

Twitterで自動ツイートなどをするためにはTwitterのAPIキーやアクセストークンが必要です。今回はTwitterのAPIキーやアクセストークンを取得する手順を1ステップごとにご紹介したいと思います。

徳丸本が半額以下に!キャンペーン中のIT書【3/27まで】

IT書のキャンペーンがやっているのでご紹介したいと思います。2014/3/27まで対象のタイトルが半額ぐらいになっていますので欲しい本があればチャンスです!お早目にどうぞ。

ツイッターで初ツイートを調べる方法

ツイッターが初ツイートを探せるツールを公開してくれました。自分の初ツイートを調べたり他の人の初ツイートも簡単に調べられます。今回は使い方をご紹介したいと思います。

サイドバーを左側に移動する~Hatena2 for はてなブログ

『Hatena2 for はてなブログ』のカスタマイズ例をご紹介します。今回はサイドバーを左側に移動させる方法です。

「Hatena2 for はてなブログ」のヘッダに画像を入れられるようになりました

はてなブログのテーマ ストアにて好評をいただいています『Hatena2 for はてなブログ』ですが、この度ヘッダに画像を入れられるように対応しました。

web系技術書を買うなら今でしょ!「Kindle冬のセール」でおススメする30選【1月5日まで】

Kindle本 冬のセールがやっていたのでweb系技術書を探してみました。2014/1/5まで対象のタイトルが半額以下になっているので欲しい本があればこの機会にどうぞ!私もいくつも欲しい本があり迷っています...どれにしよう。昨年はほとんど更新できませんでした…

あと2時間!WWDC 2013を見るならMacやiPhoneで

iOS 7が発表されるWWDC 2013が日本時間 11日の 午前2時から開始されます。今年はMacやiPhone、iPad、iPod TouchなどのiOSからライブストリーミング視聴できるそうです。

iOS 7のロゴをCSSで表現してみた(borderにグラデーションをかける方法)

CSS

jsdo.itでiOS 7のロゴをCSSで表現してみました。iOS7という作品をforkしてグラデーションなどを加えています。borderにはグラデーションをかけることができないため、paddingを用いて線を表現してみました。

MacのTerminal風のはてなブログテーマ「# Hatena Term」を投稿しました

MacのTerminal風のはてなブログテーマ「# Hatena Term」を作ってみました。プログラマーやコーダーの方におすすめです。

テーマストアにスターウォーズ風テーマ「HATENA WARS」を投稿しました

スターウォーズOP風のテーマ「HATENA WARS」を作ってみました。記事が自動的にスクロールするようになっています。

Webデザイナー・プログラマーにおすすめのiPhone・iPadアプリ

新社会人のWebデザイナー・プログラマーさんにおすすめできるWeb制作に関連するアプリをご紹介します。電車の中や外出先でコードを変更したい、デザインを修正したいときに重宝しますよ!

Wookmark jQueryのAPIを使って無限スクロール

前回ご紹介したグリッドレイアウトができるjqueryプラグインのうちWookmark jQueryのAPIを使って無限スクロールのサンプルを作ってみました。ほぼ公式サイトのデモのままですが表示させるものを変更しています。

可変グリッドレイアウトが簡単にできるjQueryプラグイン3選

可変グリッドレイアウトができるjQueryプラグインをいろいろ試したところ3つほど良さそうなものがあったのでご紹介します。可変グリッドレイアウトは写真のギャラリーサイトやポートフォリオサイトなど多くのオブジェクトを見せる際に効果的なレイアウトです…

Google リーダーが終了!乗り換えはfeedlyがおすすめ

Googleは提供しているRSSReader「Googleリーダー」が7月1日に終了することを発表しました。そこで代替サービスを探したところ『feedly』が良さそうなので試してみました。「Google Reader」終了 7月1日に ユーザー減少で - ITmedia ニュース

CSSの行数が少なくなる!?OOCSSを始めてみよう

CSS

中~大規模のサイトを制作するとCSSが半端なく長くなることが多々あります。こんなときCSSの行数を減らすことができるのがOOCSSというスタイルシートの考え方です。行数が少なくなるほかにもいろいろ便利な面があります。

Web制作者のための無料CMS21選

Webデザイナー、プログラマーがCMSを選択するときにこれだけ検討すれば大丈夫なように21個ほどCMSを探してみました。今回は無料のCMSを選んだので気軽に試すことができます。有名ものからマイナーものまで幅広く集めてみましたのでご紹介します。

【はてなブログ】iPhoneアプリの編集ツールバーを使ってみた

はてなダイアリーの時とは違い、アプリの方にも力を入れているはてなブログ。電車の中でブログを書きたい時重宝しています。

「Hatena2-Pink for はてなブログ」をテーマストアに投稿しました

「Hatena2 for はてなブログ」に続きピンクバージョンも作ってみました。他の色をご希望の方はコメント欄にてどうぞ!

透過していない画像ファイルを透過pngにする方法

背景が白以外のときに透過pngを使用したくてもクライアントが透過していない画像しか用意できない場合どうしますか?実際そういうケースに遭遇したのでその解決方法を残しておきたいと思います。

「hatena2 for はてなブログ」をテーマストアに投稿しました

昨日2/20、はてなブログがテーマストアをオープンしました!これで他のユーザーが投稿した公式以外のテーマを使用することができます。 また自分でカスタマイズしたデザインを投稿することも可能です。

Chromeなら一行で音声認識を実装できる

Chromeで簡単に音声認識を実装できるようなので試してみました。