トップ  > メモ一覧  > カテゴリ「ライブラリ・ツール」の絞り込み結果 : 8件

8件中 1 〜 8 表示  1 

No.4402 zen-coding 基本

== 変換
insertモードで「ctr+y,」

== 基本
=== 変換例
html:5
----
<!DOCTYPE HTML>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <div></div>
</body>
</html>
----

input:text
----
<input id="" name="" type="text" />
----

== 階層と繰り返し要素
< : 親に
> : 子に
+ : 同列に
* : 繰り返し

=== 変換例
div>div>p<hr
----
<div>
    <div>
        <p></p>
    </div>
    <hr />
</div>
----

ul>li*3
----
<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>
----

div>div>p+hr
----
<div>
    <div>
        <p></p>
    </div>
</div>hr
----

== id, class, 連番
=== 変換例
ul#menu>li.item*3
----
<ul id="menu">
    <li class="item"></li>
    <li class="item"></li>
    <li class="item"></li>
</ul>
----

ul#menu>li#item$*3
----
<ul id="menu">
    <li id="item1"></li>
    <li id="item2"></li>
    <li id="item3"></li>
</ul>
----

ul#menu>li#item$$$*3
----
<ul id="menu">
    <li id="item001"></li>
    <li id="item002"></li>
    <li id="item003"></li>
</ul>
----

== セレクタ
=== 変換例
select[name=city]>option[value=$]*3
----
<select name="city">
    <option value="1"></option>
    <option value="2"></option>
    <option value="3"></option>
</select>
----

a[href=http://google.com]
----
<a href="ihttp://google.com"></a>
----

== 要素内のテキスト
=== 変換例
div{ほげ}*3
----
<div>ほげ</div>
<div>ほげ</div>
<div>ほげ</div>
----

a[href=http://google.com]{Google検索}
----
<a href="http://google.com">Google検索</a>
----

== 補完機能
=== 変換例
http://torilife.info
ctr+ya
----
<a href="http://torilife.info">野鳥とバードウォッチングの総合情報サイト とりらいふ</a>
----

== 便利機能
=== コメントアウト
ctr+y/
----
<!-- <a href="http://google.com">Google検索</a> -->
----

引用元

更新:2012/04/12 21:53 カテゴリ: HTML・CSS  > ライブラリ・ツール ▲トップ

No.4044【引用】これがあればWebアプリケーションのデザインがすいすいできる「Bootstrap」 - MOONGIFT|オープンソース・ソフトウェア紹介を軸としたITエンジニア、Webデザイナー向けブログ

これがあればWebアプリケーションのデザインがすいすいできる「Bootstrap」 - MOONGIFT|オープンソース・ソフトウェア紹介を軸としたITエンジニア、Webデザイナー向けブログ
http://www.moongift.jp/2011/09/20110901-2/

BootstrapはCSS製のオープンソース・ソフトウェア。ITエンジニアが苦手にするのがWebデザインだ。作るのは良いが、それを奇麗に配 置していくのがとても難しい。Webサービスが流行るか否かに技術が及ぼす影響は良くて半分だろう。残りの半分以上は見た目にかかっている。 0

まだコメントはあ...

引用元

更新:2012/01/04 12:05 カテゴリ: HTML・CSS  > ライブラリ・ツール ▲トップ

No.1738 CSSのプロパティをソートするPerlスクリプト

 

CSSのプロパティをソートするPerlスクリプトAdd Starbarlogotsunehibiki443

Posted at 2009-11-14T14:11:00+09:00 in Coding

CSSを書く時に「セレクタ内でCSS仕様書でのプロパティの出現順序に従ってソートする」という個人的なルールを守っている。何かコーディングにおいて便利な理由があるからというわけではなく、第三者に説明する時に「仕様書の出現順で書いてます!」とかで済ませられるから。今まではファイル全体を処理するオレオレPerlスクリプトで適当にやっていたのだけど、Vimで選択範囲だけをソートとかやりたくなったので、普通に標準入力を読んで結果を標準出力に吐くように書き直した。ついでにCSS3のプロパティとFirefox (Mozilla)やSafari (WebKit)、Opera (Presto)、Internet Explorer (Trident)の独自拡張などへも対応させたりとか。

#!/usr/bin/perl

# Author:   Kyo Nagashima <kyo@hail2u.net>, http://hail2u.net/
# License:  MIT license (http://opensource.org/licenses/mit-license.php)
# Modified: 2009-11-14T12:24:54+09:00

use strict;
use warnings;

# CSS 2.1
my @property_order = qw(
margin
margin-top
margin-right
margin-bottom
margin-left
padding
padding-top
padding-right
padding-bottom
padding-left
border
border-top
border-bottom
border-right
border-left
border-width
border-top-width
border-right-width
border-bottom-width
border-left-width
border-color
border-top-color
border-right-color
border-bottom-color
border-left-color
border-style
border-top-style
border-right-style
border-bottom-style
border-left-style
display
position
top
right
bottom
left
float
clear
z-index
direction
unicode-bidi
width
min-width
max-width
height
min-height
max-height
line-height
vertical-align
overflow
clip
visibility
content
quotes
counter-reset
counter-increment
list-style
list-style-type
list-style-image
list-style-position
page-break-before
page-break-after
page-break-inside
orphans
widows
color
background
background-color
background-image
background-repeat
background-attachment
background-position
font
font-family
font-style
font-variant
font-weight
font-size
text-indent
text-align
text-decoration
text-shadow
letter-spacing
word-spacing
text-transform
white-space
caption-side
table-layout
border-collapse
border-spacing
cursor
empty-cells
speak-header
outline
outline-width
outline-style
outline-color
volume
speak
pause-before
pause-after
pause
cue-before
cue-after
cue
play-during
azimuth
elevation
speech-rate
voice-family
pitch
pitch-range
stress
richness
speak-punctuation
speak-numeral
speak-header
);

# CSS 3 and vendor extension for CSS 3 
push @property_order, qw(
background-clip
-moz-background-clip
-webkit-background-clip
background-origin
-moz-background-origin
-webkit-background-origin
background-size
-moz-background-size
-webkit-background-size
-o-background-size
border-radius
-moz-border-radius
-webkit-border-radius
border-top-right-radius
-moz-border-radius-topright
-moz-border-top-right-radius
border-bottom-right-radius
-moz-border-radius-bottomright
-moz-border-bottom-right-radius
border-bottom-left-radius
-moz-border-radius-bottomleft
-webkit-border-bottom-left-radius
border-top-left-radius
-moz-border-radius-topleft
-moz-border-top-left-radius
border-image
-moz-border-image
-webkit-border-image
border-image-source
border-image-slice
border-image-width
border-image-outset
border-image-repeat
box-break
box-shadow
-moz-box-shadow
-webkit-box-shadow
appearance
-moz-appearance
-webkit-appearance
icon
box-sizing
-moz-box-sizing
-webkit-box-sizing
outline-offset
resize
nav-index
overflow-x
-ms-overflow-x
overflow-y
-ms-overflow-y
overflow-style
-webkit-marquee
marquee-style
-webkit-marquee-style
marquee-loop
marquee-direction
-webkit-marquee-direction
marquee-speed
-webkit-marquee-speed
rotation
rotation-point
opacity
font-stretch
font-size-adjust
src
unicode-range
string-set
border-length
hyphens
hyphenate-resource
hyphenate-before
hyphenate-after
hyphenate-lines
hyphenate-character
text-replace
image-resolution
float-offset
marks
bookmark-level
bookmark-label
bookmark-target
target
target-name
target-new
target-position
text-height
line-stacking
line-stacking-strategy
line-stacking-ruby
line-stacking-shift
dominate-baseline
alignment-baseline
alignment-adjust
baseline-shift
inline-box-align
drop-initial-value
drop-initial-size
drop-initial-after-align
drop-initial-after-adjust
drop-initial-before-align
drop-initial-before-adjust
columns
-webkit-columns
column-width
-moz-column-width
-webkit-column-width
column-count
-moz-column-count
-webkit-column-count
column-gap
-moz-column-gap
-webkit-column-gap
column-rule
-moz-column-rule
-webkit-column-rule
column-rule-color
-moz-column-rule-color
-webkit-column-rule-color
column-rule-style
-moz-column-rule-style
-webkit-column-rule-style
column-rule-width
-moz-column-rule-width
-webkit-column-rule-width
column-span
column-fill
size
page
image-orientation
fit
fit-position
presentation-level
ruby-position
ruby-align
ruby-overhang
ruby-span
grid-columns
grid-rows
voice-volume
voice-balance
rest
rest-before
rest-after
mark
mark-before
mark-after
voice-rate
voice-pitch
voice-pitch-range
voice-stress
voice-duration
phonemes
white-space-collapse
word-break
-ms-word-break
text-wrap
word-wrap
-ms-word-wrap
text-align-last
-ms-text-align-last
text-justify
-ms-text-justify
punctuation-trim
text-emphasis
text-shadow
text-outline
text-indent
hanging-punctuation
box-orient
-moz-box-orient
-webkit-box-orient
box-direction
-moz-box-direction
-webkit-box-direction
box-original-group
-moz-box-ordinal-group
-webkit-box-ordinal-group
box-align
-moz-box-align
-webkit-box-align
box-flex
-moz-box-flex
-webkit-box-flex
box-flex-group
-moz-box-flexgroup
-webkit-box-flex-group
box-pack
-moz-box-pack
-webkit-box-pack
box-lines
-webkit-box-lines
transform
-moz-transform
-webkit-transform
transform-origin
-moz-transform-origin
-webkit-transform-origin
transform-style
-webkit-transform-style
perspective
-webkit-perspective
perspective-origin
-webkit-perspective-origin
backface-visibility
-webkit-backface-visibility
transition
-webkit-transition
transition-property
-webkit-transition-property
transition-duration
-webkit-transition-duration
transition-timing-function
-webkit-transition-timing-function
transition-delay
-webkit-transition-delay
animation
-webkit-animation
animation-name
-webkit-animation-name
animation-duration
-webkit-animation-duration
animation-timing-function
-webkit-animation-timing-function
animation-iteration-count
-webkit-animation-iteration-count
animation-direction
-webkit-animation-direction
animation-play-state
-webkit-animation-play-state
animation-delay
-webkit-animation-delay
);

# vendor extension
push @property_order, qw(
-moz-background-inline-policy
-moz-binding
-moz-border-bottom-colors
-moz-border-left-colors
-moz-border-right-colors
-moz-border-top-colors
-moz-border-end
-moz-border-end-color
-moz-border-end-style
-moz-border-end-width
-moz-border-start
-moz-border-start-color
-moz-border-start-style
-moz-border-start-width
-moz-float-edge
-moz-force-broken-image-icon
-moz-image-region
-moz-margin-end
-moz-margin-start
-webkit-margin-start
-moz-outline-radius
-moz-outline-radius-bottomleft
-moz-outline-radius-bottomright
-moz-outline-radius-topleft
-moz-outline-radius-topright
-moz-padding-end
-moz-padding-start
-webkit-padding-start
-moz-stack-sizing
-moz-user-focus
-moz-user-input
-moz-user-modify
-webkit-user-modify
-moz-user-select
-webkit-user-select
-moz-window-shadow
-webkit-background-composite
-webkit-border-horizontal-spacing
-webkit-border-vertical-spacing
-webkit-box-reflect
-webkit-column-break-after
-webkit-column-break-before
-webkit-column-break-inside
-webkit-dashboard-region
-webkit-line-break
-webkit-margin-bottom-collapse
-webkit-margin-collapse
-webkit-margin-top-collapse
-webkit-marquee-increment
-webkit-marquee-repetition
-webkit-mask
-webkit-mask-attachment
-webkit-mask-box-image
-webkit-mask-clip
-webkit-mask-composite
-webkit-mask-image
-webkit-mask-origin
-webkit-mask-position
-webkit-mask-position-x
-webkit-mask-position-y
-webkit-mask-repeat
-webkit-mask-size
-webkit-nbsp-mode
-webkit-rtl-ordering
-webkit-tap-highlight-color
-webkit-text-fill-color
-webkit-text-security
-webkit-text-size-adjust
-webkit-text-stroke
-webkit-text-stroke-color
-webkit-text-stroke-width
-webkit-touch-callout
-webkit-transform-origin-x
-webkit-transform-origin-y
-webkit-transform-origin-z
-webkit-user-drag
-o-table-baseline
-ms-background-position-x
-ms-background-position-y
-ms-filter
-ms-ime-mode
-ms-layout-flow
-ms-layout-grid
-ms-layout-grid-char
-ms-layout-grid-line
-ms-layout-grid-mode
-ms-layout-grid-type
-ms-text-autospace
-ms-text-kashida-space
-ms-text-overflow
-ms-text-underline-position
-ms-writing-mode
-ms-interpolation-mode
-ms-scrollbar-3dlight-color
-ms-scrollbar-arrow-color
-ms-scrollbar-base-color
-ms-scrollbar-darkshadow-color
-ms-scrollbar-face-color
-ms-scrollbar-highlight-color
-ms-scrollbar-shadow-color
-ms-zoom
);

# other CSS extensions (without vendor prefix)
push @property_order, qw(
image-rendering
ime-mode
pointer-events
text-rendering
);

my $css = join "", <STDIN>;
$css =~ s/{(.*?)}/"{".sort_properties($1)."}"/imgse;

print $css;

sub sort_properties {
  my @formatted = sort {
    sub check_order {
      my $line = shift;
      my $order = 0;

      for (my $i = 0; $i <= $#property_order; $i++) {
        if ($line =~ /^\s*$property_order[$i]:/) {
          $order = $i;
          last;
        }
      }

      return $order;
    }

    &check_order($a) <=> &check_order($b)
  } split "\n", shift;

  return join("\n", @formatted) . "\n";
}

とりあえず安定のCSS2.1のプロパティは優先的に上になる。それに続いてCSS3の草案にあるプロパティがCSS Modulesの順に並ぶ。各独自拡張でCSS3にそれに対応するものがある場合(border-radius-moz-border-radius-webkit-border-radiusなど)はそこに並べるようにし、ない場合は下にする。各独自拡張同士で対応しているような場合(-moz-margin-start-webkit-margin-startなど)は、なるべく並ぶようにしてある。優先度が最も低いのはプリフィックスの無い独自拡張プロパティでime-mode等がこれに当る。

まとめると「CSS2.1 > CSS3 > 独自拡張 > プリフィックスの無い独自拡張」という順序で並ぶことになり、具体的には以下のように並ぶ。

div#header ul#navigation li a {
  /* CSS2.1 */
  margin-left: 6px;
  padding: 0 6px;
  display: block;
  width: auto;
  height: 24px;
  line-height: 24px;
  color: #c9c6c0;
  background-image: url("../images/bg-navigation.png");
  background-repeat: repeat-x;
  /* CSS3 */
  border-radius: 3px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  /* vendor extension */
  -moz-margin-start: 6px;
  /* vendor extension (without prefix) */
  ime-mode: auto;
}

スクリプトではそれぞれを分けて順にpushしているので新規追加や修正はそれほど大変でもない(と思う)。

CSSのプロパティについては以下を参考にした。

「プロパティの位置がおかしい!」とか「プロパティに抜けがある!」とか「プロパティがかぶっている!」とかは報告してくれるとありがたい


Vimでこのスクリプトを利用する場合は、パスの通ったところにsortcss.plという名前で保存し、セレクタ全体もしくはファイル全体を選択して、

!sortcss.pl

とすれば良い。セレクタ全体を選択(正確には中括弧の間を中括弧を含めて選択)するにはビジュアル・モードでのa}を使えば良いので、以下のようなキーバインドとコマンドを用意しておくと便利。

nmap gso va}:SortCSS<CR>
vmap gso a}:SortCSS<CR>

" Sort CSS properties
" :SortCSS
command! -range=% SortCSS :<line1>,<line2>!perl -S sortcss.pl

これでgsoでソートできる他、:SortCSSでもソートできる(-range=%なので選択していない場合はファイル全体を処理する)。CSSファイル以外ではアクティブにする必要が無いので、$MYVIMRCではなく$HOME/.vim/ftplugin/css.vim (Windowsなら$HOME\vimfiles\ftplugin\css.vim)とかに書いた方が良いかも


プロパティの羅列部分だけを切り出せばCSS用の辞書に早変わり!

引用元

更新:2009/11/15 10:08 カテゴリ: HTML・CSS  > ライブラリ・ツール ▲トップ

No.858 シンタックスハイライター <head>の記述

<script type="text/javascript" src="scripts/shCore.js"></script>
<script type="text/javascript" src="scripts/shBrushBash.js"></script>
<script type="text/javascript" src="scripts/shBrushCpp.js"></script>
<script type="text/javascript" src="scripts/shBrushCSharp.js"></script>
<script type="text/javascript" src="scripts/shBrushCss.js"></script>
<script type="text/javascript" src="scripts/shBrushDelphi.js"></script>
<script type="text/javascript" src="scripts/shBrushDiff.js"></script>
<script type="text/javascript" src="scripts/shBrushGroovy.js"></script>
<script type="text/javascript" src="scripts/shBrushJava.js"></script>
<script type="text/javascript" src="scripts/shBrushJScript.js"></script>
<script type="text/javascript" src="scripts/shBrushPhp.js"></script>
<script type="text/javascript" src="scripts/shBrushPlain.js"></script>
<script type="text/javascript" src="scripts/shBrushPython.js"></script>
<script type="text/javascript" src="scripts/shBrushRuby.js"></script>
<script type="text/javascript" src="scripts/shBrushScala.js"></script>
<script type="text/javascript" src="scripts/shBrushSql.js"></script>
<script type="text/javascript" src="scripts/shBrushVb.js"></script>
<script type="text/javascript" src="scripts/shBrushXml.js"></script>
<link href="styles/shCore.css" rel="stylesheet" type="text/css" />
<link href="styles/shThemeDefault.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
  SyntaxHighlighter.config.clipboardSwf = 'scripts/clipboard.swf';
  SyntaxHighlighter.all();
</script>
更新:2009/05/07 02:50 カテゴリ: HTML・CSS  > ライブラリ・ツール ▲トップ

No.854 syntax_highlighter

◆リンク集
詳しい:syntax_highlighter




更新:2009/05/06 23:25 カテゴリ: HTML・CSS  > ライブラリ・ツール ▲トップ

No.853 syntax_highlighterの記述

<pre class="brush: php">
コードを書く
</pre>
更新:2009/05/06 19:03 カテゴリ: HTML・CSS  > ライブラリ・ツール ▲トップ

No.793 syntaxhighlighter

使い方はとっても簡単です。
まずは SyntaxHighlighter ダウンロードページ からJSソースをしてきます。
ソースを解凍して、/var/www/lib/にでも置きましょう。

その後、HTMLに以下のように基礎設定をします。
01.<link type="text/css" rel="stylesheet" href="/lib/styles/shCore.css">
02.<link type="text/css" rel="stylesheet" href="/lib/styles/shThemeDefault.css">
03.<script type="text/javascript" src="/lib/scripts/shCore.js"></script>
04.<script type="text/javascript" src="/lib/scripts/shBrushPython.js"></script>
05.<script type="text/javascript" src="/lib/scripts/shBrushXml.js"></script>
06.<script type="text/javascript">
07.    SyntaxHighlighter.config.clipboardSwf = '/lib/scripts/clipboard.swf';
08.    SyntaxHighlighter.all();
09.</script>
あとは、ハイライトしたいソースを<pre class="brush: xxx"> hogehoge...</pre> で囲むだけです。 サポートしている言語は、デフォルトで以下のものがあります。それぞれ対応するスクリプトファイルを 明記しておきますのでHTMLからインクルードするようにしましょう。
なお、ファイル名の次に記述している文字列は、brush: xxxのxxxの部分でpreタグで<pre>タグで囲まれた 部分に記述されているソースの言語(もしくはそのエイリアス)を示しています。
 Javascriptファイル  エイリアス
shBrushBash.js bash, shell
shBrushCSharp.js c-sharp
shBrushCpp.js cpp, c
shBrushCss.js css
shBrushDelphi.js delphi, pas, pascal
shBrushDiff.js diff, patch
shBrushGroovy.js groovy
shBrushJScript.js js, jscript, javascript
shBrushJava.js java
shBrushPerl.js perl, pl
shBrushPhp.js php
shBrushPlain.js plain, text
shBrushPython.js py, python
shBrushRuby.js rails, ror, ruby
shBrushScala.js scala
shBrushSql.js sql
shBrushVb.js vb, vbnet
shBrushXml.js xml, xhtml, xslt, html, xhtml
「class=」の右辺にハイライトする言語指定のほかに、ツールバーの表示・非表示や 行番号の表示・非表示などを指定することも出来ます。どのようなオプションがあるかは SyntaxHighlighter/Configuration を参考にしてください。
更新:2009/04/17 03:05 カテゴリ: HTML・CSS  > ライブラリ・ツール ▲トップ
8件中 1 〜 8 表示  1 

FuelPHP

Mac

web開発

プロマネ

マネタイズ

プレゼン

webサービス運用

webサービス

Linux

サーバ管理

MySQL

ソース・開発

svn・git

PHP

HTML・CSS

JavaScript

ツール, ライブラリ

ビジネス

テンプレート

負荷・チューニング

Windows

メール

メール・手紙文例

CodeIgniter

オブジェクト指向

UI・フロントエンド

cloud

マークアップ・テキスト

Flash

デザイン

DBその他

Ruby

PostgreSQL

ユーティリティ・ソフト

Firefox

ハードウェア

Google

symfony

OpenPNE全般

OpenPNE2

Hack(賢コツ)

OpenPNE3

リンク

個人開発

その他

未確認

KVS

ubuntu

Android

負荷試験

オープンソース

社会

便利ツール

マネー

Twig

食品宅配

WEB設計

オーディオ

一般常識

アプリ開発

サイトマップ

うずら技術ブログ

たませんSNS

rss2.0