css-grid-starter-layouts
This is a collection of starter templates for layouts and patterns using CSS Grid. The idea here is to show off what the technique is capable of doing and provide a starting point that can be re-purposed for other projects. Remember that browser support for Grid is good but requires fallbacks for legacy browsers. That means a straight up copy and paste of these may not be well suited for some use
Sublime Text + Markdownを記法を使うとはてなブログを書くのがものっそい便利だった - Swing-by
■このエントリについて Advent Calendarなるものに初めて参加してみました。 ★Advent Calendarについて Advent Calendarは本来、12月1日から24日までクリスマスを待つまでに1日に1つ、穴が空けられるようになっているカレンダーです。WebでのAdvent Calendarは、その風習に習い、12月1日から25日まで1日に1つ、みんなで記事を投稿していくというイベントです。 いろいろなカレンダーがあるのですが、今回投稿するのはSublime Textというエディタに関するやつです。 http://www.adventar.org/calendars/407 ★Sublime Textについて 普段仕事ではWindowsがメインだった僕が、これからMacをメインに使い始めるにあたって、何か良いエディタはないものかと探していたところSublime Tex
Thematic WordPress Theme Toolbox: 10 extremely useful hooks
HTML5 Starter TemplateWhen starting a new project, you need a starter template. Here is a concise and clean template to serve as a basis for your HTML5 projects. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Untitled</title> <meta name="description" content="This is an example of a meta description."> <link rel="stylesheet" type="text/css" href="theme.css"> <!--[if lt IE 9]> <script
一度書いたコードは二度と探さない！スニペットを究めて快適コーディング！【HTML, CSS, JavaScript】 | WebNAUT by Beeworks
一度書いたコードは二度と探さない！スニペットを究めて快適コーディング！【HTML, CSS, JavaScript】 ※この記事は2013年8月26日に執筆された記事です。現在は仕様が異なる可能性があります。 気がつけば繰り返し同じ単語で検索し、同じコードを書いている…なんてことはありませんか？「この部分の記述、もう一回使うことがあるかも」と思ったらぜひスニペットとして登録しておきましょう！ スニペットとは繰り返し登場するコードの断片、またはそれをすぐに呼び出せるように管理するエディタの機能のことです。自分がよく使用する記述をスニペットにしておけばいちいち検索したり、昔書いたソースを探ってみたりすることなく、使いたい時に正確な記述をサッと呼び出して使うことができます。 Dreamweaver、Sublime Textなどのオーサリングツールやテキストエディタにはスニペットを自在に使うための
Google Chrome/Firefoxで使える開発スニペット集·DevTools Snippets MOONGIFT
DevTools SnippetsはGoogle Chrome/Firefox用のソフトウェアです。 このソフトウェア（？）を試すまで知らなかったのですが、Google Chromeのデベロッパーツールにはスニペット管理機能が備わっています。よく使うJavaScriptを登録しておけば開発がよりスムーズになります。そこで今回は便利なスニペットを多数登録しているDevTools Snippetsを紹介します。 例えばこれはjQueryが読み込まれていないサイトでjQueryを読み込むスニペット。 スニペット編集中。DevTools Snippetsにあるものを貼付けるだけです。 後は登録してあるものの中から右クリックしてRunを押すだけです。 これまた知らなかったのですが、consoleでテーブル表示。こちらはクエリストリングを分割してテーブル表示してくれます。 DevTools Snipp
より素早くCSSコーディングするための、Sass（SCSS）のmixinスニペット集
より素早くCSSコーディングするための、Sass（SCSS）のmixinスニペット集以前「効率良くCSSコーディングできるSassを使ってみよう！Mac+Codaなら設定も簡単！」という記事で紹介したSass／SCSS。皆さん使ってますか？今回はそのSassの @mixin という機能に注目してみようと思います。中には後述する「Compass」というフレームワークを使えば同様のコードが記述できるものもありますが、お勉強も兼ねてあえて使わず自分で書いてみました。カスタマイズしやすそうなものを中心に紹介するので、自分の使いやすいオリジナル mixin を作ってみてくださいね！ 目次Sass の基礎知識@mixin の基本的な使い方リンクカラーを一括設定ベンダープレフィックス透明度絶対位置の指定rem を使ったフォントサイズ指定レティナディスプレイ対応画像Compass について軽く。Sass
Bootsnipp
Bootsnipp Design elements, playground and code snippets for Bootstrap HTML/CSS/JS framework What is this? Bootsnipp is an element gallery for web designers and web developers, anybody using Bootstrap will find this website essential in their craft. Stay updated, Subscribe to Bootsnipp mailing list (only important updates will be sent, your email is never shared or sold to anyone else)
Dreamweaver歴8年半の僕が3日前にSublime Text 2にしてやったこと | clear sky source
これまでかたくなに Dreamweaver を利用していたのですが、CS6 にアップデートしたあたりから動作が重くなり、直近ではもーやってられんとなりましたので重い腰をあげて Sublime Text 2 デビューをはたしました。 これでやっと僕にも春が来るのかなとワクワクしております。 参考にした記事 以下あたりを読みました。 基本 Sublime Text 2ってエディタがすごくイイ。Dreamweaverから乗り換えた時の初期設定とか使い方とかをメモ | Mnemoniqs Web Designer Blog Sublime Text2の複数カーソルの使い方 #SublimeText2 – Qiita [キータ] SublimeText2を3ヶ月使ってみて利用を決めたPackageまとめ | 濃紺ピッチャー Emmet系 Sublime Text 2のEmmetでdivの閉じタグにコ
Sublime Text2 Emmet でのスニペット(snippets.json)利用のススメ | HTML5 CSS3 JavaScript – WEBYA.IN
Emmet でのコーディング時、毎回同じ様なコードを書くようならばスニペットを使うといいかもしれません。スニペットは 断片 とか 切れ端 という意味で、コード（切れ端）を登録し簡単に呼び出せる機能です。たしか Dreamweaver とかにそんな機能がありましたね snippets.jsonの場所 Emmet ではHTMLやらCSSの切れ端を snippets.json で定義しており、OSX ならば以下の場所に定義されております ~/Library/Application Support/Sublime Text 2/Packages/Emmet/emmet/snippets.json json形式なのでデータとしては簡単な構造だよね。”スニペット名”:”変換するコード” でコードセットを定義するだけ。登録後は スニペット名 cntrol +e で展開されるようになるんだ ちなみに、追加
box-shadowを使って実用的で素敵なUIエレメントを実装するCSSのスニペットのまとめ
CSS3初心者でも簡単に利用でき、上級者でも実装のヒントになる、ページでよく使うパネルやボックス、ボタン、バーなどをbox-shadowを使って実装するスタイルシートのスニペットを紹介します。 10 Creative Techniques Using CSS3 Box Shadow 10個のスニペットは、Apple, Pinterest, Facebookなどで使用されているエレメントのHTML/CSSを簡略化したものです。 1. スクロールしてもバーを常に最上部に表示 2. サブナビゲーションのドロップダウン 3. シャドウを使った光沢が美しいボタン 4. 吹き出しスタイルの通知パネル 5. Appleのページラッパー 6. Appleのコンテンツボックス 7. Appleのフィーチャーリンク 8. 画像にさりげなくシャドウを添える 9. フォームの入力を目立たせる 10. エラステック
10 Creative Techniques Using CSS3 Box Shadow
We have seen a tremendous number of advancements in CSS3 web development over just the past few years. Popular websites all around the Internet have begun incorporating many unique styles such as rounded corners and mobile-responsive media queries. But even more importantly this has opened the door for creative interfaces to be prototyped in a matter of minutes. In this article I want to share 10
[web制作]スニペット・フレームワークへの接し方
便利なスニペットやフレームワーク 私は修行中のwebデザイナー/コーダー/ディレクターです。制作で主にXHTML/HTML5、CSSを使います。特にCSSなんかだと定番の表現をするのにスニペット(コードスニペット)を使います。Evernoteとかにストックがありますね。そして殆ど使ったことはないですが、HTML5 BoilerplateやTwitter Bootstrapといったフレームワークにも興味があります。 スニペットとフレームワークを使う際に考えたいこと 初心者を抜け出す為にスニペットを理解する ですが、コピペで人のコードを流用しているとなかなかそのコードがどういう意味かを覚えられません。理解していない人の書くソースにはスニペットに含まれた、そのソース内では必要のない記述なんかがそのまま残っていることが多いです。実際困ることってそんなにないんですけど、中級者にとってはすごく気になる
![[web制作]スニペット・フレームワークへの接し方](https://cdn-ak-scissors.b.st-hatena.com/image/square/d70439e885e06586d00d80e5acc55a856e4d686c/height=288;version=1;width=512/http%3A%2F%2Fwebcre8.jp%2Fwordpress%2Fwp-content%2Fuploads%2F2013%2F01%2Ftouch-snippet-framework-01-150x150.png)
WP-Mix | A fresh mix of code snippets and tutorials
Block Multiple IP Addresses from Text File with PHP Here is a fun little tutorial. It shows how to block multiple IP addresses that are listed in a plain text file. It’s a nice little system to block bad IP addresses without using any database. For example, this is useful if you’ve got a bunch of IP addresses that you want to block quickly. […] CSS Selectors and Default Styles for the WordPress Ad
CSS Reset - 2019's most common CSS Resets to copy/paste, with documentation / tutorials
The rise of cloud computing has transformed the way organisations manage and deploy their digital infrastructure. With the promise of scalability, speed, and reduced hardware dependence, it’s easy to assume that traditional server configuration is a thing of the past. […] Read Article Integrate external expertise into your security approach by inviting independent researchers to test your digital
WordPress制作時に良く使うコードスニペット：functions系 - NPO法人のためのIT支援事務所 ht
コードスニペットの最後のネタです。 fuctions.phpで良く使うコードです。 カスタムメニューの追加 [php] register_nav_menus( array( ‘header’ => ‘ヘッダーナビ’, ‘global’ => ‘グローバルナビ’, ‘footer’ => ‘フッターナビ’, ) ); [/php] ウィジェットの追加 [php] register_sidebar( array( ‘name’ => ‘サイドバーウィジェットエリア（上）’, ‘id’ => ‘primary-widget-area’, ‘description’ => ‘サイドバーのウィジェットエリア’, ‘before_widget’ => ‘<aside id="%1$s" class="widget-container %2$s">’, ‘after_widget’ => ‘</asid
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://www.wpfunction.me/
http://www.cssflow.com/
Build Bootstrap in Minutes Using Emmet | Envato Tuts+
css2sass
Understanding and Using WordPress Shortcodes