JavaScriptの外部ファイルで簡単に実装できる、映画コンテンツを快適に再生するHTML5動画プレーヤー -Moovie.js | コリス

2021/03/24 27 users スクリプト デフォルト 字幕 コリス 実装

動画、特に映画コンテンツを快適に再生することにフォーカスされたHTML5プレーヤーを実装するスクリプトを紹介します。 実装は非常に簡単でカスタマイズも豊富、字幕は多言語をサポート、動画の再生速度は0.1x-8xまで変更可能、デザインはCSSベースで簡単に変更できます。 Moovie.js デフォルトでも快適、フルカスタマイ... 続きを読む

サイトを高速化したらロード時間は1.6秒に、Lighthouseは100を獲得、その際に実施した手順を解説 | コリス

2019/12/17 22 users Lighthouse コリス スコア HTML 分割

サイトのロード時間とパフォーマンスを改善するために再構築した結果、ロード時間が1.6秒に短縮され、Lighthouseのスコアで100を獲得した際に、実施した手順を紹介します。 HTMLとCSSベースの改善が主で、ロード時の数ミリ秒間の表示、スマホ用CSSファイルの分割など、いろいろなサイトやブログの改善にも役立つと思いま... 続きを読む

CSSだけでHTMLは一切無し！Webページを構成するすべてのマークアップをCSSで構築するフレームワーク -CJSS | コリス

2019/08/02 116 users コリス CSSファイル HTML要素 body内 CSS

当ブログで「CSSで実装できる」という言葉を使いますが、厳密に言うとHTMLが必要です。しかし、今回紹介するのは、HTMLのマークアップも、データも、そしてJavaScriptもCSSファイルに記述するCSSベースのフレームワークを紹介します。 かなり特殊なフレームワークです。body内にHTML要素を一切記述したくない時にいいか... 続きを読む

Web制作者がチェックしておきたい！2018年、CSSベースのフレームワークのまとめ | コリス

2018/12/18 97 users コリス フレームワーク レスポ 軽量フレームワーク 過程

CSSベースの新着のフレームワークをはじめ、もはや定番といっていいフレームワーク、軽量フレームワーク、何かに特化されたフレームワークを紹介します。 CodyHouse CodyHouse's Framework -GitHub CodyHouse's Frameworkは先日ローンチしたばかりですが、当ブログでは開発の過程を記事にして紹介していました。 レスポ... 続きを読む

CSSベースの攻撃でiOSデバイスをクラッシュさせる恐れ--セキュリティ研究者が発見 - CNET Japan

2018/09/18 11 users iOSデバイス レンダリングエンジン iPhone iOS

「Safari」が使用するレンダリングエンジン「WebKit」に、「iPhone」および「iPad」に搭載されるOS「iOS」をクラッシュさせて再起動させる脆弱性があることを、あるセキュリティ研究者が発見した。 この脆弱性は、特別に細工されたCSSコードを使用しているHTMLページを読み込むことで悪用できる。使われるCSSコードはそ... 続きを読む

このCSSベースのWeb攻撃は、iPhoneをクラッシュ＆リスタートさせる | TechCrunch Japan

2018/09/17 35 users iPhone MacOS iPad Web攻撃 コード

一人のセキュリティー研究者が、あらゆるiPhoneをクラッシュしてリスタートさせる方法を発見した——必要なのはわずかなコードだけだ。 Sabri Haddoucheがツイートしたわずか15行のコードからなる概念実証ウェブページは、そこを訪れたiPhoneまたはiPadをクラッシュして再起動させる。macOSの利用者も、このリンクを開くと... 続きを読む

Web制作者がチェックしておきたい、軽量で読み込みが速いCSSのフレームワークのまとめ | コリス

2018/02/15 89 users モックアップ コリス コンポーネント フレームワーク 軽量

Webページやアプリでよく利用されるレイアウトやコンポーネントが簡単に利用できるCSSベースのフレームワークを紹介します。新しいプロジェクトを始める時に、モックアップを作成する時に、既存ページを変更する時に、ぴったりです ...記事の続きを読む 続きを読む

プロペラがすごい！よく使うUI要素にあったデザインやアニメーション、レイアウトが簡単に利用できる -Propeller | コリス

2017/02/28 74 users エレメント フレームワーク コンポーネント コリス プロペラ

最近見かける美しいデザインや気持ちいいアニメーション、レスポンシブ対応のコンポーネントやエレメント、Flexboxベースの柔軟なレイアウトなど、人気が高いテクニックを効果的に取り入れて制作されたHTMLとCSSベースのフレームワークを紹介します。 Propeller Propeller -GitHub Propellerの特徴 Propellerのスタイル・コンポーネント Propellerの特徴... 続きを読む

Webページでよく使うさまざまなコンポーネントが簡単に利用できるCSSベースのフレームワーク -Materialize | コリス

2014/11/11 237 users ユーザエクスペリエンス Materialize コリス 商用

最近のWebページでよく使用されているさまざまなコンポーネントやエレメントがフラットにデザインされたCSSベースのフレームワークを紹介します。 オープンソースで、個人でも商用でも無料で利用できます。 Materialize Materialize -GitHub MaterializeはGoogleが提唱する「Material Design」をベースに、ユーザエクスペリエンスにフォーカスされたCS... 続きを読む

レスポンシブなCSSベースのドロップダウンメニュー「Top Drawer」:phpspot開発日誌

2013/02/06 22 users phpspot開発日誌 Experiment

Top Drawer - A smooth dropdown menu for responsive web design | Experiment #5 レスポンシブなCSSベースのドロップダウンメニュー「Top Drawer」 JavaScriptを使わずCSS transformsを使ってレスポンシブなドロップダウンをアニメーションさせつつ表示できます。 シンプルなサイトな作りにしたい場合は... 続きを読む

シンプルデザインが使いやすそうなソーシャルカウンター「SocialCount」:phpspot開発日誌

2012/11/19 29 users Twitter Facebook SocialCount

filamentgroup/SocialCount GitHub シンプルデザインが使いやすそうなソーシャルカウンター「SocialCount」 Facebook, Twitter, Google に対応していて次のようなデザインでのソーシャルカウンタが実装できます CSSベースなのでお好きにデザインをカスタマイズすることも出来そうですね。 最近では必須ともいえるこうしたボタンも、自由にデザインし... 続きを読む

CSSベースのかっこいいボタンがぱっと簡単に作成できるオンラインサービス -Twitter Bootstrap Button Generator | コリス

2012/05/21 157 users コリス カッコイイボタン オンラインサービス

Twitter Bootstrapをベースにしたボタンを簡単に作成できるオンラインジェネレーターを紹介します。 Twitter Bootstrap Button Generator 使い方は簡単で左のパネルで、ボタンのテ [...] 続きを読む

jQueryで動かすアニメーションエフェクトが素敵なプリローダー・CUSTOM PRELOADER EFFECT - かちびと. net

2012/01/11 36 users アニメーションエフェクト プリローダー jQuery CSS

ちょっとお洒落なプリローダーを探してた という方の参考になるかな・・と思ったの と、自分でも使いたかったので備忘録です。 アニメーションエフェクトが素敵なプリ ローダー・CUSTOM PRELOADER EFFECTの ご紹介です。 エフェクトはjQueryとeasingで動かし、エレメントはcssで作成しています。コードも軽量で分かりやすいし、エレメントはcssベースなのでなかなか使い勝手がいい... 続きを読む

こんなに高品質なのに無料で利用できるCSSベースのテンプレートのまとめ | コリス

2011/06/07 811 users ライセンス ポートフォリオ用 複数 コリス 全て無料

企業用サイト用をはじめ、コマース用、ポートフォリオ用、ブログ用などの高品質ながら無料で利用できるCSSベースのテンプレートを紹介します。 テンプレートは1ページだけのものから、配下ページなど複数のページが揃っているものもあります。 ※テンプレートは全て無料で利用が可能ですが、ライセンスを必ず確認してください。 続きを読む

[CSS]IE6/7でも動作する、可変レイアウト用グリッドシステム -Flurid | コリス

2011/02/01 92 users jQuery コリス フレームワーク ver CSS

IE6/7でも動作する数少ない、可変レイアウト用グリッドシステムのCSS/JSのフレームワーク「Flurid」を紹介します。FluridはCSSベースで開発された可変レイアウト用グリッドシステムのフレームワークで、jQueryのプラグインとしても開発されています。Fluridの対応ブラウザFluridの対応ブラウザは下記の通りです。Internet Explorer (Windows) - ver... 続きを読む

デザインされたフリーのCSSテンプレート集:phpspot開発日誌

2008/09/17 179 users phpspot開発日誌 CSSテンプレート集 テンプレート

Free CSS Templates - Hidden Pixels デザインされたフリーのCSSテンプレート集。CSSベースでマークアップも綺麗なデザインされたテンプレートが公開されています。 うまくあてはめればサイトデザインの手間が省けますね。 ダウンロード ダウンロード ダウンロード ダウンロード ダウンロード ダウンロード ダウンロード ダウンロード ダウンロード 全部見る フリーでいいの... 続きを読む

CSSベースの超クールなナビゲーション集:phpspot開発日誌

2007/03/16 183 users phpspot開発日誌 ナビゲーション集 超クール デザイン

CSS-Based Navigation Menus: Modern Solutions | Smashing Magazine Navigation menus have to be intuitive, precise and easy-to-use. CSSベースの超クールなナビゲーション集。 どんなサイトにでも必ず必要になってくるのがメニューナビゲーションです。 秀逸なデザインのナビゲーシ... 続きを読む

サイトに使えるCSSベースのクールなメニューナビゲーション8個:phpspot開発日誌

2007/03/13 179 users phpspot開発日誌 MENU

8 web menus you just can't miss There's no point to discuss the importance of a web menu, how it's done and how it looks. Many people may remember a website for it's great looking menu. サイトに使えるCSSベースの... 続きを読む

CSSベースのフォームテンプレート:phpspot開発日誌

2006/12/12 140 users CSS phpspot開発日誌 コピペ テンプレート HTML

A CSS-based Form Template CSSベースのフォームテンプレート。 フォームをデザインするのって結構面倒だったりしますよね。 フォームのテンプレートがあらかじめ容易されていれば、コピペであっという間にフォームが出来そうです。 しかもCSSベースなのでデザイン変更も容易でHTMLも綺麗ということですごく便利です。 次のような綺麗なフォームのテンプレート。 １枚の中にCSSの定義... 続きを読む

CSSベースのクールなフォーム、サンプル集:phpspot開発日誌

2006/11/13 382 users phpspot開発日誌 サンプル集 attention

Smashing Magazine | Blog Archive CSS-Based Forms: Modern Solutions In Web 2.0 registration and feedback forms can be found everywhere. Every start-up tries to attract visitors’ attention, CSSベースのクールなフ... 続きを読む