UI Interactions
copy.ui-arrow-02 { position: relative; width: 30px; height: 30px; border: none; background-color: transparent; transition: transform 0.3s ease; } .ui-arrow-02:before, .ui-arrow-02:after { content: ''; background-color: #2980b9; position: absolute; top: 50%; width: 1px; height: calc(70% - 1px); margin-top: -35%; } .ui-arrow-02:before { left: 50%; margin-left: -25%; transform: rotate(-45deg); } .ui-
[CSS]コンテンツの区切り線、デザインのアクセントに使えるラインやボーダーを実装するテクニックのまとめ
コンテンツの区切りに使用する線、デザインのアクセントに使えるラインやボーダーをCSSで素敵にデザインするスタイルシートのテクニックを紹介します。 borderプロパティを使ったシンプルなものから、グラデーションや疑似要素やアニメーションを使ったアイデアが素晴らしいものまで、コピペで簡単に利用できます。
![[CSS]コンテンツの区切り線、デザインのアクセントに使えるラインやボーダーを実装するテクニックのまとめ](https://cdn-ak-scissors.b.st-hatena.com/image/square/d81709305545d43bf246e62ef8caf6aa8f3b70da/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201604%2F2016120101.png)
ウェブサイトをもっと面白く！コピペ可能なHTML/CSSスニペット75個まとめ 2018年7月度
ウェブ制作で差がつくテクニックをつかった、コピー&ペーストで利用できる HTML/CSS スニペットをまとめてご紹介します。2018年を代表するグラフィックデザインのトレンドでもある、グラデーションやグリッチエフェクト、ちょっとした動きが魅力的なマイクロインタラクション、CSS Gridプロパティの実践的な使い方など、今後のウェブサイト制作で参考にしたい作品を中心に揃えています。 「Run Pen」をクリックすることで読み込みが開始されます。右下に表示された「Return」で再読み込みし、左上のHTML/CSS/JSタブを切り替えることで、それぞれのスタイリングを確認できます。実際にカスタマイズしたいときは、右上の「Edit on Codepen」をクリックしましょう。これらのスニペットを利用することで、他とは一味違うユニークなウェブサイトを制作してみましょう。 Webサイトを使いやすく！
CSSだけで作るシンプルなニュースティッカー
Result メディアサイト等でまだ見かけるやつ。 :hoverで一時停止するようにしています。 css@keyframes ticker {/*アニメーション設定。右から左に流す、を繰り返す*/ 0% { transform: translate(0, 0); visibility: visible; } 100% { transform: translate(-100%, 0); } } .ticker-wrap {/*ティッカーを包括している親要素*/ position: fixed; bottom: 0; width: 100%; overflow: hidden; height: 2rem; background-color: rgba(0, 0, 0, 0.9); padding-left: 100%; box-sizing: content-box; } .ticker-wr
EC-CUBE 開発コミュニティ - フォーラム
src/Eccube/Form/Type/Admin/OrderType.phpの以下の箇所になります。 ---------------- ->add('OrderStatus', 'entity', array( 'class' => 'Eccube\Entity\Master\OrderStatus', 'property' => 'name', 'empty_value' => '選択してください', 'empty_data' => null, 'query_builder' => function($er) { return $er->createQueryBuilder('o') ->orderBy('o.rank', 'ASC'); }, 'constraints' => array( new Assert\NotBlank(), ), )) ----------------
EC-CUBE3の商品一覧画面にカートボタンを追加させる方法 - AmidaikeBlog
EC-CUBE Advent Calendar 2017 4日目の記事です。 4日目はEC-CUBE3の商品一覧画面にカートボタンを追加する内容を書きます。 EC-CUBE2系では商品一覧からカートに追加するボタンが存在していたのですが3系からは無くなっています。 3系からこの機能が無くなったのかというと実はソースを眺めてみると実装されており、少しカスタマイズをするだけで実現可能です。 というわけで3系の商品一覧画面でもカートボタンを表示するカスタマイズを紹介します。 使用するEC-CUBE3ですが、本日時点のソースをcloneしたものを使います。 https://github.com/EC-CUBE/ec-cube デフォルトだと商品一覧画面は以下のようになります。(商品を一つ追加しています。) この一覧画面に規格選択およびカートボタンを表示させます。今回デザインは全く気にしていません。
Performance Tips
Out of the box Json.NET is faster than DataContractJsonSerializer and JavaScriptSerializer. Here are some tips to make it go even faster. Reuse Contract ResolverOptimize Memory UsageJsonConvertersManually SerializeBenchmarks The IContractResolver resolves .NET types to contracts that are used during serialization inside JsonSerializer. Creating a contract involves inspecting a type with slow refle
Gitの忘れがちだけど絶対に使うであろうコマンド達 | Basicinc Enjoy Hacking!
ベーシックでは、Gitを使ったバージョン管理システムを導入しています。一部のプロジェクトでは先行して導入していたものの、全社的にはまだまだ…といったわけで、よくGitコマンドについて質問されるので、ここで軽くまとめておきたいと思います。 普段は git add / commit / push / pull しかしてない…っていう人向けです。 addしたファイルを取り消す $git reset HEAD ファイル名 更新内容自体は取り消さず、addしてインデックスに登録するのを取り消します。 更新したファイルの更新内容を取り消す $git checkout ファイル名 commitする前限定です。 他ブランチの特定のコミットだけマージしたい $git cherry-pick コミットID とても便利なコマンドですが、cherry-pickを多用するような運用スタイルになっていたら問題なので、
意外と知られていないJavaScriptのnew Date()の使用方法
new Date()の使い方 指定した時刻を表す日付オブジェクトを生成する。何も指定されなかった場合は現在の（デバイスに）設定されている時刻を取得する。 日時を指定するときはYYYY/MM/DD HH:mm:ssまたはそれぞれをカンマで区切った形式で取得。 var d1 = new Date('2014/04/01 12:34:56'); console.log(d1); // => Tue Apr 01 2014 12:34:56 GMT+0900 var d2 = new Date(2014, 3, 1, 12, 34, 56); console.log(d2); // => Tue Apr 01 2014 12:34:56 GMT+0900 new Date()に年を入れる new Date("2013")でその年の1月1日GMT+9時間の日付を取得する var d2 = new D
Chromeで日本語入力を禁止する - Qiita
Chromeで日本語入力を禁止したい ・IEやFFと同じようにChromeで日本語の入力を禁止したい ・ChromeはCSSのime-mode:disabledに対応していない ・「とにかくヤレ」と神の声を賜ったので、JavaScriptで頑張ってみる 2015/9/17編集 masa-kunikataさんアドバイスの正規表現方式に変更。 textareaで改行・タブもとおるようにしました。 jQuery(document).ready(function() { // ime-modeが使えるか var supportIMEMode = ('ime-mode' in document.body.style); // 非ASCII var noSbcRegex = /[^\x00-\x7E]+/g; // 1バイト文字専用フィールド jQuery('.sbc_field') .on('key
WordPressのユーザー一覧ページ用のテンプレート | パソコン倶楽部りんご
「WordPressのユーザー一覧ページを作る」の記事の続きです。 「メンバーが多いのでページ送りをしたい」という旨のご質問コメントをいただいたので、実装してみました。お使いのWPのバージョンやテーマが違う場合は、適宜、読み替えて参考にしてください。 前提 WP3.6のTwenty Twelveおよび、そのクローン テンプレート「page-authors.php」を作成し、themeディレクトリ内の「page-templates」ディレクトリにアップロード ユーザー一覧用に固定ページを1つ作成。テンプレートには「page-authors.php」を指定 実装後の表示は「メンバー紹介」になります。 ちなみに、「パソコン倶楽部」のユーザー管理画面には、各自の学習履歴やSNS情報が入力できるように、functions.phpに改造を施してあるので、それらの情報も表示する仕組みも実装しています。
git today — Quickly see what you've done today (Example)
First, create this alias: git config --global alias.today "log --since=midnight --author='Roberto Bonvallet' --oneline" Of course, you have to replace my name with yours. Then, before leaving office for a well-deserved rest, you can reflect on what you've accomplished during your working day by issuing this simple command: git today
MySQLで高速にランキングを求める - 備忘録
例えば下記のようなテーブルがあったとして、ハイスコアの上位ランキングや指定idのランキングを取得したい場合がある。 CREATE TABLE `test` ( `id` int(11) NOT NULL AUTO_INCREMENT, `highscore` int(11), PRIMARY KEY (`id`), KEY `highscore` (`highscore`) ); いつもはバッチ処理してランキング用のテーブルを用意していたが、ふとMySQLだけで高速にランキングを求められないものかと思ったので色々探してみた。 まずは、こちらの記事の早い版と書かれている方法が高速で良い感じだった。 MySQL - SQL 合計値からランキングを取得する例 - Qiita しかし同点（同順位）は考慮されていなかったので、今度はこちらを参考にしたクエリを使ってみた。 mysqlだけでランキングし
GoogleMapで独自のピンを打つスクリプトを書いた
GoogleMapにピンを打つスクリプトを書いてみました。地図上にピンを打つウェブシステムなどを作る時の参考になるかと思います。 動作サンプルです ピンに画像を指定することも可能です。画像を設定することで、ピンが画像に置き換わります。 以下、スクリプトサンプルです。 <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> <div id="map" style="width: 600px; height: 600px;"></div> <script type="text/javascript"> // 地図の初期化 var map = new google.maps.Map(document.getElementById("map"), { zoom: 2
【PHP】誰にでも簡単に使える【CSVをダウンロードさせるサンプル】を書いた
今でもCSV形式でダウンロードさせるシステムは多いと思います。よく使うのでサンプルを書きました。 こちらにCSVを読み込むサンプルも書きました。併せて参考にしてみてください。 ■このサンプルの特徴 ▼エクセルで開いても文字化けしない エクセルで開いた時にも文字化けしないような考慮をしています。 ▼データ内に改行を含むCSVもエクセルで開ける fputcsv関数を使って実装しています。CSVのデータ内に改行を含んでいても、エクセルで開けるようになっています。 ▼メモリを気にせず利用できる テンポラリファイルを作成、CSV出力後にそこからダウンロードさせる方式を採っています。/tmp/直下に一時ファイルを作成するので、ある一定程度時間が経過すれば自動で消えます。テンポラリファイルにCSV形式で一旦出力するので、メモリ不足になることも少ないと思います。 ■サンプルコード 関数名など適宜いろいろ変
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Pure CSS Ticker (Horizontal)
Deserialize an Object
WP Hasty » Speed up your WordPress development
Top Pens of 2016 on CodePen
NameBright - Coming Soon