旧石器時代のJavaScriptを書いてる各位に告ぐ、現代的なJavaScript超入門 Section1 ～すぐにでも現代っぽく出来るワンポイントまとめ～ - Qiita
はじめに ネットには様々な情報が溢れており、JavaScriptに関する情報も多数存在しております。 その中には、「今時こんな書き方しねえよ…」と思わずツッコミを入れたくなるような、本当に、本当に古い内容について書かれている古文書も存在します。 そんな罠記事の情報に囚われてしまって、いつまで経っても現代的なJavaScriptが書けない皆さんのために、このシリーズの記事では、各セクション毎に分けて、旧石器時代の記述と、現代の記述を紹介する形で、文明開化をしていきたいという思いで記述する。 最初は、現在比較的メジャーなブラウザで一通り動作する「ECMAScript 5」までの内容に関してポエムを書き連ねていき、最終的には一連の内容を読むだけで「ES6(ES2015)」による新機能や、絶賛提案中の「ES7」の一部提案内容についても把握し、おおよそ現代人を育成することを目標とする。 …なんてめっ
総まとめ: Bootstrapの無料で高品質なテーマファイルがダウンロードできるサイト
ランディングページ、プロダクトページ、スモールビジネスなどの商用、ポートフォリオ、ギャラリー、ブログなどの個人で利用できるBootstrapをベースにしたサイトが作成できる無料のテーマ・テンプレートがダウンロードできるサイトを紹介します。 コンテンツのコンポーネント、ナビゲーション、サイドバーやフッタのウィジェットもあり、カスタマイズする際の参考にもなると思います。
歯科予約システムの治療履歴画面（基本） | ツクロア - DESIGN LAB
デザインに関する何かを書いていくDESIGN LAB、わたしのターンでは「なぜこういうデザインになったのか」というデザインフローを毎月お伝えしていこうと思います。 具体的な例については、架空の仕様のアプリが多くなると思います。 デザインには正解がない、でも最適なものはある デザインにはいろいろなアプローチ、表現があるので、「デザインには正解がない」とよくいわれます。 でも、その案件に応じた最適なデザインというのはそれぞれにあると考えています。 この「最適な」の根底にあるのは、クライアントの要望。…と思われがちですが、それだけではありません。クライアントの要望プラス、ユーザーの動向や気持ちも見逃してはいけません。 クライアントの要望だけを見ていると、ユーザーの気持ちを忘れがちになる わたしがデザインをするときに必ず考えるのは、「ユーザーの気持ち」。 クライアントと話をしていると、ついついクラ
歯科予約システムの治療履歴画面（応用） | ツクロア - DESIGN LAB
「なぜこういうデザインになったのか」というデザインフローシリーズ。 前回の基礎では、必要な要素を整理してからの情報のグルーピング、さらには人が使うための気づかいを少しだけ書きました。 今回は応用として、引き続き同じネタで、 歯の番号わからんよね 日付に隠された秘密 を書いていきます。 前回の基礎を読んでいない方はまずこちらからお読みください。 歯科予約システムの治療履歴画面（基本） ｜ DESIGN LAB by tuqulore 【7】歯の番号わからんよね 前回、治療内容についてはこのように「左上7」「右下3」などと、歯医者さんの専門用語で書かれていて、これわからないよね、ということを書いていました。 もしこれを使う人が歯科医の業界にいる人であれば、「左上7」といわれてピンとこなければ、ちょっとヤバいレベルだと思います（わたしたちが「Photoshopってなんだっけ。。」と言うのと同じく
歯科予約システムの治療履歴画面（デザイン編1） | ツクロア - DESIGN LAB
「なぜこういうデザインになったのか」というデザインフローシリーズ。 前回までは、情報のグルーピングから、歯の番号の図をどう入れるか、と日付の秘密をお伝えしました。 歯科予約システムの3回目の今回は、「デザイン編1」としてどういうデザイン（レイアウト）に展開できるか、そしてその意味を解説していきます。 色については次回に。。 前回までの話を読んでいない方はまずこちらからお読みください。 歯科予約システムの治療履歴画面（基本） ｜ DESIGN LAB by tuqulore 歯科予約システムの治療履歴画面（応用） ｜ DESIGN LAB by tuqulore 前回の記事に関して受けた指摘 さて本題に入る前に、前回の応用編で歯の番号の図を入れたわけですが、SNSで次のような指摘が入りました。 「カルテって、ふつう左右逆に書くもんじゃないですか？」 たしかに！！ 整形外科のカルテなどを見ても
[CSS]レトロなデザインがいいね！CSSアニメーションで実装されたローディング用のスピナー
画像やJavaScriptは無し、それぞれdivタグ一つとCSSアニメーションで実装されたシンプルでかっこいいローディング用のスピナーを紹介します。
![[CSS]レトロなデザインがいいね！CSSアニメーションで実装されたローディング用のスピナー](https://cdn-ak-scissors.b.st-hatena.com/image/square/97e241cb850cccb7e305aced9830b1ed4c5cf3e3/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201502%2F2015081001.png)
[CSS]高さが分からない要素やテキストを中央寄せに配置するスタイルシートのまとめ
テキストやdiv要素など、高さが分からない要素を外側の容器の高さが不明でも、上下・左右・上下左右・ビューポートの上下左右の中央寄せに配置するCSSのテクニックを紹介します。 イラスト: Girls Design Materials 2016年1月12日にIEの古いバージョンのサポートが終了し、Windows 7/8はIE11、VistaはIE9がサポートブラウザになりました。Vistaはアレなので、実質IE11を考えてWeb制作をすればよいことになります。 参考: Internet Explorer サポートポリシー変更の重要なお知らせ そんなIE11時代、そして万が一のIE9を考慮した中央寄せに配置テクニックを紹介します。 テキストや要素を左右の中央寄せに配置 テキストや要素を上下の中央寄せに配置 テキストや要素を上下左右の中央寄せに配置 テキストや要素をビューポートの上下左右の中央寄せ
![[CSS]高さが分からない要素やテキストを中央寄せに配置するスタイルシートのまとめ](https://cdn-ak-scissors.b.st-hatena.com/image/square/e06dab83915ff3fa91a0d356ebe7f551b51c01f7/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201601%2F2016012101.png)
[JS]極シンプルなマークアップで、コンテンツを横にスライドさせナビゲーションを表示するスクリプト -Slideout.js
ダウンロードファイルのデモ Slideout.jsの使い方 Step 1: 外部ファイル 当スクリプトとスタイルシートを外部ファイルとして記述します。 <head> ... <link rel="stylesheet" href="index.css"> </head> <body> ... <script src="slideout.min.js"></script> </body> Step 2: HTML ナビゲーション（#menu）とコンテンツ（#panel）を実装します。 idは変更可能です。 <nav id="menu"> ナビゲーション </nav> <main id="panel"> コンテンツ </main> Step 3: JavaScript オプションを定義し、スクリプトを実行します。 <script> var slideout = new Slideout({ '
![[JS]極シンプルなマークアップで、コンテンツを横にスライドさせナビゲーションを表示するスクリプト -Slideout.js](https://cdn-ak-scissors.b.st-hatena.com/image/square/1b5913f9bdd8179129a0b710a9473540ea14fc5c/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201501%2F2015030902.gif)
[JS]実装も簡単、必須入力の有無やメールアドレスのチェックなどフォームのバリデーションをおこなう軽量スクリプト -Validetta
選択しているのが2つかどうか Validettaは、以下の項目がチェックできます。 データが空かどうか。 電子メールのチェック。 数字のチェック。 クレジットカード番号のチェック。 フィールド内の文字数のチェック。 チェックボックスやセレクトボックスの選択数のチェック。 2つのフィールドが同じかどうか。 正規表現を使ったフィールドのチェック。 Validettaの使い方 Step 1: 外部ファイル jquery.jsと当スクリプト・スタイルシートを外部ファイルとして記述します。 <link href="validetta/validetta.css" rel="stylesheet" type="text/css" media="screen" > <script type="text/javascript" src="http://code.jquery.com/jquery-late
数行加えるだけでパララックススクロールを実装できるチュートリアル | コリス
実装は簡単です。 既存のページにもこれなら簡単に組み込めると思います。 HTML パララックススクロール用の背景を配置するために先頭に空のdiv要素を加え、あとのコンテンツは普通に実装します。 <div class="background"></div> <div class="wrapper"> <h1 class="pageTitle">見出しLv1</h1> <h2 class="pageSubTitle">見出しLv2</h2> <p>パラグラフ</p> <p>パラグラフ</p> <p>パラグラフ</p> </div> <div class="slogan"> <h2 class="sloganTitle"> Parallax scrolling </h2> </div> <div class="wrapper"> <h1 class="pageTitle">見出しLv1</h1>
EC-CUBE 3 のシステム要件を満たしているかチェックするスクリプトを書いた
EC-CUBE 3.02 あたりで取り込まれましたので現在は不要なものになります ref #528 モジュールに関する警告を表示 by nobuhiko · Pull Request #535 · EC-CUBE/ec-cube EC-CUBE 開発コミュニティを見ていても、そのエラーが要件を満たしていて出るものなのか、そうでないのかがさっぱりわからないのでプログラムで解決してみた nobuhiko/eccube3-install-check 使い方 ダウンロード 上のリンクからダウンロードをしたら、EC-CUBE3を設置予定のサーバーに置いて（もしくはEC-CUBE3のhtml以下に置いて）、install_check.phpにアクセスしてください [推奨PHPライブラリ]APC 拡張モジュールが有効になっていません。 ↑こんな感じのエラーが出るので、出たらそこに問題があるんだな、と思っ
コードがはっきりと見やすく使いやすい！Sublime TextとAtomとVim対応のテーマ -DuoTone Themes
DuoTone Themes DuoTone Dark -GitHub コードがはっきりと見やすいカラー DuoTone Themesの5つのテーマ DuoTone Themesのダウンロードとインストール コードがはっきりと見やすいカラー DuoToneは2つの色相をベースに色調を変化させた7つのカラーで構成されています。 コードで重要な部分には強調したカラー、それほど重要ではない部分には和らいだカラーが適用され、はっきりとした見やすいテーマになっています。 DuoToneは5種類あり、Darkのベースカラーはパープルとゴールドです。 ↓縮小してますが、見やすくないですか？ Colorscheme DuoTones - Dark 対応言語は下記の通り。これからも増えていくそうです。 C Clojure CoffeeScript C# CSS GF Markdown Go Haskell
2016年に取り入れていきたい、CSSのテクニック・ライブラリのまとめ
2016年は、1月12日に古いバージョンのIEのサポートが終了します。 IE8, 9, 10などの古いブラウザへの対応に時間を割く必要がなくなり、今まで躊躇していたCSSやJavaScriptが多くの人に利用されるようになると思います。 これからどんどん取り入れていきたいCSSのテクニック・ライブラリを紹介します。 イラスト: Girls Design Materials 2016年1月12日からIEの対応は実質IE11に レイアウト関連のCSS アニメーション関連のCSS ユーティリティ関連のCSS 2016年1月12日からIEの対応は実質IE11に 2016年1月12日(米国時間)に、IEの古いバージョンのサポートが終了します。 各Windows OSごとの対応バージョンは、下記の通り。 Internet Explorer サポートポリシー変更の重要なお知らせ Vistaユーザーはほぼ
Inspiration for Line Menu Styles | Codrops
Some ideas for menu styles and effects that employ the line as a creative design element. This is an open collection; contributions are welcome! The line is an amazing design element. It’s so versatile and it allows us to use it for adding enjoyable animations or enhance points of interest. Today we’d like to share a set of ideas for using the line as a design element in horizontal menus. There ar
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
[JS]縦長ページに面白い仕掛けや便利な機能を実装できるスクリプトのまとめ
縦長のランディングページなどで見かける気持ちいいインタラクションやエフェクト、面白い仕掛けのコンテンツや便利な機能を実装できるスクリプトやjQueryのプラグインを紹介します。 プロダクトやサービスを魅せるスクリプト、さりげないけど気持ちいいアニメーション、縦長ページならではのナビゲーション、レイアウト補助など、全コンテンツを1ページにおさめ、スクロールを前提にしたページならではの面白くて役立つスクリプトが満載です。
![[JS]縦長ページに面白い仕掛けや便利な機能を実装できるスクリプトのまとめ](https://cdn-ak-scissors.b.st-hatena.com/image/square/12d806b696946054b69c1dc3670ffa2dc1985773/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201503%2F2015112505.png)
スクリプト無し、動画をページの背景いっぱいに表示する方法
jQueryなどスクリプトは一切使わずに、HTML5+CSSで動画をウェブページの背景いっぱいに表示する方法を紹介します。 フルサイズのデモ IE8などHTML5のvideo要素に対応していないブラウザでは、代替の背景画像が表示されます。 実装は、非常にシンプルです。 HTML 動画はbody内の一番下にvideo要素で配置し、その上には通常通りコンテンツを配置できます。 <body> ... コンテンツ ... <!-- 背景に設置する動画 --> <video autoplay loop poster="http://mattgrossdesign.com/raw-media/first-frame-screencap" id="video-background" muted> <source src="http://mattgrossdesign.com/raw-media/wood
CSSを書く時、絶対に参考にしておきたいCSSガイドラインのまとめ
CSSはどちらかと言えばやさしく、雑にコードを書いてもなんとかなってしまう言語です。 しかし、雑にコードを書いてしまうと、昨日書いたこのコードなんだっけ？ とか、新しくスタイルを増やすと別のスタイルがおかしくなってしまうことはありませんか？ 大規模なプロジェクト、長期に渡るプロジェクト、複数のメンバーが関わるプロジェクト、そして明日の自分も一年後の自分も使える、メンテナンス性に優れた一覧性のある美しいCSSを書くのに役立つガイドラインを紹介します。 CSS Guidelines 2 CSS WizardryのHigh-level guidelinesの最新版（2014年8月リリース）。 大規模で長期に渡るプロジェクト向けのメンテナンス性に重点をおいたスタイルシートのガイドラインです。スキルの異なる制作者、新規で加わる制作者などでも、統一されたコードでの制作が可能になるのを目的としています。
[CSS]レスポンシブ対応ページに役立つ機能がまとめられたFlexboxを使ったスタイルシート(Sass対応) -Ocssipital
レスポンシブ対応の柔軟なグリッドをシンプルに、そして簡単に実装することを目的に制作されたひな形として利用できるスタイルシートを紹介します。 レイアウトのベースに最適で、グリッドの設計、デバイスごとに異なるレイアウトや表示・非表示など、レスポンシブ対応ページに役立つ機能が揃っています。 Ocssipital Ocssipital -GitHub 補足: Flexboxの各プロパティの使い方は、以前の記事が分かりやすいと思います。 CSS3 Flexbox の各プロパティの使い方をヴィジュアルで詳しく解説 Ocssipitalの特徴と使い方 基本のグリッド ビューポートごとにカラムのサイズを変更 カラム間の溝のサイズ、左右どちらにつけるかも可能 デスクトップでは表示、スマホでは非表示の設定も簡単 Ocssipitalの特徴と使い方 MITライセンスで、商用利用、修正、配布、サブライセンスも許可
![[CSS]レスポンシブ対応ページに役立つ機能がまとめられたFlexboxを使ったスタイルシート(Sass対応) -Ocssipital](https://cdn-ak-scissors.b.st-hatena.com/image/square/85c7ac74adf21dfa1eefc8107e751ebe22fc1082/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201503%2F2015112604.png)
CSS3で画像キャプションのマウスホバーアニメーション5種
CSS3で画像キャプションのマウスホバーアニメーション5種 CSS3オンリーで画像をマウスオーバーするとキャプションがアニメーションして表示するというサンプル集です。 ディレイやイージングを使用してちょっとだけ凝った感じに見える風にしてみました。 投稿日2015年12月25日 更新日2015年12月25日 基本的なHTML 基本的なHTMLは下記になります。figureでマークアップしてみました。 HTML <section class="sample1"> <figure> <img src="thum01.jpg" width="400" height="266"> <figcaption class="title">Hover Effect 01</figcaption> </figure> </section> figureのCSSは「overflow: hidden」ではみ出ない
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
