Webチートシート for エンジニアチートシートのまとめサイトです。プログラマー・エンジニアを対象に要点をすぐに参照できるようにチートシートにまとめてみました。Web開発、モバイルアプリ、CLIなど内容は多岐に渡ります。印刷してお手元に置いたり、ブックマークしてすぐに見られるようにしておくと便利です。
CSS で作るおしゃれなボックス（枠線・囲み枠）のデザインサンプル 13 選 - Naifix
CSS だけで作れるおしゃれなボックス（枠線・囲み枠）のデザインサンプルを紹介します。 ブログ記事は文章がメインですが、ボックスを使うと重要なポイントがわかりやすくなり、記事の読みやすさにもつながります。
<a href="tel:***">リンクをスマートフォン端末以外では無効にする - Qiita
非常に利便性の高い実装ですが、レスポンシブWebデザインでサイト制作をする場合には、PC端末等での閲覧・操作時に予期しない挙動となる場合があります。 "tel:" リンクを【スマートフォン端末以外では無効】にする方法はいくつかありますが、 「カスタムデータ属性の追加」といったHTML側の調整が必要ない 余計なDOMの書き換えが発生しない という条件では以下のシンプルな実装が考えられます。（jQuery使用） var ua = navigator.userAgent.toLowerCase(); var isMobile = /iphone/.test(ua)||/android(.+)?mobile/.test(ua); if (!isMobile) { $('a[href^="tel:"]').on('click', function(e) { e.preventDefault(); }
【スマホサイト】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
CSShake
Classes The basic collection Bs Basic Shake Ss Slow Shake Ls Little Shake Hs Hard Shake ⇄ Fixed Horizontal ⇵ Fixed Vertical ↻ Fixed Rotation Os Opacity Shake ✌ Crazy Shake ℇ Constant Shake % Chunk Shake Launch the animations from the parent with class 'shake-trigger' (customizable) Install Get started... $ git clone https://github.com/elrumordelaluz/csshake.git or $ bower install csshake or $ npm
ついつい押したくなる、CSS3を使ったラジオボタンのデザイン
フォームってあまり使うこともないのですが、CSS3を使ってデザインするとなかなか面白かったので、今回はラジオボタンを使ったサンプルを紹介します。 ではサンプル１からコードを紹介していきます。 サンプル１ 二択のラジオボックスです。「はい」を押したときと、「いいえ」を押したときの色を変えています。 HTML では、HTMLから。 <div class="sample"> <input type="radio" name="s2" id="on" value="1" checked=""> <label for="on" class="switch-on">はい</label> <input type="radio" name="s2" id="off" value="0"> <label for="off" class="switch-off">いいえ</label> </div> 特に問題
CSS3 Button Generator – This site was closed.
LR icons https://en.lricons.com/ CSS Button Creator https://cssbuttoncreator.com/ Button Maker https://css-tricks.com/examples/ButtonMaker/ CSS Button Generator for your pleasure http://www.dextronet.com/css-buttons-generator/ 2.5dBUTTON http://noht.co.jp/2_5dbutton CSS3 Typeset Style Generator http://www.sciweavers.org/i2style Button X https://www.bestcssbuttongenerator.com/ CSS button generator
Google Libraries API
Stay organized with collections Save and categorize content based on your preferences. The Google Hosted Libraries is a stable, reliable, high-speed, globally available content distribution network for the most popular, open-source JavaScript libraries. Google works directly with the key stakeholders for each library effort and accepts the latest versions as they are released. Libraries To load a
ASCII.jp：jQueryによるLightbox風モーダルウィンドウの作り方｜Web制作の現場で使えるjQuery UIデザイン入門
HTMLとCSSによる表現を考える 複数のサムネイル画像を並べておき、画像をクリックするとモーダルウィンドウで拡大画像を表示するWebページを作成します。はじめに、HTML／XHTML（以下、HTML）とCSSでどのようにモーダルウィンドウを表現するか、静的なページを作って考えてみましょう。 HTMLは、ul/li要素で並べたサムネイル画像の後に、「glayLayer」と「overLayer」というid属性をつけたdiv要素を配置します。glayLayerはページ全体に重ねる半透明のレイヤーを表示するための要素で、overLayerは子ウィンドウを表示するための要素です。子ウィンドウに表示したい要素（今回はimg要素）はoverLayer内に配置します。 ▼サンプル01（HTML部分） <h1>jQueryを利用したモーダルウィンドウの作成</h1> <ul> <li><a href="i
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
CSSで上下中央揃え - jsdo.it - Share JavaScript, HTML5 and CSS
高さが固定のエリアで画像や複数行のテキストなどを上下中央揃えにする方法。 ・HTML5 or XHTML1.0strict で対応。 ・IE8+, Fx, Safari, Chrome (IE7はfont-sizeとか織り交ぜると対応可) <p><img src="http://dummyimage.com/300x200/000/fff" alt=""></p> <p><span>複数行のテキストの場合<br>２行目ほげほげほげ<br>３行目ふがふがふが</span></p> <p><img src="http://dummyimage.com/100x100/000/fff" alt=""><span>複数行のテキストの場合<br>２行目ほげほげほげ<br>３行目ふがふがふが</span></p> /* base */ p { text-align: center; backgroun
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
jsdo.it
Icons | Font Awesome
Ultimate CSS Gradient Generator from ColorZilla
CSS Toggle Switch: Accessible CSS toggle switch using standard form controls
Border Radius