業務内容が書いてあったのを省いたのでわかりにくくなっているとは思いますがアップロードしておきました。Read less
![20160930 フロントエンド高速化 業務編 (社内勉強会)](https://cdn-ak-scissors.b.st-hatena.com/image/square/106054fad5c72b8092c604b4457d21e4a78e6bea/height=288;version=1;width=512/https%3A%2F%2Fcdn.slidesharecdn.com%2Fss_thumbnails%2F20160930frontend-161003102113-thumbnail.jpg%3Fwidth%3D640%26height%3D640%26fit%3Dbounds)
こんにちは、生形です。 最近、嬉しいことにアシアルの書籍の売れ行きが軒並み好調です。 6月に入り、弊社岡本が執筆した「イラストでよくわかるPHP」が、Kindleの月替わりセール対象商品になりました。 なんと699円(紙の本の価格の64%OFF!)で購入いただけます。 現在、アマゾンWebプログラミングカテゴリの売れ筋ランキング1位です! セールは今月いっぱいですので、ぜひこの機会に。 つづいて、私の執筆した「スラスラわかるJavaScript」に増刷がかかりまして、 個人的な目標の1万部まであと少しというところまで来ました! セミナー等でお会いした方には本を買いましたよと声をかけて頂くこともあり、大変ありがたく思っております。 購入者特典としてjQueryのTips集を翔泳社のスラスラわかるシリーズ公式サイトで配布していますので、 ご存じなかった方はぜひダウンロードしてみて下さい! さて
企業サイトやブログなどで使われるシンプルなグリッドをはじめ、オフセットのカラム、ネストのグリッド、左・右・天地揃えと中央揃え、逆順配置など、柔軟なグリッドが簡単に実装できるスタイルシートを紹介します。 Flaxboxを勉強したい初心者から、簡単に使いたいと考えてるベテランまで、勉強にも実装にも役立つ便利なスタイルシートです。 Flexbox Grid Flexbox Grid -GitHub Flexboxの各プロパティの解説は、下記ページをご覧ください。 最新のドラフトに準じた CSS3 Flexbox の各プロパティの使い方をヴィジュアルで詳しく解説 Flexbox Gridで実装された柔軟なグリッド Flexbox Gridの使い方 Flexbox Gridで実装された柔軟なグリッド Webデザインで使うさまざまなグリッドをclassをちょちょいと加えるだけで実装できます。
Onsen UIはHTML5モバイルアプリを高速化し、かつネイティブアプリのようなUIを提供するフレームワークになっています。技術的にはカスタムエレメントとAngularJSを使って作られていますが、その利用に際してAngularJSの習得が必須という訳ではありません。現在のOnsen UIはAngularJS以外の様々なJavaScriptフレームワークと組み合わせて使えるようになっています。 今回はWeb開発で最も使われているであろうjQueryを使ってOnsen UIの操作を説明したいと思います。 <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="mobile-web-ap
お久しぶりのjasです。 第一子の出産で半年ちょっと休んでいるので、やや休みボケ気味です。 春に復帰すべく、ちょこちょこプログラム書いてます。 で、さっきjQueryで遊んでいたら、cssが思ったように指定できない! $('div').css({ 'cursor': 'pointer !important' }); !importantを書くと効かないんですね。 でも、効いてもらわないと困るので調べてみました。 すると、本家サイトにやり方が書いてありました。 $('div').css({ 'cssText': 'cursor: pointer !important;' }); あ~できたできた。 CSSがちゃんと効くようになりました。 本家サイトの情報 http://bugs.jquery.com/ticket/2066
ある程度スクロールすると、途中から位置が固定になるコンテンツを見かけたことはありませんか? 今回はjQueryを使ってそれを作ります。 デモ1 デモ2 途中から位置が固定されるナビゲーションのデモ 1 & 2 ダウンロード 今回使うHTMLはこんな感じです。 <div id="header"> <h1>タイトル</h1> </div> <div id="container"> <div id="main">左カラム(メインコンテンツ)</div> <div id="sidebar"><!-- サイドバー --> <div id="nav">ここを固定する</div> </div> </div>#mainと#sidebarはfloat: leftしています。 これの#navが表示エリア上部から20pxの位置まで来たら位置を固定したいと思います。 position: fixedを使って固定する
こんにちは。LIGフィリピン支社代表のせいと(@seito_horiguchi)です。 最近友人と『中学生円山』を観に行きました。 女性にはおそらく理解できないであろう「男子中学生あるある(主に下ネタ)」が盛り込まれていて、いい意味でヒドイ内容でした。もう一回観たい(´ω`) さて、今回は「HTMLとCSSはわかるけどjQueryってなにそれ、おいしいの」という方向けに、今日から使える簡単かつ便利な3つのメソッド「slideToggle/fadeToggle/toggleClass」をご紹介します。 こいつらを知っとくと下記のようなメリットがあります。。 アコーディオンメニュー、タブ、スマホサイトでよくある「上からスラスラ出てくるメニュー」とか実装できる 超シンプルな記述なので、今日から使える いやーこれは便利ですね。 というわけで、早速解説していきます。 【こちらもおすすめ】 超簡単jQ
割と頻繁に使うので備忘録。 jQueryを使用して「チェックボックスにチェックされたら送信可能にするボタン」と「文字が入力されたら送信可能にするボタン」をそれぞれ実装する方法です。 特にチェックボックスの方は利用規約などに同意してもらったかの部分で用いたりと使う場面が多いのではないかと思います。 チェックボックスにチェックされたら送信可能にするボタン ページが表示された際はイメージ左のようにボタンにはdisabledが指定されて送信できない状態になっています。 それを「利用規約に同意します」というテキスト横にあるチェックボックスにチェックが入ったら、ボタンに指定してあるdisabledを解除して送信可能にするというものです。 実装にはjQueryを使用するので予め読み込ませおき、それぞれ下記のように記述をします。 <input type="checkbox" id="check" /><l
こんにちは、エンジニアチームのづやです。 CSS3のtransition便利ですよね。 JavaScriptから制御してると、jQueryでanimateをstopさせるときみたいに途中で動きを止めたいことがありました。そんな時どうすればいいかわからなかったので、調べてみました。 JavaScriptから制御しているCSS3のtransitionを途中で中断させる方法 動かしてるstyleを上書きしてしまう これが一番ベターっぽい。中断したいタイミングで対象となってるstyleを上書きすると止まってくれるようでした。 <!-- こんな要素があって --> <input type="button" name="start" id="start" value="開始"><br> <input type="button" name="stop" id="stop" value="停止"><br>
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く