Browse Themes by Tag Preview all themes Resources for Bootstrap Useful links for additional Bootstrap themes, extras and code snippetsOfficial Bootstrap Bootply Playground Bootstrap 4 Upgrade BootstrapBay WrapBootstrap HTML5 Zero StartBootsrap Why Bootstrap? It's no surprise that Bootstrap is the most popular frontend framework. Web designers and developers can leverage Bootstrap to build responsi
なんだか、Web制作の際に起こる様々な面倒くさいタスクを自動化してくれるGruntというツールがあるらしく、私の周りのWebデザイナーさんやコーダーさんがこぞって導入されておりました。 はじめは「へぇ…あちきは別に興味ないからいいでありんすよ」と指をくわえて傍観していたのですが、便利便利の声を聞くにつれやっぱり羨ましくなってきました。だから導入した。使った。良かった。 そんな訳で今回は、Grunt.jsの導入から簡単な使い方までを紹介したいと思います。私のような黒い画面に抵抗を持っている初心者の方でも導入できるよう、コピペさえ出来ればGruntが使えるようになる記事にしてあるつもりです。 なお、今回導入した私のPC環境はOS X 10.9.1です。Windowsでの導入手順は今更だけどやるgrunt入門編・インストールから基本的な使い方｜WEB Drawerをご覧下さい。 Gruntで何が
明示的 意味 แพลตฟอร์มการเรียนรู้และพัฒนาทักษะด้วยเทคโนโลยี https://suin.io เป็นแพลตฟอร์มที่ให้คุณเรียนรู้และพัฒนาทักษะทางเทคโนโลยีอย่างสะดวกสบาย เรามุ่งมั่นในการให้ความรู้และประสบการณ์ที่มีคุณค่าในการพัฒนาตนเอง pascalcase
CSS3を使って、iPhone風のボタンを作成する方法をメモ。（firefox、chrome、safariで動作確認済み） ボタンごとにそれらしい画像を作るのは面倒なので、CSSで角丸、グラデーション、影を指定して、画像なしでそれっぽいものを作ろうとしています。 うまく表示されるブラウザでは、下記の感じになるはずです。 CSS 以下のようなCSSを用意します。グラデーションを指定する-moz-linear-gradiend/-webkit-gradientを使って、真ん中で色を変えているのがポイントです。 a.quickbutton { /* 角丸 */ -webkit-border-radius: 4px; -moz-border-radius: 4px; /* グラデーション */ background: -moz-linear-gradient(top, #666666, #6666
最近はWebアプリケーションを構築しようと思うとRuby on Railsを使うようになっている。慣れれば慣れる程開発の効率が良くなり、さらに便利なものになっていく。 そんなRailsの魅力をさらに増してくれるのが数多いプラグインの存在だ。その中から一つ、グラフ作成のプラグインを紹介しよう。 今回紹介するオープンソース・ソフトウェアはCSS Graphs Helper for Ruby on Rails、CSSを使ってグラフを作成するRailsプラグインだ。 CSS Graphs Helper for Ruby on RailsはインストールはRailsのプラグインコマンドからでき、さらに設定らしい設定もせずに利用できるのが魅力だ。 描けるグラフは三種類だ。縦型の棒グラフ、横型の棒グラフ、そして複合型だ。どれも手軽に利用でき、Webアプリケーションをさらに魅力的なものにしてくれるだろう。
Web制作において、対応しなくてはいけないブラウザの中には、未だしぶとくIE6が残っています。IE6が2001年に登場したことを考えると、もう8年もその時代の「縛り」を(健気に)守りながら作っていることになるんですね。 いま良く使われているCSSのテクニックも、ほとんどはこの「縛り」の範囲内で有効な手法なわけですから、突然2001年にタイムスリップしてサイトを作る事になったとしても、今も昔も変わらない１つの古文書に従えばいいので、きっと活躍できます。 しかしたまらん、流石に疲れた。 ボックスひとつができること CSSでは、文書を構成する各要素は、ボックスという矩形領域に置きかえられ、それらの持つプロパティを操作して装飾します。つまり、ボックスはページデザインを構成する最小単位と言えるわけですね。 そこで今回は、最小単位となる1つのボックスに対して、どのような装飾手法が有効かという点を、CS
Form Design フォームデザイン さてさて、最近のwebの入力フォームは本当に凝ってるところが多くて、ただただ関心するばかり。 そんなわけで今回は、焦点を『フォーム』に限定し、スタイル抜群なフォームUIを勉強してみたい。 流れ的には インスピレーションデザイン集CSSによるフォームの変更方法JavaScriptによるフォームデザインという感じでお送りいたします。 インスピレーション まずは、スタイリッシュなフォーム。 これらは、webデザイン全体がフォームデザインとなっているまとめです。 まさにバインダー。 webの入力フォームを街頭アンケート用紙のように仕上げたデザイン。かっこいい。 くしゃくしゃっとしたような紙の一部にフォームが設置されている。 こちらもメモに名前を書くかのごとく。 深海に光がさす感じのイメージ。 シンプルイズベストなレイアウト設計がなされている。 １，２，３，
Why virtual private servers are worth considering for the new website owners? There are multiple steps and processes that people in Australia need to follow in order to set up their website. In fact, there is a range of possible services, solutions and helpful resources that are needed to help people get started with the online business setup. We cannot say that each and every person who gets read
currentStyle, getComputedStyle() が返す値を調べています。 getComputedStyle() は、描画に使われるスタイルに(近い)値を取得する便利なメソッドです。 currentStyle は IE と Opera で使用できる JavaScript プロパティですが、やる気の無い値(widthで"auto"を返す等)を返すことでも有名です。 color: Browser gray skyblue #C0FFEE transparent 評価 Firefox2 rgb(128, 128, 128) rgb(135, 206, 235) rgb(192, 255, 238) rgb(0, 0, 0) Firefox3 rgb(128, 128, 128) rgb(135, 206, 235) rgb(192, 255, 238) transparent ○
COLLECTION & COPYのそのリソースを訪問済みか判定するやHatebu Addictionなどで使われている既読チェック。これらとは違う、getComputedStyle()メソッドを利用して文字色を取得し訪問済みリンクの文字色かどうかをチェックという手法で既読チェックを実現している、Jeremiah Grossman: I know where you've beenというページを見つけた。FirefoxやSafariなどではこれで既読チェックが可能。 getComputedStyle()メソッドはstyle属性やJavaScriptで設定されたスタイル以外のスタイル情報をまとめて取得するメソッドで、ComputedCSSStyleDeclarationオブジェクトを返す。そして、ComputedCSSStyleDeclarationオブジェクトのgetPropertyVal
While working on Stikkit, a “page curl” came to be. Not being as crafty as Veerle, you see. I fired up Photoshop to see what could be. “Another copy is running on the network“ … oopsie. With license issues sorted out and a concept in mind I set out to create something flexible and refined. One background image and code that is sure to be lean. A simple solution for lazy people like me. The curl I’
Create Resizing Thumbnails Using Overflow Property | Css Globe This tutorial is aimed at controlling the size of the thumbnails appearing on your page. CSSのOverflowを応用して画像を綺麗にリサイズ表示するサンプル。 次のように、CSSで画像を固定サイズにトリミング表示できます。 更にマウスオーバーで画像を元サイズに。 実装について見ていきましょう マークアップが次のようにあったとします <p class="thumb"><a href="http://cssglobe.com/"><img src="image.jpg" /></a></p> そして、次のＣＳＳを適用。 p.thumb{ float:left; margin:.5
Dave Woodsのエントリー「IE6 -CSSのバグとその解決方法」から、IE6でよく遭遇する３つのCSSのバグとその解決方法の意訳です。 IE6 - CSS Bugs and Fixes Explained IE6で、マージンが２倍になってしまうバグ IE6で、hasLayoutプロパティによって起こるバグ IE6で、小さい高さを指定した場合に起こるバグ IE6で、マージンが２倍になってしまうバグ IE6で、フロートした要素のマージンが２倍になってしまうバグと解決方法の紹介です。 下記のコードで、IE6はマージンが20pxになります。 sample:バグ #navigation{ float: left; width: 200px; margin-left: 10px; } #content{ float: right; width: 500px; margin-right: 10p
いつも購読している海外のブログ記事ですが、図つきでわかりやすく紹介されています。 こういうのは過去にもいくつか見た事がありますので『Dezinerfolio流』と名づけておきます。 ようするにCSSタブメニューの横幅を、中に書かれたテキストによって、自動的に幅を調整すると言うもの。 タブメニューは結構使うようになってきたので覚えておいて損はないですよね。 もうタブの画像生成に悩まない 実際タブメニューは結構使いますので、これでひとつまた作業が楽になります。 タブの画像も、海外では無数に配布されていたり、生成できたりしますので、利用頻度は高いかと。 サンプルはこちら 図つきのため本当にわかりやすくなっています。 ソースコードはエントリに書かれていますので、そちらを参考にしてください。 Creating Liquid CSS Tabs for Menus もしもタブを作るのがそもそも面倒なら・
Columnas 100% altas Columnas 100% altasのエントリーでは、下記のデモのように高さの異なるdivで組んだカラムの高さを揃えるスタイルシートを紹介しています。 sample:高さがばらばらのdiv sample:高さが揃ったdiv スタイルシートは、各divに対して「padding-bottom」と「margin-bottom」に同じ数値をプラス値とマイナス値で指定を行い高さを揃え、それらのdiv要素を包んだdivで「overflow:hidden;」を指定します。 詳しくは、最小限にしたサンプルを作成したので参照ください。 高さの異なるカラムを揃えるスタイルシートのサンプル 下記の「32768px」って、何か特別な意味があるのでしょうか。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
