サクサク読めて、
アプリ限定の機能も多数！
アプリで開く
日本でもメジャーなデザインツールとなった「Figma」。前回の記事『FigmaのSmart Animateを活用したプロトタイプ入門』では、簡単にアニメーションを実現できる「Smart Animate」機能を紹介しました。本記事ではデザイン制作とその後のコーディング作業を強力にサポートしてくれる「Auto Layout」について詳しく紹介します。「Auto Layout」はデザインを効率よく進められるだけでなく、デザイン段階でHTML・CSSコーディングの参考になる情報を追加できます。 デザイン段階での使い方はもちろん、Figmaでデザインを受け取ったエンジニアがどう考えて実装していくべきかまで紹介します。デザイナーはもちろん、Figmaで作られたデザインファイルを受け取る可能性があるエンジニアの方も是非ご覧ください。 Auto Layoutとは 「Auto Layout」とは、設定した
こんにちは。LIGフィリピン支社代表のせいと(@seito_horiguchi)です。 最近友人と『中学生円山』を観に行きました。 女性にはおそらく理解できないであろう「男子中学生あるある（主に下ネタ）」が盛り込まれていて、いい意味でヒドイ内容でした。もう一回観たい（´ω`） さて、今回は「HTMLとCSSはわかるけどjQueryってなにそれ、おいしいの」という方向けに、今日から使える簡単かつ便利な3つのメソッド「slideToggle／fadeToggle／toggleClass」をご紹介します。 こいつらを知っとくと下記のようなメリットがあります。。 アコーディオンメニュー、タブ、スマホサイトでよくある「上からスラスラ出てくるメニュー」とか実装できる 超シンプルな記述なので、今日から使える いやーこれは便利ですね。 というわけで、早速解説していきます。 【こちらもおすすめ】 超簡単jQ
こんばんは！ 今回はライトなのですが。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
最近のウェブページでよく見かけるカルーセル、アコーディオン、ドロップダウン、モーダルウインドウ、タブコンテンツなど、さまざまなコンポーネントをHTML5+CSS3で実装するライブラリを紹介します。HTML5の「aria-hidden属性」とラジオボタン・チェックボックスをうまく使い、スクリプト無しで実装されています。 PureCSS Components PureCSS Components -GitHub ダウンロードできるCSSファイルには、通常のスタイルシートのほかにLESS版も含まれています。 PureCSSで実装するカルーセル PureCSSで実装するアコーディオン PureCSSで実装するドロップダウン PureCSSで実装するモーダルウインドウ PureCSSで実装するタブコンテンツ 各コンテンツはHTML5対応ブラウザ、IEは9+でご覧ください。 Pure
<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
**追記** この記事とは直接関係ありませんが、自作のタブプラグインを貼っておきます。 rin316/jquery.tab: jQuery tab plugin. **追記終わり**仕事でjQueryを使ったタブメニューを作ったので忘れないようにメモ。 それぞれの挙動も比較しやすいように並べてみました。 今日が勉強初投稿の日！ 写真:新川通りで撮った桜。 まずはファイルの用意 下記リンクからダウンロード。 ・jQuery本体…Past Releases内→最新バージョンのMinified ・DownloadBuilder | jQueryUI (このサイトで使っているui.tabs.zip) head内にリンクを張る ダウンロードしたファイルに対して、head内にリンクを張ります。 <head> <!-- jQuery --> <script type="text/javascrip
1リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
