FigmaのAutoLayout入門 - エンジニアに伝わるデザインを作ろう - ICS MEDIA
徐々に日本でもメジャーなデザインツールとなっている「Figma」。前回の記事『FigmaのSmart Animateを活用したプロトタイプ入門』では、簡単にアニメーションを実現できる「Smart Animate」機能を紹介しました。 本記事ではデザイン制作とその後のコーディング作業を強力にサポートしてくれる「Auto Layout」について詳しく紹介します。「Auto Layout」はデザインを効率よく進められるだけでなく、デザイン段階でHTML・CSSコーディングの参考になる情報を追加できます。 デザイン段階での使い方はもちろん、Figmaでデザインを受け取ったエンジニアがどう考えて実装していくべきかまで紹介します。デザイナーはもちろん、Figmaで作られたデザインファイルを受け取る可能性があるエンジニアの方も是非ご覧ください。 Auto Layoutとは 「Auto Layout」とは
jQueryのtoggleでアコーディオンメニューやタブをさくっと実装する方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。LIGフィリピン支社代表のせいと(@seito_horiguchi)です。 最近友人と『中学生円山』を観に行きました。 女性にはおそらく理解できないであろう「男子中学生あるある（主に下ネタ）」が盛り込まれていて、いい意味でヒドイ内容でした。もう一回観たい（´ω`） さて、今回は「HTMLとCSSはわかるけどjQueryってなにそれ、おいしいの」という方向けに、今日から使える簡単かつ便利な3つのメソッド「slideToggle／fadeToggle／toggleClass」をご紹介します。 こいつらを知っとくと下記のようなメリットがあります。。 アコーディオンメニュー、タブ、スマホサイトでよくある「上からスラスラ出てくるメニュー」とか実装できる 超シンプルな記述なので、今日から使える いやーこれは便利ですね。 というわけで、早速解説していきます。 【こちらもおすすめ】 超簡単jQ
CSSのみで簡単にタブ切り替えを作成する方法 | Stronghold Archive
こんばんは！ 今回はライトなのですが。 CSSのみでタブ切り替えを実施する方法です。 かなり簡単な方法だと思います。 では… CSS #tabmenu{ padding:0px; margin:0px; color:#333; font-size: 11px; width:500px; position:relative; } #tabmenu div#tab{ position: absolute; top:0px; left:0px; } #tabmenu div#tab a{ float: left; height: 40px; line-height: 40px; text-align: center; width: 100px; display: block; text-decoration:none; color:#333; background:#eee; } #tabmen
IE9+ならスクリプト無しで、タブやカルーセルなどさまざまなコンポーネントがスタイルシートで実装できる -Pure CSS Components
最近のウェブページでよく見かけるカルーセル、アコーディオン、ドロップダウン、モーダルウインドウ、タブコンテンツなど、さまざまなコンポーネントをHTML5+CSS3で実装するライブラリを紹介します。 HTML5の「aria-hidden属性」とラジオボタン・チェックボックスをうまく使い、スクリプト無しで実装されています。 Pure CSS Components Pure CSS Components -GitHub ダウンロードできるCSSファイルには、通常のスタイルシートのほかにLESS版も含まれています。 Pure CSSで実装するカルーセル Pure CSSで実装するアコーディオン Pure CSSで実装するドロップダウン Pure CSSで実装するモーダルウインドウ Pure CSSで実装するタブコンテンツ 各コンテンツはHTML5対応ブラウザ、IEは9+でご覧ください。 Pure
CSSだけで作るタブUI - jsdo.it - Share JavaScript, HTML5 and CSS
<ul class="tabs"> <li> <input name="tab" id="tab1" type="radio" checked /> <label for="tab1">タブ1</label> <div class="contents tab1"> <p>タブ1の中身です。</p> <p>タブ1の中身です。タブ1の中身です。タブ1の中身です。タブ1の中身です。</p> </div> </li> <li> <input name="tab" id="tab2" type="radio"/> <label for="tab2">タブ2</label> <div class="contents tab2"> <p>タブ2の中身です。</p> <p>タブ2の中身です。タブ2の中身です。タブ2の中身です。タブ2の中身です。</p> </div> </li> <li> <input n
タブ切替のサンプル
11111 11111 11111 11111 11111 11111 11111 11111 11111 11111 11111 11111 11111 11111 11111 22222 22222 22222 22222 22222 22222 22222 22222 22222 22222 22222 22222 22222 22222 22222 22222 22222 22222 22222 22222 22222 22222 22222 22222 22222 22222 22222 22222 22222 22222 33333 33333 33333 33333 33333 33333 33333 33333 33333 33333 33333 33333 33333 33333 33333 33333 33333 33333 33333 33333 33333 3333
jQueryを使ったタブメニューの実装サンプルまとめ
**追記** この記事とは直接関係ありませんが、自作のタブプラグインを貼っておきます。 rin316/jquery.tab: jQuery tab plugin. **追記終わり** 仕事でjQueryを使ったタブメニューを作ったので忘れないようにメモ。 それぞれの挙動も比較しやすいように並べてみました。 今日が勉強初投稿の日！ 写真:新川通りで撮った桜。 まずはファイルの用意 下記リンクからダウンロード。 ・jQuery本体…Past Releases内→最新バージョンのMinified ・Download Builder | jQuery UI (このサイトで使っているui.tabs.zip) head内にリンクを張る ダウンロードしたファイルに対して、head内にリンクを張ります。 [html] [/html] さっそく使ってみる 本文にhtmlを追加。 [html] タブ1 タブ2
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Bootstrapでリスト／パネル／タブ使って情報をすっきり整理しよう