Bootstrap 5入門 - タブUIの作り方 - ICS MEDIA
X（旧Twitter）社製のCSSフレームワークBootstrapを用いると、レスポンシブでモバイルファーストなユーザーインターフェイス（UI）を素早く作成できます。本記事では、Bootstrapの入門編として、HTMLコーディングのみでタブを作る方法を紹介します。 ※本記事は2024年4月現在のBootstrap 5.3で解説しています。 ▼ Bootstrapを使ったタブの作例。上部のタブにより猫の写真が切り替わる ▼ 操作の様子を動画で確認する 完成系のコードは次の通りです。 デモを別ウインドウで再生する ソースコードを確認する 本記事では初級者向けに、手軽にタブUIを作る方法に焦点をあてて説明します。また、中・上級者向けに、Bootstrapを使用することで向上できるウェブアクセシビリティーについて説明しています。 Bootstrapの基本単位はコンポーネント Bootstrapの
Webクリエイターボックス
WebクリエイターボックスのX: @webcreatorboxでは毎日Webに関する記事や美しいデザイン・写真などを紹介しています。その中で今週人気だったWeb関連の情報トップ10を紹介します。見逃してしまった人はこちらでチェック！まだフォローしてない人はお気軽にフォローしてみてくださいね！ 続きを読む Web制作やデザインに関する情報は、インターネット上以外にも書籍を通して体系的に学ぶことができます。今月も様々な本を拝読しました。その中でいいなと思った物、オススメの物をいくつか紹介します。 続きを読む WebクリエイターボックスのX: @webcreatorboxでは毎日Webに関する記事や美しいデザイン・写真などを紹介しています。その中で今週人気だったWeb関連の情報トップ10を紹介します。見逃してしまった人はこちらでチェック！まだフォローしてない人はお気軽にフォローしてみてくださいね
フロントエンドエンジニア御用達の MDN web docs を網羅した
このリストは何？ MDN web docs を、あたかも書籍の目次かのごとく整理しなおしたものです。それぞれ MDN web docs の記事へリンクしています。 なぜこれが必要になったかというと、人材市場でフロントエンドエンジニアが少なすぎる現状をどうにかするべく教育体制を整えるところから考え始めたのですが、それならまずは日頃お世話になっている MDN web docs を教材として扱いたいなと思ったからです。慣れてきてもよく参照するし「アレどこだっけなぁ？」を軽減もしやすいかなって。 MDN web docs は内容そのものはかなり充実しているものの、リンクがあらゆる方向に張り巡らせられており ある一定の流れに沿って読む ということが少々難しい側面もあります。特に初学者にとっては、迷子になりやすいかもしれません。 ですので、初学者でも学習しやすいように MDN web docs 全体の
CSSで実装したレイアウトの構造や階層を簡単に確認できる、私のお気に入りのCSSハック -My favorite CSS hack
flexboxで実装したレイアウトはもちろん、floatでもgridでもCSSで実装したレイアウトの構造や階層を確認できるスタイルシートを紹介します。 ページ上の各要素のサイズ・マージン・パディングなどに不整合がないか簡単に確認でき、スニペットやブックマークレットに登録しておくと便利です。 My favorite CSS hack by Gajus Kuizinas 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 5年もの間、私がコピペして利用してきたCSSのスニペットを紹介します。 * {background-color: rgba(255,0,0,.2)} * * {background-color：rgba(0,255,0、.2)} * * * {background-color：rgba(0,0,255、.2)} * *
Webはここまで進化中！コピペもできるHTML／CSS参考スニペット84個まとめ
この記事では、Webサイトやモバイルアプリにあっと驚くエフェクトを、コピー&ペーストで実装できる最新 HTML/CSS スニペットをまとめてご紹介します。 スニペット（英: Snippet）とは、一般的に「切れ端、断片」といった意味で、ウェブサイトなどのプログラミングで簡単に切り貼り、再利用できる部品を指します。 これらのスニペットを利用すれば、他のサイトではあまり見かけない差のつくデザインエフェクトを実現できます。今後のウェブ制作に活用してみてはいかがでしょう。 ここでは、カテゴリー別に分けて新しいオンラインツールをまとめています。 コンテンツ目次 1. イメージスライダー系 2. テキストエフェクト系 3. テキストエフェクト系スニペット 4. ページレイアウト系 5. ナビゲーションメニュー系 6. ローディングアニメーション系 7. SVGアニメーション系 8. 便利、面白系スニペ
これなら簡単！CSSのみで、ボタンやアイコンに気持ちいいさまざまなアニメーションを加える -UI interactions
ボタンやアイコン、アロー、ハンバーガーメニューなど、UIでよく使用される要素にインタラクションを加えるスタイルシートを紹介します。HTMLはbutton要素だけのシンプルな構成で、classを与えるだけで簡単に利用できます。 UI interactions UI interactions -GitHub UI interactionsは、CSSのみでUIにインタラクションを加えるスタイルシートです。MITライセンスで、個人でも商用のプロジェクトでも無料で利用できます。 UI interactionsの使い方 すべてのコンポーネントには、デフォルトとアクティブの2つの状態があります。状態の切り替えは、is-activeのclassに基づいて発生します。 HTML HTMLは、button要素にclassを与えるだけでのシンプルな構成です。
「1冊ですべて身につくHTML&CSSとWebデザイン入門講座」を一通りやってみての感想 - デザインキブン
こんにちは🌝 以前から勉強していた「1冊ですべて身につくHTML&CSSとWebデザイン入門講座」が昨日で一通り、完了しました！ CHPTER5以降になると、CSSの指定も増えてきたりレスポンシブデザインを考えたり、初心者の私は頭がこんがらがってきていました💦笑 なので、頭を一晩休めて今日の午前中改めて復習。少し整理できたので、やってみた感想をブログに書こうと思います。 昨日はタイル型Webサイトとお問い合わせページの制作にチャレンジ 昨日進めた部分のおはなし。 まずはタイル型レイアウトのwebサイト制作を進めました。 仕上がりはこんな感じ↓ 2枚目の左上の写真を拡大したレイアウト、横の小さい画像と少し高さがズレている。。きになる。。 が、どうしていいかわからず😭 ここら辺はいろいろ制作していくにつれて。。かな。 そして次にお問い合わせページの制作。 仕上がりはこんな感じ↓ はじめ、
Javascript でサブミット（GET or POST）する – 偏差値40プログラマー
ここでは、Javascript でサブミットする場合サンプルスクリプトを掲載しています。 詳細はサンプル内のコメントを参照ください。 Javascript で submit するサンプル <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Javascript でサブミットする</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <script type="text/javascript"> <!-- function mySubmit(formName, url, method) { // サブミットするフォームを取得 var f = document.forms[form
[HTML] button要素をリンクにしたい[追記] - Qiita
W3Cの仕様では、 a要素の中に、インタラクティブコンテンツ（a要素やbutton要素など）を入れてはダメ なのだそうです。 実はずっと誤解してました…。 次のようなトラブルに出くわして調べてみたらそういうことなのだそうです。 そのトラブルとは…。 IE11でa要素の中のbutton要素が動作しない 動かなかったのは次のようなコード。
![[HTML] button要素をリンクにしたい[追記] - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/6b3f372008c59d6dc190445ecbcc1370a12f687c/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-9f5428127621718a910c8b63951390ad.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZoPTMzNiZ0eHQ9JTVCSFRNTCU1RCUyMGJ1dHRvbiVFOCVBNiU4MSVFNyVCNCVBMCVFMyU4MiU5MiVFMyU4MyVBQSVFMyU4MyVCMyVFMyU4MiVBRiVFMyU4MSVBQiVFMyU4MSU5NyVFMyU4MSU5RiVFMyU4MSU4NCU1QiVFOCVCRiVCRCVFOCVBOCU5OCU1RCZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnR4dC1jbGlwPWVsbGlwc2lzJnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9OGQ0YzI3MmJjZjVkMGFiZDhhMWM4MGMxNWIxNzIxOTM%26mark-x%3D142%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTYxNiZ0eHQ9JTQwS29penVtaS1HcmVlbndpY2gmdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPTY2MzZiOTYyNGZkODhlZDVmNDgxZjM0MzExNzc3N2Q2%26blend-x%3D142%26blend-y%3D491%26blend-mode%3Dnormal%26s%3D20f9d0534ad20bac1d5cf09df47f6b0a)
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
HTML5/CSS3のニュースやTIPSなどのまとめ (2019年9月19日)
CSS チュートリアル