読者です 読者をやめる 読者になる 読者になる

ウェブ学のすすめ

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で簡単に音声認識を実装できるようなので試してみました。

はてなダイアリーからはてなブログに移行する方法

はてなダイアリーからはてなブログに移行してみましたのでその手順とメリット、デメリットを書き残しておきたいと思います。

Illustratorで画像トレースした画像に色を塗る

画像トレースした写真に色を塗ることが可能なのかというご質問があったので実際にやってみました。 ポイントは画像トレースの「拡張」と「ライブペイント」です。

iPhone 3GSの電池が膨らむ!?ハマグリ現象出現!

ふと文鎮と化していたiPhone 3GSを見ると...パカッと割れてました(汗)他のiPhone 3GSでも同様の現象が起きているようです。

Windows 8 でXamppのApacheが起動しない場合の対処法

なぜか急にXamppのApacheが起動してくれないという事態に(汗) Skypeと干渉する場合があるそうですが再設定してもなぜか解決せず...。

PHPで九九表を作る方法

PHP

PHPで九九表を作ってみました。以前JavaScript版は作りましたがPHPでの作成はまだだったので挑戦。といっても変数の指定ぐらいしか違いがありませんでしたが...。今回はテーブルのデザインを変更、ホバー時に該当のセルの色が変わる機能を追加実装してみまし…

Googleドライブを使ってWEBサイトを無料で公開する方法

GoogleドライブにWebホスティング機能が追加されたようです。

郵便番号検索が簡単に実装できる!ajaxzip3を試す

API

郵便番号検索が簡単に実装できる「ajaxzip3」を試してみました。 データベースを使わずに簡単に郵便番号検索を設置できてしまいます。

DOMを使用したアニメーション

DOMを使用してアニメーションを作ってみました。CSS3を使っていないのでIEでもアニメーションが動きます。

2013年おすすめ自作PCパーツ

半年前ぐらいにWindows7にアップグレードしましたが、Windows 8 優待購入プログラム(\1,200)の〆切が2013年1月31日なのでそれに伴い新しいパーツを探してみました。

有線LANにつながったPCを無線アクセスポイントにしてiPhoneをWi-Fi接続する方法

有線LANにつながったPCを無線アクセスポイントにしてiPhoneやiPad等をWi-Fi接続する方法をご紹介します。※ただしWi-Fi接続してしばらく通信しないと通信が切れる等不安定です。その場合は以前の設定に戻してから再度お試しください。

2012年を振り返って

今年もあと3日、2012年を振り返ってみたいと思います。

SSHとは

正式名称 Secure Shell 読み方 SSH(エスエスエイチ) Secure Shell(セキュア シェル、エスチェ) 概要 ネットワークを介して 別のコンピュータにログイン 遠隔地のマシンでコマンドを実行 他のマシンへファイルを移動 (コピー) といったことができるプログラム…

Windows XPのビープ音を無効にする方法

Windows XPのビープ音を無効にする方法をご紹介します。※サウンドカードが入っていないPCでは、コントロールパネルにある「サウンド,音声,およびオーディオデバイス」からビープ音を無効にすることができません。

MySQLで大きいファイルをインポートする方法

phpMyAdminで大きなデータをインポートしようとするとエラーが表示されたのでその解決手順を残しておきたいと思います。

ダミーテキスト、画像、データを生成できるジェネレーター11選

Webサイトのテストでダミーのテキストや画像、データを入れる際に重宝しそうなジェネレーターを集めてみました。テスト以外でもカンプを作るときにも活躍しそうです。

LAN内で手軽に連絡できるメッセンジャーソフト「IP Messenger」

TCP/IPを利用したメッセンジャーソフト「IP Messenger」をご紹介します。このソフトをいれておけばLAN内で簡単にメッセージを送ることができます。職場や学校内でテキストはもちろんのことファイルも送受信できるので便利です!Windows、Macそれぞれフリーソ…

無料でブラウザチェックできるソフト・サービス5選

制作したサイトの表示、動作を確認するのに便利なブラウザチェックソフト、オンラインサービスを紹介します。

コマンドプロンプトでホスト名を確認する方法

コマンドプロンプトで使用しているPCのホスト名を確認する方法です。

求職者支援訓練6カ月コースを修了して

求職者支援訓練校を修了してもう1週間。勉強した6か月間のことを思い出しながら一区切りのあいさつをさせていただきたいと思います。

フィルタリングもできるjQueryプラグイン「isotope.js」

デモ↓別ウィンドウを開いて見る フィルタリングもできるjQueryプラグイン|isotope.js - js do it