わたしが1年間に送ったメールのうち40件を公開しました
そこそこユーザビリティの高いフォームを作った
そこそこユーザビリティの高いフォームを作った 入力内容の検証とか、郵便番号変換を備えた、そこそこ使いやすいフォームのテンプレートを作りました time2014/01/18 hatenabookmark- 去年末実家に帰省していた時に、jQueryの練習＆業務で使うために、フォームバリデーションとか郵便番号変換とかを備えた、そこそこユーザビリティの高い入力フォームをコーディングしていたので、ここで公開しておきます。 フォームサンプル ソースお持ち帰り用 (Github) ここで"そこそこ"と言っているのは、もともと業務でユーザビリティ改善案として使うことが目的であって、ベストを目指してもサーバ制約やコスト的な観点で使えないことがあるから、そこは目指さないよという意味です。そもそも、フォームは必要悪ですし、ベストはフォームが存在しないことですね。 フロントエンド実装だけです（サーバ側スクリプト
オンラインで誰でもプログラミング学習ができるEdTechサービス総まとめ（2013年版）：GREAT GEEKS：オルタナティブ・ブログ
今年も早いもので残すところわずかとなりましたね。2013年に注目を浴びるようになったEdTechという言葉ですが、ITを活用した学びの可能性がどんどん大きくなってきており、以前よりも幅広い内容を学ぶことができるようになりました。そこで今日はプログラミング学習にフォーカスをあてて、国内外問わずプログラミングを勉強できるサービスをまとめました。 オンラインで誰でもプログラミング学習ができるサービス総まとめ ◆日本のサービス 1.無料動画で勉強できる『ドットインストール』 ドットインストールは初心者向けプログラミング学習で、基本的に全て無料で見放題のサービスです。ビデオコンテンツが1000本以上あり、初心者でも挫折しにくいように数分ほどの動画に区切ってあります。私自身も日頃愛用しているサービスの１つで、HTML、CSS、JavaScriptなどのweb言語からObjective-Cなどのアプリ開
はてなブログの「最新記事」サイドバーにアイキャッチ画像を重ねて表示するカスタマイズ - 情報学の情緒的な私試論β
2013-11-02 はてなブログの「最新記事」サイドバーにアイキャッチ画像を重ねて表示するカスタマイズ ブログ 【修正済】はてなブログの「最新記事」を画像付きにする方法。 - #ChiroruLab 読みましたー。最新記事の表示が綺麗になって良い感じです。早速、弊ブログにも設置させて頂きました。ありがとうございます。 【修正済】はてなブログの「最新記事」を画像付きにする方法。 - #ChiroruLab 弊ブログ用カスタマイズ 基本的にはコピペで出来たのですが、既存スタイルとの関係でHTML内にタイトルを置くと枠ができてしまうので、「最新記事」という文字列はHTML側のタイトルで表示しています。とはいえ、『記事一覧 - 情報学の情緒的な私試論β』への導線が消えてしまうのもマズイので下側に『>>more』を表示させてリンクさせるようにしました。 その他、テキスト幅を調整したり、左詰めにし
はてなブログで続きを読むを画像（ボタン）に変更する方法 - はてブのまとめ
はじめに はい、タイトルまんまですね。 デフォルトの続きを読むがあまりにも貧相で味気ないので前々から変えたいなーと思ってたんですけど、うまく変える方法がわからずに放置してました。 同じような人がいるんじゃないかなと思い、やり方を紹介します。 覗き見し…参考にしたのはまみぺこさんのはぁはぁブログです。 はてなブログでこんなにカスタマイズできるんだと衝撃でした。 はてなブログになりました - はぁはぁブログ 続きを読むを画像に変えるには 早速やり方を紹介したいと思います。 画像さえあれば所要時間は５分もかからないぐらい簡単ですね。 以下を管理→デザイン→カスタマイズ→デザインCSSに貼り付けるだけです。 a.entry-see-more{ width:220px; height:50px; text-indent:-999px; display:block; background:transp
はてなブログカスタマイズ!!メニューバーを表示させるメリットとは - はてブのまとめ
はじめに メニューバーのCSSどうやってるのと読者からメールをいただきました。 あー需要あるんだーと思い私のブログにあるメニューバーでしたらやり方を紹介します。 前も言った通り私はhtml、CSSに関してはずぶの素人なのでその辺ご了承ください。 早い話しがテンプレート使えば楽勝ってことですよ。いい時代になったもんですね。 そういえばはてなブログ、はてなダイアリーってほとんどメニューバー設置してないブログばかりですよね。その辺も触れたいと思います。 【スポンサードリンク】 メニューバーを設置することの意味 人気エントリーにいつも入って知名度のあるブログであれば、どんなことを書いてるかわかるのでいらないんですが、そうでない場合一見さんにここはこんなことを書いてるブログだよーってことを説明したほうが親切ですよね。 サイドバーにカテゴリーを設けてる場合、どうしても記事を読み進めなければそれを表示さ
Google Web Designer - Home
Create engaging videos, images, and HTML5-based designs for your business that can run on any device Intended for business use only Features that help businesses bring ideas to life Google Web Designer gives you the power to create beautiful and compelling videos, images, and HTML5 ads. Use animation and interactive elements to build out your creative vision, then scale your content for different
クッキー・クリッカーについて
昨日、筆者はクッキー・クリッカーなるゲームを体験した。このゲームは、ゲームの本質を非常によく抽象化している。ここではそのゲームについて述べるが、読者には実感のため、並行してゲームを行なってもらいたい。 このゲームのプログラムはHTML/CSS/JavaScriptと、その他のリソースで構成されていて、ストールマンの自由四原則に合致する自由ソフトウェアではないが、一応は、制限的ながら、forkや改変を許諾している。このプログラムを動作させるには、まともなブラウザーが必要である。 Cookie Clicker まずみると、左に素晴らしくうまそうなクッキー、中央によくわからない列、右によくわからない小物が並んでいる。操作方法がよくわからない。まず、左にこれみよがしに配置してある、うまそうなクッキーをクリックしてみよう。 +1 なんと、クッキーが一枚得られた。続けてどんどんクリックしていくと、数十
はてなブログのidとかclassとか - kyabana's blog
はてなブログで「デザインテーマコンテスト」が開催されています！ オリジナルデザインを投稿してAmazonギフト券を当てよう！ 「はてなブログ デザインテーマコンテスト」開催 - はてなブログ開発ブログ 使われている"id"や"class"がわかっていると デザインしやすいのでザックリさらってみました。 おおよそこんな感じ。 body（トップページで.page-index、記事ページで.page-entryが追加）div#globalheader-containeriframe#globalheader（ヘッダ[メニューやHatena Blogロゴ、Hatenaロゴなど]）div#containerdiv#container-innerheader#blog-titlediv#blog-title-inner（タイトル画像）h1#title（ブログ名）h2#blog-description（
【B】 はてなブログをとことんカスタマイズ！新着記事をちょこっとだけ派手に見せる方法、の巻 - HSKぐうたらジャーナル
以前の記事で、ブログ記事を写真の一覧で見せるwebサービス 複眼RSSの使い方をご紹介させていただきました。 【B】 はてなブログに過去記事を写真で表示する、お手軽カンタンカスタマイズの巻 - HSKぐうたらジャーナル すごく手軽にブログの見た目を変えられるし、重宝していたのです…が。 ちょっと物足りないところがぽろぽろと出てくるように。 むー。困った。 だったら自分でコードを書いちゃおう！ というわけで、拙いながらもJavascriptとCSSを書いてみました。 今回ご紹介する方法は、ちょっと手間は掛かるのですが 次のようなメリットがあります。 記事タイトルが画像と一緒に表示されるので、どんな記事か想像しやすい 最新の記事を見つけやすい、”NEW”アイコンが付く 広告表示一切なし！ 所要時間は、本記事の設定をそのままコピペ！で約20分。 ガッツリとカスタマイズしたい！ という方にも、CS
はてなブログになりました - はぁはぁブログ
2013-06-14 はてなブログになりました はてな 『はぁはぁブログ』です。 「はてなダイアリー」から「はてなブログ」にお引っ越しをしてみました。 ブログ名 はぁはぁブログ URL http://mamipeko.hatenablog.com/ かいているひと まみぺこ @mamipeko はてなブログにした理由 1 日本語Webフォントが使えるから理由はひとつ。 日本語Webフォントが使えるからです。 はてなダイアリーだと javascript の制限があってできませんでしたが はてなブログはできます。Twitter / mamipeko そうなんです。はてなブログは javascript が動きます。 はてななのに javascript が動く。 感動してぶるぶる震えがとまりませんでした。こんなことを言うと、はてなから怒られそうではありますが 「javascriptが
テーマ ストアを強化！ そのほか多数の機能追加・修正を行いました - はてなブログ開発ブログ
このたび、はてなブログでは以下の機能追加・不具合修正を行いました。 テーマ ストアを強化 Evernote認証に関する改善 http記法の「:favicon」指定 その他の不具合修正 ユーザーデザインテーマをさらに利用しやすくしました ユーザーが投稿したデザインテーマをユーザーが利用できる テーマ ストア において、デザインテーマをさらに便利に利用できるよういくつかの機能追加と不具合修正を行いました。 作者が同じテーマを一覧表示 同じ作者によるテーマが一覧表示される、作者ページを新設しました。テーマの作者名をクリックすると表示されます。 テーマの作者ページ例「uedayのテーマ一覧 - テーマ ストア - はてなブログ」 テーマの説明にはてな記法 これまでテキストのみだった「テーマの説明」欄で、はてな記法を利用できるようにしました。 テーマ作者がテーマを投稿する際に、参考記事にリンクを貼っ
オリジナルのテーマを共有しよう！ 「テーマ ストア」をオープンしました - はてなブログ開発ブログ
本日、はてなブログのデザインを共有できる「テーマ ストア」をオープンしました。 テーマ ストアでは、登録されているテーマを自分のブログにインストールしたり、自分で作成したオリジナルのテーマを投稿することができます。 テーマ ストアへ 自分のブログでテーマを利用する 使いたいテーマを見つける テーマ ストア のトップページから、使いたいテーマを探します。テーマの並び順は、人気順か新着順で切り替えることができます。 スクリーンショットをクリックすると、テーマの詳細が表示されます。 自分のブログにテーマをインストールする 使いたいテーマが見つかったら、テーマの詳細ページで「プレビューしてインストール」をクリックします。インストール先のブログを選択すると、テーマが一時的に適用された状態で、プレビュー画面が表示されます。 プレビューを確認して問題なければ、「このテーマをインストール」をクリックすると
これなら分かる！WEB制作を無料で「学べる」サイトまとめ
作成：2013/02/4 更新：2014/11/01 Web制作 > 基本的なところを簡単に、楽しく覚えたい 自分でサービス作ったり、会社や違う職種でも 色々と「基本」はおさえておきたい 今回はサイト制作に必要な「基本的な知識・情報」を、分かりやすいサイトを中心にまとめました。必ずおさえておきたいスキル・知識です。 エンジニア速報は Twitter の@commteで配信しています。 もくじ １．HTML5 ２．CSS ３．レスポンシブ ４．配色 ５．視線誘導 / 心理学 ６．インターフェース / ユーザビリティ ７．SEO ８．ディレクション ９．アクセス解析 １０．WEBマーケティング １１．コピーライティング １２．ソーシャル １．HTML5 HTML5って何？ HTML5とは何かを簡単にまとめてみた - Yahoo! JAPAN Tech Blog Canvasについて知っておく
文系デザイナーでも大丈夫！レスポンシブWEBサイトをWordPressで作ってみよう
WP-CLIとWordPress公式ディレクトリを活用した爆速サイト構築術 ーインストールからデザイン、ページ作成までを10分でー
もうアイコン画像はいらない！ Webフォントを使って、iOS風タブバーとアイコンを作成する方法
こんにちは、鴨田です。 最近、アイコンがセットされたWebフォントを使うことで、 画像を使わずにアイコンを表示するという手法が流行っていますね。 すごく興味はあったのですが、なかなか使う機会もなく、 便利そうだなと思っていただけで、今まで使ったことがありませんでした。 しかし、先日、とある案件でやっと使う機会に恵まれたので、やり方をご紹介いたします。 (プロトタイプだけ作って、結局プロダクトとしては使いませんでしたが・・・) 最近話題になっていたこちらのサイトがとても便利です。 Fontello - http://fontello.com/ 使いたいフォントを選択します。 ここでは、「Entypo」フォントから5つ選択します。 選択が終わったら、上部のタブから「Edit codes」をクリックします。 アイコン画像の上部のバーをクリックして、アイコンに割り当てる文字列を決めます。 英語で頭
これからWebサイトの制作をしたいけど、何から勉強したらいいの？っていう人のためのガイド
以前から、「Webサイトを制作をしたいけど、何から勉強したらいいの？」という質問をよく頂いていました。私が Web制作を勉強し始めた頃に比べると、最近はたくさん情報がありすぎて何から始めればいいのか迷う人も多いみたい …。なので今回は、Webサイトを作るのに必要な知識を簡単にまとめてみました。 最近本だなを整理していて、もう読まなくなった Web制作系の本を片付けたりしてみました。ずーっと前、Webサイトってどうやって作るんだろうってところから始まって、用語もよく分からないまま色んな本を読んだりした頃を思い出します …。 Webサイトは HTML っていうものでできていて、CSS っていうもので、見た目をデザインしていくのかぁ … っていうことさえ、あの頃の私にとっては新しい発見だったなぁ … なんて思ったりしました。 最近では HTML5 とか CSS3 とか、私が勉強し出した頃に比べる
誰でも1時間でDreamweaverを使ってウェブサイトが作れるようになる動画チュートリアル。 | Last Day. jp
誰でも1時間でDreamweaverを使ってウェブサイトが作れるようになる動画チュートリアル。 最終更新日： 2016/02/05 HTML/CSS, YouTube チュートリアル こんにちは@sayobsです。今日紹介するのはAdobeから発売されているドリームウィーバーを使って誰でもHTML/CSSでウェブサイト(ホームページ)を制作する動画チュートリアルを紹介します。 僕も最初はこの動画を見てDreamweaverの使い方を覚えました。英語ですが、凄く分かりやすいですよ。WordPressで自作テーマを作りたい人にもおすすめのチュートリアルです。 1時間で覚えようPart 1 CSS Layout with Adobe Dreamweaver CS4
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
PageRank売買へのペナルティがあなたのサイトに及ばないために | 住 太陽のブログ
sekailog.com