サイトの表示高速化につながる18のこと | knowledge / baigie
ベイジでエンジニアをやっている酒井です。 ベイジには2017年に、新卒で入社しました。いつもはJavaScriptの開発からWordPressのカスタマイズなど、フロントエンドを中心としながら、一部バックエンドも含めて仕事をしています。『knowledge / baigie』でも、フロントエンド寄りの情報を発信していきたいと思います。 私の今日のテーマは、表示の高速化についてです。 webサイトの表示スピードは、webサイトのユーザー体験に直結すると私は考えています。表層的なUIデザインの改善以上に重要かつ効果的であることも多いため、webのデザイナーやエンジニアは、0.1秒でも速くなることにこだわるべきでしょう。 表示高速化の手法というと、サーバ側の話になることも多いですが、実はフロントエンド側でできることもたくさんあります。それは大きく3つに分けられます。 ブラウザ処理の高速化通信の高
独学・未経験でフロントエンドエンジニアになる方法 - tatsuyankmura
私は25歳の時に異業種から、Web業界に入りフロントエンドエンジニアになりました。 職業訓練校やスクールに通わず、知識ゼロの状態からフロントエンドエンジニアになるために行ったことや転職活動で使った求人サイト、面接で気をつけたポイントや意識したことをまとめてみようと思います。 これからフロントエンドエンジニアを目指している人、異業種からWeb業界への転職・キャリアチェンジを考えている方の参考になれば幸いです。 そもそもフロントエンドエンジニアとは 一般的にフロントエンドエンジニアとは、HTML/CSS/JavaScript/PHPなどを利用しWebサイトやWebアプリケーションの見た目や操作する部分を構築する人を指します。HTMLコーダーやマークアップエンジニアとの違いは、HTML/CSSの設計がメインの前者に対し、マークアップエンジニアはJavaScriptやPHPの実装、CMSや各種AP
動くCSSのためのメモ。
CSSでできる事がどんどん増えてます。JavaScriptを使って実装するようなレイアウトやUIも、CSSだけで作れちゃうほど、便利なプロパティがじゃんじゃか増えましたね。ここでは、要素にアニメーション効果をつけるためのCSSを使ったエフェクトについて、まとめてゆこうと思います:)。 CSSで動かす 「動く」といっても、自由自在にぐにゃぐにゃ動かせるわけではなくて、CSSアニメーションでは、プロパティの数値をスムーズに増減させることで、要素のスタイルを滑らかに変化させます。 例えば、下のサンプルでは、p要素にカーソルを合わせた時に、font-sizeの値を、1emから2emに、スムーズに変化するように指定しています。 p { transition: font-size 1s; } 動かすためのマストプロパティ CSSでアニメーションさせるために必要不可欠なのがtransitionプロパティ
Owl Carousel
How To Use 1. Load jQuery and include Owl Carousel plugin files To use Owl Carousel, you’ll need to make sure both the Owl and jQuery 1.7 or higher scripts are included. <!-- Important Owl stylesheet --> <link rel="stylesheet" href="owl-carousel/owl.carousel.css"> <!-- Default Theme --> <link rel="stylesheet" href="owl-carousel/owl.theme.css"> <!-- jQuery 1.7+ --> <script src="jquery-1.9.1.min.js"
jQueryで奥行きのある背景スクロールを作ってみる
画像を手前は早く、奥は遅く移動 デモを見て頂ければわかると思いますが、やってることは手前の背景画像を早く動かし、奥の画像を遅く動かしているだけです。 html + css 画像は当然ですが2枚以上用意しましょう。 ここでは3枚画像の画像を使用します。 なのでdivを3つ用意し、それぞれに背景画像を指定します。 html <div id="bg03"> <div id="bg02"> <div id="bg01"> <!-- /#bg01 --></div> <!-- /#bg02 --></div> <!-- /#bg03 --></div> css #bg01 { background: url(bg1.png); height: 3000px; } #bg02 { background: url(bg2.png); } #bg03 { background: url(bg3.png);
[CSS]画像を使用しないで、紙がひらっとめくれたエフェクトを与えるスタイルシート
あらゆるサイズのエレメントに利用が可能な、紙がひらっとめくれたようなページカールのエフェクトを与えるスタイルシートを紹介します。 デモページの拡大 このエフェクトはページのあらゆるサイズの要素に簡単に適用できます。 紙がひらっとめくれたエフェクトの実装方法 HTML HTMLはシンプルです。div要素にclassを付与しているだけです。 <div class="box">My box</div> CSS：シャドウの適用 box-shadowを使用して、内側と外側にシャドウを適用します。 .box { position: relative; width: 500px; padding: 50px; margin: 0 auto; background-color: #fff; -webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2), inset 0 0
[JS]イージングにも対応した、コンテンツをスクロールさせるスクリプト -Custom Content Scroller
限られたスペースに設置するのに最適、コンテンツにスクロールバーを設置するjQueryのプラグインを紹介します。 スクロールバーのデザインはCSSで簡単にカスタマイズできます。
PrimerCSS
Primer undercoats your CSS by pulling out all of your classes and id's and placing them into a starter stylesheet. Paste your HTML in to get started. Made for you with love and care by @luckystrikes and @wades. Notice: Undefined index: htmlsrc in /home/ypp7m8mtix54/domains/primercss.com/html/index.php on line 43
overflow:auto;を指定した要素の背景画像が固定できない件 » CONFIDELIC
overflow:auto;を指定した要素の背景画像が固定できない件 ある特定のボックスであるdivの高さと横幅を固定とし、テキストがその領域からはみ出る場合にスクロールバーが出る設定を以下のようにした。 div#messageArea{ width:600px; height:150px; overflow:auto; padding:12px 10px; border:1px solid #CCC; background:#FCFCFC url(http://xxxx.jp/img/sampleaimage.gif) no-repeat 0 0; } まずこれでIE以外のブラウザでは背景画像をdivの領域内で固定できた。 このままだと、IEで背景画像はスクロールで消えてしまうため、 ここにさらにbackground-attachment:fixed;を追加。 div#messageAr
jScrollPaneを使った全画面スクロールバーカスタマイズ – ヒビヅレ
久しぶりの技術系ネタの記事です。 Flashだとスクロールバーまで好きなように作れるけど、HTMLだと標準のスクロールバーでどうもサイトのデザインと合わなくてダサいと思う事があるかと思います。 そんな訳でリサイズに対応したウィンドウ全体のスクロールバーのカスタマイズをjQueryプラグインのjScrollPaneを使ってサンプルを作ってみました。 完成サンプルはこんな感じ。 サンプル jScrollPane自体は結構古いスクリプトなのでjQuery1.2.6を使ってますが最新の1.4.2でも問題なく使うことが出来ます。一応ちょいちょいバージョンアップがされているようですしね。 他の多くのサイトでも載っているので、普通に設置する所までは割愛します。 以下のサイトにサンプルコードが載っているので参考にしてください。 要素のスクロール｜jQuery plugin｜Ajax｜PHP & JavaS
スクロールバーをカスタマイズするjScrollPaneの使い方 | Wood-Roots.labs();
DEMO スクロールバーをカスタマイズするjScrollPaneプラグインの使い方をまとめました。正確な使用法というよりは最低限使えるかたちにする設定方法です。 まずはHTMLのhead部分でjsとCSSを読み込みます。 ダウンロード先は以下になります。 jScrollPane.js jquery.mousewheel.js（サイト内のmousewheelからダウンロード。ホイールでスクロールさせるためのプラグインです） <link rel="stylesheet" href="common/css/jScrollPane.css" type="text/css" media="screen,tv,print" /> <script type="text/javascript" src="common/js/jquery.js"></script> <script type="text
[mootools] スクロールバーを画像でカスタマイズする
スクロールバーを画像で作ることが出来るMootools Powered Scrollbarというcoolな関数をちょっと拡張してみた話。 このオリジナルの関数ちょっとクセがありまして <div id="wrapper"> <div id="scrollarea" style="height:1000px">dummy contents</div> <div id="scrollbar"><div id="knob"></div></div> </div> 上記のようにスクロールさせる要素とスクロールバーを兄弟にした場合、contentに#wrapperを指定しないとスクロールされません。 これで#wrapperにposition:relaviteしてあるとスクロールバーまで一緒にスクロールしてしまうわけです。 次のような入れ子のソースで、#wrapperの中身の#scrollareaをスク
![[mootools] スクロールバーを画像でカスタマイズする](https://cdn-ak-scissors.b.st-hatena.com/image/square/8a2ab074baa5e1b17dca6904f9d73ed85fd95990/height=288;version=1;width=512/http%3A%2F%2Ftenderfeel.xsrv.jp%2Fwtn%2Fwp-content%2Fuploads%2F2009%2F07%2Fcustom_scrollbar.png)
フォームのテキストボックスとテキストエリアをデザイン | アルペジオのように
フォームの入力欄がデザインされていると、何となく気持ちがいいですよね。デフォルトの入力欄よりも、入力しやすく感じます。 とはいえ、今までフォームを作成する場合は、ついついデフォルトのままで作成していました。なので、デザインされたフォームも作れるように練習です。 テキストボックスをカスタマイズには、inputタグをdivで囲います。 そして、inputタグのborderとbackgroundを消します。 .txtbox input { width: 195px; height: 20px; margin: 3px 2px; border: none; background: none; font-size: 1em; line-height: 20px; } この時に、画像のサイズに合わせて幅と高さ、行間なども設定します。 最後に、divタグに背景画像を設定します。 .txtbox { wi
css-eblog.com - このウェブサイトは販売用です！ - css eblog リソースおよび情報
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
CSS3リファレンス
背景 background-clip …… 背景の適用範囲を指定する background-origin …… 背景の基準位置を指定する background-size …… 背景画像のサイズを指定する 角丸 border-radius …… 角丸をまとめて指定する border-top-left-radius …… 左上の角丸を指定する border-top-right-radius …… 右上の角丸を指定する border-bottom-left-radius …… 左下の角丸を指定する border-bottom-right-radius …… 右下の角丸を指定する 画像ボーダー border-image …… 画像ボーダーを指定する border-image-source …… 画像ボーダーに使用する画像ファイルを指定する border-image-slice …… ボーダー画像の
iPhone用CSS [iPhone生活]
iPhone用のスタイルシートを別途用意する場合 下記のようにall.cssというスクリーン用のスタイルシートを、 pc.cssとiphone.cssに分けて下記のように設定することで、iPhone用のhtmlを作らずにiPhone用のレイアウトを用意することが出来ます。 media="screen and (min-device-width: 481px)"> media="only screen and (max-device-width: 480px)"> if IEの部分は、IEがmedia="screen and "を読み込めないため、IE用に再度外部CSSを宣言しています。 既存のスタイルシート内にiPhone用のスタイルを追加する 一方、外部スタイルシートを分けずに、またはhtml内にスタイルを宣言している場合にそれを生かしてiPhone用のスタイルを宣言することが出来ます。
css-eblog.com - このウェブサイトは販売用です！ - css eblog リソースおよび情報
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSSMENUMAKER.COM
HTML4から変化したHTML5のマークアップ ここが違う！サンプルで見るHTML5（2）
マウスオーバーで画像にラインをつけるcss | 伊藤商店の覚書