Webチートシート for エンジニアチートシートのまとめサイトです。プログラマー・エンジニアを対象に要点をすぐに参照できるようにチートシートにまとめてみました。Web開発、モバイルアプリ、CLIなど内容は多岐に渡ります。印刷してお手元に置いたり、ブックマークしてすぐに見られるようにしておくと便利です。
CSS で作るおしゃれなボックス（枠線・囲み枠）のデザインサンプル 13 選 - Naifix
CSS だけで作れるおしゃれなボックス（枠線・囲み枠）のデザインサンプルを紹介します。 ブログ記事は文章がメインですが、ボックスを使うと重要なポイントがわかりやすくなり、記事の読みやすさにもつながります。
【スマホサイト】display:table-cellにmarginを指定したい ｜ Tips Note by TAM
スマホサイト制作でこのようなデザインを実装する場合、 テキスト位置の調整を考えると、displayプロパティが便利です。 セル間隔をmarginで調節したいところですが、table-cell に margin は無効です。 そこで、border-collapse で dasplay: table のセル間隔を調整したいと思います。 border-collapse でセルのボーダーを重ねるか間隔を空けるかを、 border-spacing でどれぐらい空けるのか指定できます。単位はpxやem、exなどです。 このプロパティは display: table を指定したクラスに追加します。 ■html <section class="pagelist"> <ul class="tab-area"> <li class="tab-link now radius-large-top"><a href
Bootstrap
BootstrapBootstrap v5.3 (switch to other versions) v5 releases Latest (5.3.x) v5.2.3 v5.1.3 v5.0.2 Previous releases v4.6.x v3.4.1 v2.3.2 All versions Get Security Updates for Bootstrap 3 & 4 Build fast, responsive sites with Bootstrap Powerful, extensible, and feature-packed frontend toolkit. Build and customize with Sass, utilize prebuilt grid system and components, and bring projects to life w
Flexslider WordPress Slider Toolkit by WooThemes
Get started with FlexSlider in 3 easy steps! Step 1 – Link files Add these items to the <head> of your document. This will link jQuery and the FlexSlider core CSS/JS files into your webpage. You can also choose to host jQuery on your own server, but Google is nice enough to take care of that for us! Step 2 – Add markup The FlexSlider markup is simple and straightforward. First, start with a single
adexd.net - このウェブサイトは販売用です！ - adexd リソースおよび情報
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
ウェブデザインの配色設計に役立つオンラインサービスのまとめ -2013年春
見て楽しい触って便利な、最近リリースされたものを中心としたウェブデザインの配色設計に役立つオンラインサービスを紹介します。 まずは、気軽にカラーを楽しめるサービスから。
美しいスタイルシートを作るためのテクニック | Hinemosu
The Art of Crafting Beautiful Stylesheets ≪ Azadcreative.comで紹介されていた「芸術的に美しいスタイルシートを作るためのテクニック」が興味深かったので、簡単にご紹介。 ファイルの命名規則 “main.css"や"style.css"などの安易なファイル名を使用することを避け、ファイルの命名規則は以下のルールに従ってください。 style_all.css すべてのブラウザとプラットホームに適用されるスタイルシートファイル style_screen.css 全体レイアウトを定義するメインのスタイルシートファイル style_screen_IE7.css インターネット・エクスプローラー7専用のレイアウトスタイルシート。実際にIE7専用のスタイルシートが必須であると言うわけではなく、ファイル命名規則の例であることに注意してください。 st
簡単、きれい！RGBaカラーを使って横メニューを作ってみる
RGBaカラーを使って全体に統一感のある横メニューを作ってみます。RGBaカラーといっても使うの色は白（rgba(255,255,255,0.4)など）と黒（rgba(0,0,0,0.1)など）だけで、その透明度を変えて様々なところで使っています。 先日書いた「カラーツール「0to255」で色を決めてメニューを作ってみる」がなかなか好評でしたが、今回も出来上がりは同じようなメニューになります。 RGBaカラーについては、以前書いた「透明度を表す「opacity」 と 「RGBa」の違いと使い分け」も参考になると思いますのでぜひご覧ください。 早速コードを見てみます。まずはHTMLですが、これは特に問題ないと思います。 <ul id="menu"> <li><a href="#">IE</a></li> <li><a href="#">Firefox</a></li> <li><a href
Twitter BootstrapでさくさくWeb開発 : アシアルブログ
新年度です！ 新入学、新入社を迎えるみなさん、おめでとうございます。 エンジニアのみなさんがWebアプリケーションを作るとき、一番悩むのはデザインではありませんか？ カッコよくって統一的なデザインがほしい！でもデザインセンスないし…実は私もそうでした。 ですが、2月にメジャーバージョンアップしたTwitter Bootstrapを使うと、簡単にカッコいいサイトが作れます！ Twitter Bootstrapとはなにか Twitter Bootstrap CSSのフレームワークです。 Web上に使ってみた！スゲー！等、たくさんのドキュメントが存在していますが、中には2月以前のバージョン(v1.4)について言及しているものもありますので、2系を使う方はバージョンの違いに気をつけて下さい（クラス名など結構ガラっと変わっています）。 今回ご説明しているのは、Twitter Bootstrap 2に
OOCSS（オブジェクト指向CSS）のススメ | hijiriworld Web
【OOCSS】 <div class="box box-red"></div> <div class="box box-blue"></div> .box { width: 50px; height: 50px; } .box-red { border: 1px solid red; background-color: #FFCCCC; } .box-blue { border: 1px solid blue; background-color: #66CCFF; } といった感じです。 いままで「OOCSS」という言葉を知らなくても、マークアップエンジニアや、ある程度経験のあるWebデザインナーであれば、効率化を図るために自然にやっていることではないでしょうか？ この考え方を体系化してまとめたものがOOCSSです。 では次にOOCSSがどのような考え方のもとに設計されたのかを見ていきまし
[CSS]高さの異なるカラムを揃えるスタイルシート | コリス
Columnas 100% altas Columnas 100% altasのエントリーでは、下記のデモのように高さの異なるdivで組んだカラムの高さを揃えるスタイルシートを紹介しています。 sample:高さがばらばらのdiv sample:高さが揃ったdiv スタイルシートは、各divに対して「padding-bottom」と「margin-bottom」に同じ数値をプラス値とマイナス値で指定を行い高さを揃え、それらのdiv要素を包んだdivで「overflow:hidden;」を指定します。 詳しくは、最小限にしたサンプルを作成したので参照ください。 高さの異なるカラムを揃えるスタイルシートのサンプル 下記の「32768px」って、何か特別な意味があるのでしょうか。
CSS3の勉強になるかも！？画像を使わないボタンの作成手順
CSS3を使うと画像のようなボタンも簡単に作れます。よくあるタイプのボタンですが、できあがりのコードだけだと勉強にならないので、作り方を順番に紹介していきます。 今回、ChomeとFirefoxで動作確認しています。IEだとグラデーションが使えないので、同じボタンがたくさんあるように見えます。スマホサイト用なんかだと十分実用的だと思います。
ポップアップを使わずに、lightbox風にhtmlファイルを表示させるThickBox3 ｜東京都中野区でweb制作の仕事しているフリーのwebデザイナーです。｜僕は、webの中の人、外の人.com
ThickBox3とはなにか？？ ThickBox3とは、lightboxのように、ページや新しいウィンドウ、ポップアップを開く事なく、HTMLファイルを表示するモジュールの事 lightboxは、画像しか出来ず、HTMLファイルを表示させる事はできません。 使い方。 必要最低限の自分的メモ ①ファイルをダウンロード ダウンロードするファイルは全部で4つ 右クリックしてリンク先を保存してください。 1.jquery-latest.js 2.thickbox.js 3.thickbox.css 4.loadingAnimation.gif の計4つのファイルをダウンロード ②各ファイルを読み込ませる。 まず、 ・jquery-latest.js ・thickbox.js ・thickbox.css のファイルを読み込みを行う。 <script type="text/jav
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Ultimate CSS Gradient Generator from ColorZilla
Border Radius
stroll.js - CSS3 Scroll Effects
IDEA * IDEA