[B! web制作] xxxkurosukexxxのブックマーク

xxxkurosukexxx id:xxxkurosukexxx

web制作に関するxxxkurosukexxxのブックマーク (91)

いよいよ正式版が登場！ jQuery 3での変更点と前バージョンからの移行のポイント
何が変わったか︵概要︶ jQuery 3.0では、非推奨としていたAPIやドキュメントになかったAPIを削除したり、全体的にAPIを整理してバグを修正しています。また一部のAPIでは、大きな仕様変更があります。既存のコードを動作させる場合には注意が必要ですので、まず移行プラグインをバージョンアップ対応ツールとして使って、影響具合を確認することをお勧めします。なお、jQuery 3.0での特に大きな変更点は、次のとおりです。バージョンの1本化 Deferred機能が﹁Promises/A+﹂仕様に準拠非推奨のload、unload、errorを削除して、onメソッドに統一カスタムセレクタの高速化既存コードからの移行既存のコードを移行できるように、Ver3用移行プラグインがリリースされています。このプラグインでは、影響のあるコードに対して警告がブラウザのコンソールに表示されますので
xxxkurosukexxx 2016/07/28
後で読む

jQuery

web制作
リンク
Bootstrap テンプレートは使うべきではないと思う - ボクココ
最近のはてぶITカテゴリーにしょっちゅう出てくるデザイナー向けBootstrap テンプレート。ペラ１のサイトのコードとDEMOが付随しているので文言を変えるだけで簡単にクールなwebサイトを作ることができる。例えばこんなまとめサイト。商用も無料！Bootstrapをベースに最近のトレンドを取り入れた新作テンプレートのまとめ | コリス読んだ人はきっと、「今後作るときはこういうのですぐ作れればいっか！」みたいな感じではてぶ登録するんだろうけど、実際にやってみた身としては逆に効率が悪くなった。なのでこういうのは使うべきではないと思っている。その唯一の理由。ちょっと変えるのが大変最も大きな理由はこれ。自分でCSSを組み立ててないのでどんなCSS設計になっているかを理解するのに時間がかかり、逆に時間が取られるというオチ。数ページ分くらいなら自分で一から組み立てていったほうが早かったと
xxxkurosukexxx 2016/03/04
web制作

css
リンク
blog.ishinao.net
キューエンジンとして、beanstalkdを使うんで、 yum install beanstalkd service beanstalkd start とかやってbeanstalkdをデフォルト設定で動かしておく。 Laravel4のapp/config/queue.phpで、 'default' => 'beanstalkd', に変更する。beanstalkdを使うには追加でライブラリをインストールしておく必要があるんで、composer.jsonのrequireに、 "pda/pheanstalk": "2.0.*" を追加して、composer updateしてインストールしておく。これでbeanstalkdコネクタを使ってキューを使う準備OK。キューを使うサンプルとしては、単純なDBカウンタを作ってみる。事前準備として、app/config/database.phpを書き
xxxkurosukexxx 2015/11/24
めも。

web制作

PHP
リンク
LaravelでOAuthを利用してTwitter、Facebook、Googleアカウントでログインを実装
LaravelでOAuthを利用してTwitter、Facebook、Googleアカウントでログインを実装﹁OAuth wrapper for Laravel4﹂を利用してOAuthを実装情報流出のニュースが世間を騒がせている昨今、ログイン機構をOAuthに限定するWebサービスも増えてきました。セキュリティ対策の難しさを考えれば、小さなWebサービスが取る戦略としては妥当なものかもしれません。私の作成した﹁GOいけん︵ゴーイケン︶﹂もOAuthに限定しようかと考えたのですが﹁タブーに縛られない意見を投稿する﹂という目的から考えて、SNSアカウントを使いたくないという方もいるかと思い、通常のログイン機構も残しました。目次 OAuth wrapper for Laravel4の導入方法 Facebookアプリの設定新規登録用のコントローラーを作成ログイン用のコントローラー
xxxkurosukexxx 2015/11/24
めも。

web制作

PHP
リンク
JavaScriptユーザエージェント判別・判定
Updated 2015.11.24 / Published 2015.04.02 新しいFirefox OSやWindows Phoneを含めた2015年現在のユーザエージェントを判定し分岐処理を行う手順をご紹介します。OSや機種毎の処理を行っていくには、もはや無理がありますので、タブレットかスマートフォンかを判別することのみにフィーチャーしています。ユーザエージェント情報に依存して、分岐処理を行うと、常に付きまとう悩みの種が新しいOSの登場です。今年もすでにauからFirefox OSを搭載したスマートフォンであるFx0が新たに登場し、次いで日本国内でもWindows Phoneが発売されることが決まっており、ユーザエージェント情報に依存して処理を行っている部分は相次いで見直しを迫られることになりますので、以下、ご参考に活用いただければと思います。 var _ua = (functi
xxxkurosukexxx 2015/10/13
めも。

web制作
リンク
XHTML5で実体参照を使う方法
HTML5にはXHTML版の記法も用意されていて、XMLが好きな人でも書けるようになっています。が、色々見ていたら﹁実体参照が使えない﹂という問題があるようで。。﹁<﹂(<)とか﹁&﹂(&)とかの実体参照はXMLの基本仕様に入ってるので問題ありませんが、﹁﹂(©)や﹁≫﹂(»)、さらには空白( )など、追加の実体参照はXHTML5では使えません。なにせこの辺の特殊文字はDTDに書かれてるので、外部DTDを指定しないXHTML5では構文エラーになってしまうのです。そんなわけで、これらの文字を使いたいときは﹁©﹂()のように、エンティティコードを直接指定して書くことになります。うおお面倒くさっ！XHTML5移行メモ必死の Web ハッカーへの推奨事項: <、>、&、"、' を除き、名前指
xxxkurosukexxx 2015/09/24
web制作

HTML5
リンク
XHTML5と文字参照 - 血統の森+はてな
結論から言うと、XHTML構文で名前文字参照︵HTML4で言うところの文字実体参照︶は使用を避けた方が良いかもしれない、と言う話。、リテラルに文字を書いたほうがよい︵どうしてもというなら、数値実体参照で︶、というお話。適当にぐぐって見つけたページ︵XHTML5で実体参照を使う方法 - 泥のように︶が大体合っていますが、微妙に舌足らずな気もするので一応メモ。もっとも、webでXHTML5を使うことは滅多にないと思うので、もっぱらEPUB3のリーディングシステム︵≒WebKit？︶でどうなるのか、ぐらいしか思いつきませんが。なお、XMLについてはよくわかっていないので全然あさってなことを書いているかもしれませんのであしからず。本題に入る前にまず文字参照︵Character references︶のおさらい。HTML4では、文字実体参照︵Character entity referenc
xxxkurosukexxx 2015/09/24
web制作

HTML5
リンク
location.href （Javascript）と $_SERVER['HTTP_REFERER']; (PHP)
この記事は1年以上前の記事のため、内容が古い可能性があります。 PHPで $_SERVER['HTTP_REFERER']; を実行すると、リンク元のURLを取得することが出来ます。これを利用するとダイレクトアクセスを防いだり、どこから飛んできたのかを調べることが出来るのですが、Javascriptの location.href = "リンク先URL"; で飛んでこられると、取得できない場合が有ります。どういう場合かというと、﹁IE8以下﹂の場合。またお前か・・・素直に﹁a href="リンク先URL"﹂を使うか、formのsubmit、PHPの﹁header("リンク先URL");﹂などの方法で飛ばすことにしましょう。最近はIE9やFirefoxでチェックしてしまうので、見落としがちになってしまいます。注意せねば。
xxxkurosukexxx 2015/09/04
“またお前か・・・”

web制作

IE対策

IE死ね
リンク
Bootstrap4の主な更新点 - Qiita
こうして見てみると、一段階上のサイズが追加されたというよりも、xsとsmの間が細かくなったという感じですね。 flexboxのサポート $enable-flex: true;を設定することでflexbox Layoutが使用されるようになります。これにより、tableやfloatを使っていた様々なハックが改善されるとのこと。ただし、IE9はflexbox Layoutをサポートしておらず、IE10でも古い仕様にしか対応していないため、デフォルトではこのオプションはfalseになっています。 well, thumbnail, panel を廃止、card に統一コンポーネントの well, thumbnail, panelがなくなり、cardに統一されました。 CSSリセットを Reboot というモジュールに統一 CSSリセットには、Bootstrap3ではNormalize.cs
xxxkurosukexxx 2015/08/20
めもめも。

web制作

bootstrap
リンク
APIを探そう。国内外のインデックスサービスまとめ | NTT Communications Developer Portal
APIとAPIを組み合わせてマッシュアップサービスを作ろうと思った場合、まず自分が欲しいデータを提供しているAPIを探す必要があります。今回はそんなAPIのディレクトリを提供しているサービスをまとめて紹介します。PublicAPIs執筆時点で5,330のAPIから検索ができるAPIインデックスサービスになっています。名前やAPI名などを入れることで、新しいAPIの登録申請もできるようになっています。PublicAPIs | Directory of publicAPIs for web and mobile API For That 検索、ソーシャル、ファイナンスなど約20のカテゴリに分かれて登録されています。約300種類くらいのAPIが登録されています。 API For That | An API Directory Zapier IFTTTのビジネス版と言った雰囲気のサービスに
xxxkurosukexxx 2015/07/29
プログラミング

web制作

メモ
リンク
CSSで実装するハンバーガーメニュークリック時のエフェクト 10＋ - NxWorld
ハンバーガーメニューは「メニューだとわかりづらい」と言われることも多いですが、特にスマートフォンサイトなどでは実装する機会はやはり多くはなってきているので、今回はそのハンバーガーメニューをクリックした時（メニューが展開しているときなどのアクティブ時）のエフェクトをCSSで実装したサンプルをまとめました。よく見る「×」のようなクローズボタンに変化するものから矢印に変化するものまで全12種類あります。
xxxkurosukexxx 2015/06/19
これハンバーガーメニューっていうんだね

css

web制作
リンク
Hover.css - A collection of CSS3 powered hover effects
2D Transitions Grow Shrink Pulse Pulse Grow Pulse Shrink Push Pop Bounce In Bounce Out Rotate Grow Rotate Float Sink Bob Hang Skew Skew Forward Skew Backward Wobble Horizontal Wobble Vertical Wobble To Bottom Right Wobble To Top Right Wobble Top Wobble Bottom Wobble Skew Buzz Buzz Out Forward Backward Background Transitions Fade Back Pulse Sweep To Right Sweep To Left Sweep To Bottom Sweep To Top
xxxkurosukexxx 2015/04/14
web制作

css3
リンク
CSSだけで画像をトリミングする方法3つとjQueryを使う方法1つ | Cappee Design
@cappeeです。特にシステム案件のコーディングだと、縦横比が異なる画像を扱う場合も多いと思います。例えばユーザー画像などを正方形で表示したい場合、アップされる元画像はユーザに委ねられるので画像のサイズや縦横比は様々になると思います。アップしたタイミングで画像を加工できるならいいですが、そうでない場合、見た目を整えるためにCSSで同じサイズにトリミングしてしまいましょう。トリミングにもCSSだけで3つのやり方があるので、状況によって使い分けたいですね。 overflow: hidden を使う一番オーソドックスなやり方がoverflow: hidden を使ってトリミングする方法です。 trimming というクラス名が入ったトリミングする枠用のタグはブロック要素である必要がありますので、もしインライン要素に指定する場合は、CSSに display: block; も追加してく
xxxkurosukexxx 2015/02/16
web制作

css

jQuery
リンク
Webサイトに必要なfaviconが21個になっていた - IT探検の追憶
久しぶりにWebサイトのfaviconを変えようと思い、調べてみると、必要なfaviconが大幅に増えていることがわかりました。その数、何と21個！そんなに増えていたとは。一応、以下にリストアップしてみます。 faviconのリスト favicon.ico: IE用 favicon-16x16.png: タブ表示用 favicon-32x32.png: Mac版Safari用 favicon-96x96.png: Google TV用 favicon-160x160.png: Opera 12 までのスピード・ダイアル用 favicon-196x196.png: Android版Chrome用 mstile-70x70.png: Windows 8 用 mstile-144x144.png mstile-150x150.png mstile-310x310.png mstile-31
xxxkurosukexxx 2015/01/07
なんだかなぁ…。

web制作

どうしてこうなった
リンク
商用も無料！Bootstrapをベースに最近のトレンドを取り入れた新作テンプレートのまとめ
Webデザインの最近のトレンド、縦長ページ、スクロールエフェクト、CSS3アニメーション、フラットスタイルなどを取り入れたBootstrapのテンプレートを紹介します。 Bootstrapは先週3.3.0がリリースされ、Bootstrap4の開発も進んでるそうです。4ではIE8はサポート外になる予定。
xxxkurosukexxx 2014/11/05
bootstrap

web制作
リンク
HTML5勧告–オープン・ウェブ・プラットフォームの重要なマイルストーンを達成
安定した基盤上で、次世代のウェブテクノロジーを構築 Read below what W3C Members have to say about HTML5 2014年10月28日(アメリカ)：ワールド・ワイド・ウェブ・コンソーシアム(W3C)は、ウェブページやウェブアプリケーションを構築する際に使用されるフォーマットHTMLの第5版であるHTML5を勧告として公開し、オープン・ウェブ・プラットフォームの礎を築きました。HTML5は、アプリケーション開発者やアプリケーション産業がこの先何年に渡って信頼するに足る、アプリケーション開発のための機能を提供します。HTML5は今や幅広いデバイスで、そして世界中のユーザが利用可能であり、かつ豊富な機能を持つアプリケーションの開発コストを削減します。 W3Cディレクターを務めるティム・バーナーズ＝リーは、「ビデオやオーディオをブラウザ上で見たり、ブラ
xxxkurosukexxx 2014/10/29
html

HTML5

web制作
リンク
Geo for Bootstrap, a Timeless Theme by Divshot
Geo for Bootstrap A theme for Twitter Bootstrap, from Divshot. To get started, download the "bootstrap.css" or "bootstrap.min.css" file and include it in your HTML webpage <head> tag: <link href="bootstrap.css" rel="stylesheet">
xxxkurosukexxx 2014/10/03
最高にCoolなデザインだ！

bootstrap

web制作
リンク
HTML5とCSS3を職として身につけたい人が最初に読んでほしいオススメの本 -HTML5+CSS3の教科書
HTMLとCSSはWeb制作の中では敷居が低く、あまり詳しくなくてもWebページやブログなどを作成することができます。しかし職として考えた時は、必要な知識をしっかりと身につけたいものです。 HTMLってそもそも何なのか、どうして正しくタグをつける必要があるのか、CSSを使う意味は何？といった基本から、実装でなぜこのタグを使うのかこういうテクニックを使うのかといったことまで、必要な正しい知識をしっかりとマスターできるコーディングをまじめに取り組みたい人にオススメの本を紹介します。書店に並んでいる多くのHTML5とCSS3の書籍の中から自分にあった本を探す時は、必ずこの本も加えて検討してみてください。
xxxkurosukexxx 2014/10/03
これよさそう。

web制作
リンク
jQuery.ajax()でファイルをアップロードする方法
jQuery.ajax()でファイルをアップロードする方法を紹介します。1．はじめに jQuery.ajax()で画像ファイルをサーバに送信し、バックエンドのPHPで画像の幅・高さを返却し、それを表示するという簡単なプログラムを組んでみました。フロントエンド <script src="http://ajax.google apis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> <script> $(function(){ $('#foo').submit(function(){ $.ajax({ url: "test.php", type: 'POST', data: { 'file': $('#file').val() }, dataType: 'json' }) .done(function( data ) { $('#re
xxxkurosukexxx 2014/09/30
“なお、FormDataオブジェクトはIE9・Android2.3より前のバージョンでは使えないようです。”

web制作

jQuery
リンク
Bootstrap 5 & Vanilla JavaScript - Free Material Design UI KIT
Material Design for Bootstrap 5 & Vanilla JavaScript Standard Bootstrap version built with plain JS (but works also with jQuery)
xxxkurosukexxx 2014/09/29
bootstrap

web制作
リンク
1 2 3 4 5 次のページ

お知らせ

もっと読む

公式Twitter

@HatenaBookmark
リリース、障害情報などのサービスのお知らせ
@hatebu
最新の人気エントリーの配信

キーボードショートカット一覧

j次のブックマーク

k前のブックマーク

lあとで読む

eコメント一覧を開く

oページを開く

設定を変更しましたx