Dev
9 Horizontal rule ただひたすらにCSSで遊ぶ。善きかな
Flowing Gradient Text テキストの背景グラデーションが流れるやつ作った もとはこれ( SELECTABLE TEXT )です。 背景に画像を使ってたのを、 background-image: linear-gradient(45deg, rgba(20,123,150,1) 0%, rgba(229,209,6,1) 50%, rgba(20,123,150,1) 1…
Collect " Text Effect CSS " コード 多少shadow の位置やぼかしの量は変更したけど、ほとんど参考にしたブログ記事の通り。 参考: 12 Fun CSS Text Shadows You Can Copy and Paste CSSは下記の通り。 p { font: 34px Helvetica, Sans-Serif; font-weight: …
Bamboo CSSで竹林を作ってる まだまだ理想の竹林には程遠い。
はじめに なんとかグリッドの背景をCSSで作れないものか..と思い、作りだしたら他の装飾の背景とかも作るの楽しくなってきてコツコツ作っていくつかできた。 グリッドのを作るのは結局最後になって、しかもこの記事がとても参考になった。というか、答えだ。…
jsdo.it 今こんな感じでタブ作ってる。 Code html <ul class="shift_box"> <li class="current"><a href="">タブだよ</a></li> <li><a href="">タブだよ</a></li> </ul> <div class="contents"> <h2>タイトルだよ</h2> </div> css * { margin: 0; padding: 0; border: 0; } body { background: #fff; font: 30px sans-serif; padding: 40px; } ul { list…
jsdo.it 画像のとこにはアイコンとか入れる。 Code html <h4 class="point_heading">ほにゃららららら</h4> <h4 class="point_heading">ほにゃららららら</h4> <h4 class="point_heading">ほにゃららららら</h4> css .point_heading { counter-increment: point-1; color: #4D2D00; font-size: 15px; } .point_heading:before { background: url(http://lore…
CSS-Shack CSS-Shack CSS3を使ったエレメントを簡単に作成出来るChrome拡張・「CSS-SHACK」 | kachibito 触ってみた 初めて触ってみたけど、慣れればボタンとか一からコーディングするよりも速い。吐き出されるCSSはできればプロパティの並び順を選びたかっ…
前書いたやつ 前にこんなの書いてたな。基本的に考え方は変わってないけど、識別子のとことかちょっと増えた。 いま僕がやってるhtmlコーディング、画像名決定時の命名規則 命名規則を作る意味 一貫性を保ってファイル名を付けることで、ひと目でファイルの…
はじめに WebDesigning2013年4月号読んで、それのコーディングルールを基にコーディング製作のワークフロー作成した。 ワークフローについて書くのは2回目かな？またしばらくたったら違う順序や新しい項目、削る項目が出てくると思うけどとりあえず今はこれ…
つくった CSS3の勉強がてらボタンを作ってjsdoitに置いた。 背景埋め込み型ボタン :jsdoit 背景に埋めこまれてる感じのボタン作った。 overflow: hidden; 代用したい。 ブラウザちぇっく。 Opera 12.14 Google Chrome 25.0.1364.155 Safari 6.0.2 Firefox 19…
Guard-Sassを入れる gemでguardとguard-sassをインストール 参考: hawx / guard-sass hoge@foo.local[sass_guard_bootstrap]$ gem install guard-sass 設置する 任意のディレクトリに移動 Guardを設置したいディレクトリに移動します。今回はホームディレク…
CSS3で追加された属性セレクタ E[foo^="bar"] foo（属性名）で指定した値が、"bar"で始まる場合に適用 ex) object[type^="../image/"]{スタイルの指定} E[foo$="bar"] foo（属性名）で指定した値が、"bar"で終わる場合に適用 ex) a[href$=".html"]{スタイル…
種類 CSSセレクタ。 IDセレクタ ex) #id_name クラスセレクタ ex) .class_name 属性セレクタ ex) 要素名[属性名], 要素名[属性名="属性値"], 要素名[属性名~="属性値"], etc.. タイプセレクタ ex) h1, p, ul, div, span, etc.. ユニバーサルセレクタ ex) *（…
List Adobe関連 Illustrator Photoshop Fireworks Indesign Acrobat HTML,CSS HTML 文字実体参照 CSS HTML5+CSS3サポートブラウザ Canvas Haml,Sass Haml Sass Vim,Zencoding Vim Zencoding javascript/jQuery javascript jQuery UNIX 正規表現 検証ツール F…
はじめに Macのアプリを、ターミナルから起動すると意外と便利だったを参考にしました。 .bash_profileに書き込む .bash_profileがホームディレクトリにない人は作りましょう。作ったあとに下記を書き込んでください。 .bashrcに書くほうが一般的なのかな？…
つづきから 「ナビゲーションをわかりやすくしよう」まで読んだので続きの「質の高いコンテンツを提供しよう」からやります。 質の高いコンテンツを提供しよう 良いコンテンツに出会ったユーザーは、掲示板やブログに書いたり、SNSやメールなどを利用したり…
はじめに Google検索エンジン最適化スターターガイド半分まで読んだ。 さっき既存サービスのログ分析集計結果から今後の試作を決める的なMTがあったんだけど、アナリティクス関係の知識がなかったり検索エンジン系の知識がなかったり、数字からユーザーの行…
はじめに ちょっと今htmlコーディング時や画像につけている名前のルールを書いときます。 コーディングで名前を考える 見た目を反映したものやそれが何を表しているかといった不可解な名前ではなく、要素の目的や役割を反映した名前をつける top, rightなど…
はじめに 新しいといっても届いたのだいぶん前だけど。なかなか踏ん切りつかずに設定できなかったけど今使ってるMBPが悲しいくらい遅くなってきたのと、昨日vimの記事書いてちょっとやる気でた（だめなやつ）ので書く。まぁあれも、次同じようなとき詰まらな…
この記事はVimAdventCalendar2012の41日目の記事です。 昨日は @c0hama さんの Vim でコピペするときの Tipsでした。 はじめ 年始にvimテクニックバイブルを読み、htmlとcss編集時に実際役立ってると思うpluginを紹介したいと思います。 中身 コメントアウト…
むかしのファイルとかいじるときにタブが混じってるとむ〜んという気分になるけどいちいち直すのめんどくさいからvimrcに保存時にtabを2スペースに変換するの記述した。 ついでに行末空白削除のも入れた。 " 保存時に行末の空白を除去する " 保存時にtabを2…
rollover.jsくんがなんか効かなくなりました。 <button type="submit" id="NextBtn"> <img src="../../images/hoge/btn-foo.jpg" alt="あーれあーれ" width="492" height="85" class="imgover"> </button> で、いつも通りにどうサイズのhover画像に_ovつけてbtn-foo.jpgと同じディレクトリに置いても効かない。 button要素取ったら効くようになった。
2009年の本苦しい。 半分本からで、半分webのGoogleAnalyticsヘルプみながら書いた。 基本画面 プロファイル一覧（アカウントホーム） http://support.google.com/analytics/bin/answer.py?hl=ja&answer=2649553 GoogleAnalyticsのトップページ。 Analytics…
まずはじめに こいつ、ImageMagickのロゴなんだけど見た瞬間グッと来るものがあったよ。 かわいすぎて鼻血でた。 概要 "ImageMagick（イメージマジック）は画像を操作したり表示したりするためのソフトウェアスイートである。GIF、JPEG、JPEG 2000、PNG、PDF…
改行とタブ これ、vimでタグ付けしてるけど別にvimに限ったことではない。 改行 vimで置換の際に改行を入れる Ctrl+vかCtrl+mで^Mを入れる。 インデントちゃんとするのはどうすんのかな。 :%s;</table>;</table>^M<img src="images/under/.jpg" alt=""> タブ めんどうな作業がわずか数十秒に！新人プログラマが知…
100行目から150行目にあるhogeをfooに置換 :100,150s /hoge/foo/g
今後Basic Demosのものを参考にいくつか作って行きたいと思います。 今回はProcessing.jsの構造が書かれてる箇所を読んだのでそこのまとめ。 再帰2、グラフィック作成の項目の解釈はまだできてないし、間違ってる箇所も多々あると思うので調べたり理解で来た…
2日前くらいにMacVimをterminalで動くようにして、今日の朝から下記エラーが出て頻繁に落ちるようになったので 本当にこれが原因か？と、思っています。 エラー内容 Vim: Caught deadly signal SEGVll/gnavi/webapp/www/html/css/under.css" Vim: Finished. …
processingjs Processingを本気で覚える時に参考になりそうなサイトで紹介されてたブラウザでお絵描きプログラミング！ Processing.js 登場！をやった。 書かれてるサンプルコード動かしてみる ブラウザ上で表示させてみた Processing.js の練習場 楕円 size…
