新言語Hackで最強PHPerになろう！ - Qiita
新言語 Hack とは こんにちは、新言語 Hack が Facebook より OSS としてリリースされましたね。 詳細は以下の通り。 https://code.facebook.com/posts/264544830379293/hack-a-new-programming-language-for-hhvm/ 新言語 Hack は HHVM 向けの開発言語で静的型付き言語の性質を取り入れ PHP での素早い開発を実施し、PHPとの互換性があります http://hacklang.org/ http://hhvm.com/ HHVM (HipHop Virtual Machine for PHP) とは、Facebook が OSS で開発している PHP 用の JIT コンパイラです。 HHVM は PHP のコードをダイナミックにバイナリコードへと変換することで高速実行の実現を目
【HTML5・CSS3】おしゃれなテーブルデザインのサンプルソース5点 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
地味な離島ライター内藤です。普段はコーダーとして仕事をしていますが、たまにはデザイナーさんのように人の目に触れる仕事もしてみたい！ そこで本日は、日々の業務で見かけてこれは使えるぞと思ったtableを、独自に再構築してソースコードを公開しようと思います。 table作成時に参考になるサイト 本題に入る、その前に。XPの公式サポートも終了し、HTML5＋CSS3の普及が進んでいます。今更ながら、この技術でどんなtableが実現できるのか、とてもわかりやすく説明されていたサイトをまずご紹介します。 table専門参考ページ4選 table専門の参考ページを4つほど選んでみました。 CSS3を使って美しく装飾されたテーブルの作り方｜Webpark CSS3でのtableの作り方を、見た目とソースから解説してあります。 テーブル｜CSSデザイン｜スタイルシート（CSS）｜PHP & JavaScr
Toshi Omagari | 身近な書体：Comic Sans
久しぶりの身近な書体シリーズです。今回はComic Sansを採り上げます。 Comic Sansは1994年に作られてWindows 95（のPlusパック）に搭載されて以来、Windowsユーザーにはおなじみのフォントです。特に欧文圏ではそのカジュアルさがウケているようで、様々な場所で使われている書体です。まぁプロからすれば特に良くはない書体ですね。それどころかタイポグラファーやデザイナーの間では忌み嫌われている存在で、これの駆逐をテーマにしたウェブサイトもあるぐらいです。 （ちなみにこのサイトの運営者はカップルであり、共通の趣味、つまりComic Sans排斥で意気投合して結婚したそうです。Comic Sansの作者Vincent Connare氏は「自分の書体のおかげで夫婦が誕生したんならこんなに嬉しいことはない」と言ってます） でも、本当にそこまで徹底的に叩かれるほど悪い書体でし
【IE6】サポート終了、お世話になったバグを振り返ってみる | バシャログ。
私は zoom 派でしたね。 float された要素と 背景画像＆テキストの組み合わせでちょくちょく遭遇しました。 毎回プロパティを記述するのもナンセンスなので reset.css で すべての要素に _zoom: 1; を設定していたのも懐かしい思い出です。 ちなみにバージョン8以降ではこのhasLayoutプロパティ自体がなくなりました。 3. マージンが2倍になる…。 float の値 と逆方向に marginを設定する ！！ floatした要素で、marignを左右に設定した場合に、その値が2倍になるバグがあります。 .box { float: left; margin-left 10px; } 上記の場合、marginが 2倍の 20pxになってしまいます。 こんなときは、magin を逆方向に指定します。 .box { float: left; margin-right: 10
そこそこユーザビリティの高いフォームを作った
そこそこユーザビリティの高いフォームを作った 入力内容の検証とか、郵便番号変換を備えた、そこそこ使いやすいフォームのテンプレートを作りました time2014/01/18 hatenabookmark- 去年末実家に帰省していた時に、jQueryの練習＆業務で使うために、フォームバリデーションとか郵便番号変換とかを備えた、そこそこユーザビリティの高い入力フォームをコーディングしていたので、ここで公開しておきます。 フォームサンプル ソースお持ち帰り用 (Github) ここで"そこそこ"と言っているのは、もともと業務でユーザビリティ改善案として使うことが目的であって、ベストを目指してもサーバ制約やコスト的な観点で使えないことがあるから、そこは目指さないよという意味です。そもそも、フォームは必要悪ですし、ベストはフォームが存在しないことですね。 フロントエンド実装だけです（サーバ側スクリプト
背景に動画を使ったWebサイトの作り方
2023年5月12日 jQuery, Webサイト制作, Webデザイン 2012年後半あたりから少しずつ目にする機会が増え、今では海外サイトを中心に世界中に広まった、背景に動画を用いたWebサイト。サイトの雰囲気や、サービスの具体的な内容を背景に流すことで、よりユーザーの視点をスクリーンに注目させることができます。今回はそんな背景動画の実装方法を、実例サイトと共に紹介していこうと思います。 ↑私が10年以上利用している会計ソフト！ KINS WITH 動物病院のWebサイトでは、かわいいわんちゃんの動画とともに院内の様子がよくわかる動画を掲載しています。 AquallのWebサイトでは画面全体ではなく、動画の一部をくり抜いたような形で動画を掲載。背景の装飾としてよく溶け込んでいます。 動画を用意する まずは背景に表示したい動画を用意します。動画を用意する方法は大きく分けて4通り。 自分で
2行追加するだけでWebサイトを高速化するInstantClick.io - atskimura-memo
Before visitors click on a link, they hover over that link. Between these two events, 200 ms to 300 ms usually pass by (test yourself here). 引用：InstantClick — JS library to make your website instant リンクにマウスオーバーしてからクリックするまでには200msから300msほど時間がかかるそうです。実際このテストページでクリックしてみるとMacのトラックパッドだとさらに遅く500msくらいかかってました。 InstantClick.ioはその間に裏でリンク先ページをロードして勝手にリンクをpjax化してしまうという高速化ライブラリです。 やってることはRails4のturbolinksと似てます
デザインする上で大切にしていること - デザイナーのイラストノート
デザインしてますか？spicagraphです。ふだんツールに関する記事を書いたり、Twitterでつぶやいたりしていると「こいつ見た目のことばっかりやな」と思われそうで、めずらしくデザインするとき大切にしていることについて書きます。わたしの仕事は主にEC、LP、プロモーション、コーポレートサイトなので、UI/UXみたいなかっこいい話でないことは前置きしておきます（でもだいじなおしごとだよ！） デザインは誰のため？ 大前提として、わたしは誰に向かってデザインしているのか。 わたしはフリーランスで仕事をしているため「お客さん」がたくさんいます。仕事をくれた制作会社のディレクターさん、クライアント、ユーザーです。webサイトの「お客さん」はユーザーですが、ユーザーだけがいいと思うものだけが良いデザインだとは思いません。 webサイトは更新されていくものです、多くの場合はクライアントによって。とい
いざというときに便利そうな、ちょっと変わった珍しいアイコンセット - NxWorld
汎用性が高いUIアイコンなどと比べると使う場面は少ないものの、いざ使いたいときに便利そうなものやあまり見かけないタイプだと個人的に思ったアイコンセットのまとめで、過去に紹介してきたものをひとまとめにしました。 既に公開・配布終了しているものも一部あるのですが、ファイルダウンロード自体はできなくともデザイン的にはそのまま参考になることもあるので、そういったものはキャプチャが小さめではありますがリンク設定のみ解除する形で紹介します。 紹介しているアイコンを使用する際は、ライセンス等は各自で再度確認してください。 リンクが未設定で配布形式も記載されていないものは公開・配布終了しているものです。
昔は画像を使っていたけど、今は使わなくても再現できるもの色々。 | 福岡 ホームページ制作のブレンドデザイン
2014年03月07日 日々思うこと 昔は画像を使っていたけど、今は使わなくても再現できるもの色々。 Tweet ホームページ制作に関する技術も年々進んでいて、昔は画像を使わないと実現できなかったものも、今は使わずにできるようになったものが色々とあります。CSSという文字や背景の色、レイアウトなどを指示するファイルをホームページ制作に使用しますが、追加機能が加えられたCSS3を使うことで画像の代わりに再現できるようになりました。 画像を使わなくて済むと、画像よりもファイルサイズが小さくて済むので、ホームページの読み込みが速くなったり、編集がしやすくなったり、画像を作る手間が省けたりと利点が色々あります。具体的に何が変わったのかをご紹介しておきます。 1.グラデーション 昔は背景にグラデーションを使いたい、といった時はグラデーションの画像を用意していました。今はCSS3でグラデーション
Githubをつかって共同開発！ サイトのデザインリニューアルしました !
Githubをつかって共同開発！ サイトのデザインリニューアルしました ! 2014.02.20 | WordPress | プログラミング github どうもパープルことメガネこと大串です。この度、WP-Dサイトのリニューアルを行いましたー。今回はGithubを使ってメンバー同士でコラボレーションしながら制作を行うということをはじめてやりましたのでそのレポートです。 GitHubとは？ GitHubというWebサービスを利用しました。おそらく皆様も見たことはあると思います、すでに使ってるよーという人も多いでしょう。 GitHub（ギットハブ）はソフトウェア開発プロジェクトのための共有ウェブサービスであり、Gitバージョン管理システムを使用する。 Ruby on RailsおよびErlangで記述されており、GitHub社によって保守されている。 GitHub – Wikipedia G
ポリゴンスタイルやジオメトリックスタイルの背景素材 30 - NxWorld
個人的にすごい好みなので、いつか機会があれば使用させてもらおうと思って見かけてはメモしていた、ポリゴンスタイル（Polygo or Low-Poly）やジオメトリックスタイル（Geometric）の背景素材を整理兼ねてまとめました。 中には有償素材もありますがどれも安価なものですし、様々なデザインが数十種類同梱されているようなものなのでお得だと思います。 個人的に今までは同系色を使ったものを多く見かける印象でしたが、カラフルなものやブラーやグラデーションといった別の効果を組み合わせているようなものも多いです。 紹介している素材を使用する際は、ライセンス等は各自で再度確認してください。
WebGL 開発支援サイト wgld.org
次なる Web を見据えて 来たるべき WebGL2 の時代へ 2011 年、最初のバージョンである 1.0 が勧告された WebGL は、ウェブブラウザ上で OpenGL ES に相当するグラフィックス API の機能を利用することができる JavaScript の API です。 そして 2016 年、WebGL の正当な後継バージョンとなる WebGL2 (もしくは WebGL 2.0) がいよいよ本格的に利用できる段階になりつつあります。 当サイトでは、2012 年の開設以来、WebGL 1.0 系の API を用いるための技術解説を掲載してきました。そして今後は、時代の変遷に合わせて WebGL 2.0 系の解説記事も公開していく方針です。 WebGL 2.0 が登場するとは言っても、後方互換を保つという意味もあって 意図的に有効化 しない限りは WebGL 1.0 相当の AP
[CSS]楽しい動きが満載！ボタンや画像用の40種類以上のホバーエフェクトがまとめられたスタイルシート -Hover.css
ボタンやロゴや画像にclassを加えるだけで簡単に利用できるホバーエフェクトがまとめられたスタイルシート（SASSも有り）を紹介します。 40種類以上のCSS3アニメーションは、見てるだけでも楽しいです。 Hover.css Hover.css -GitHub Hover.cssの使い方 Hover.cssのデモ Hover.cssの使い方 使い方は非常に簡単です。 Step 1: 外部ファイル 当スタイルシートを外部ファイルとして記述します。 <head> <link href="css/hover-min.css" rel="stylesheet"> </head> 一部のエフェクトだけを使用したい場合は、そのスタイルだけコピペすればOK! Step 2: HTML あとは、ボタンやロゴや画像にclassを指定するだけで、さまざまなホバーエフェクトが利用できます。 <a class="
フリー写真素材サイトまとめ15選
こんにちは。学生ライターの池澤章太です。 Webで記事を書くときや資料を作るときに、フリー写真素材をよく使うと思います。しかし、イメージに合う写真や素材を見つけるってなかなか大変です。場合によっては商用利用できるか調べるなければいけませんし。 そんなときに、商用利用ができて、無料で使える素材サイトがまとめてあると便利ですよね。 ちなみに動画素材については送別会、結婚式に！映像制作に使える無料動画素材サイトまとめをご覧ください。 今回は、23個ほど素材サイトをまとめました。この記事をブックマークしておけば素材に困ったときに役立つはず！ 【こちらもおすすめ】 無料で商用利用OKのサイト特集 商用利用できるフリー写真素材サイトまとめ23選 ここでひとつ注意を。「フリー」という単語は、なにかと誤解を招きやすいですが、著作権がフリーだったり、クレジット表記が不要だったりする意味ではありません。各素材
【保存版】Webエンジニアが見るべきテックブログ一覧
皆さんはどのような方法で最新の技術や、コードのTipsを収集していますか？ はてなブックマークやTwitter, GitHubなど様々あると思います。 私はテックブログを使った情報収集をしています。今回はエンジニアが見るべきおすすめのテックブログをいっきにご紹介します。 テックブログとは？ ご存知の方も多いと思いますが、テックブログとはWEBサービスやゲーム等を提供している企業が、自社で使っている技術や開発手法を紹介するブログです。デベロッパーブログとも呼ばれます。 エンジニアが持ち回りで書くことが多いので、そこで働いている人のこともわかっちゃいます。 普段使っているサービスがどのような言語でできていて、どのようなフレームワークを使っているか、どんなツールを利用して開発しているのかが載っているのでとても刺激的な内容ばかりです。 転職、新卒の会社選びにも役立つ!? 転職する際に気になるどんな
全て商用利用無料！すぐに使えるJPEG素材からオリジナルを作成できるPSDまでブラーな背景素材のまとめ
全て商用利用無料！すぐに使えるJPEG素材からオリジナルを作成できるPSDまでブラーな背景素材のまとめ
FINDJOB!終了のお知らせ | FINDJOB!
FINDJOB! 終了のお知らせ 2023年9月29日にFINDJOB!を終了いたしました。 これまでFINDJOB!をご利用いただいた企業様、求職者様、様々なご関係者様。 大変長らくFINDJOB!をご愛顧いただき、誠にありがとうございました。 IT/Web系の仕事や求人がまだ広く普及していない頃にFind Job!をリリースしてから 約26年間、多くの方々に支えていただき、運営を続けてまいりました。 転職成功のお声、採用成功のお声など、嬉しい言葉もたくさんいただきました。 またFINDJOB!経由で入社された方が人事担当になり、 FINDJOB!を通じて、新たな人材に出会うことができたなど、 たくさんのご縁をつくることができたのではないかと思っております。 2023年9月29日をもって、FINDJOB!はその歴史の幕を下ろすこととなりましたが、 今後も、IT/Web業界やクリエイティブ
黒い画面不要！デザイナ向け静的サイトジェネレーター「Phest」を公開しました | チャットワーククリエーターズブログ
こんにちは！ChatWork CTOの山本です。 ChatWork Advent Calendar3日目を担当します。 今回は、ChatWork社内でサイト制作に使っている、デザイナ向け静的サイトジェネレーター「Phest(フェスト)」というツールを公開します！ >>PhestのGitHubリポジトリはこちら 静的サイトジェネレーターって？静的サイトジェネレーターとは、テンプレートなどプログラム的な処理を実行し、 HTML/JavaScript/CSS/画像などだけで構成された静的なWebサイトとして書き出すツールのことです。 Webサイトをつくる上で共通のヘッダやフッタなどは、PHPやSSIなどのinclude構文を使ったり、 そもそもWordpressなどのBlogやCMSなどを使って構築するケースが多いと思います。 静的サイトジェネレーターは、そういったシステムが必要な部分をあらかじ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
HTML5/CSS3のテンプレートのまとめ | コリス