よく使われるレイアウトやUIコンポーネント、それだけを実装するためのHTMLとCSSのシンプルなコードのまとめ
Webサイトやスマホアプリでよく使われるレイアウトやUIコンポーネント、それだけを実装するためのHTMLとCSSのコードがまとめられたコレクションを紹介します。 フレームワークなども便利ですが、それだけを実装するためのコードなので、非常にシンプルでカスタマイズも簡単だと思います。 CSS Layout CSS Layout -GitHub CSS Layoutの特徴 CSSで実装するレイアウト・UIコンポーネント CSS Layoutの特徴 CSS Layoutはよく使われるレイアウトやUIコンポーネントだけを実装するためのHTMLとCSSのコードがまとめられたコレクションです。 MITライセンスで、商用プロジェクトでも無料で利用できます。
<label/> + <input type="radio"/> で任意の文字・画像を選択肢代わりに表示する - ブログ
この記事は「口コミサイトの星(★★★☆☆)をCSSだけで実装してみた - Qiita」を見て、その中で使われているテクニックを一部解読したもの 導入 ゴール 手順 なにもない状態 ラベルと関連付ける ラベルに画像を追加 CSS でラジオボタンを非表示化 動作確認用のCSS 追記 完成 Links (本文に Slim を使いたかったけど Syntax Highlight 対応して無くて見辛くてツライので、 HTML で書いた) 導入 <input/> を用いる時は、 <label/> と併用することでこの2つの要素を関連付けられる 関連付けによってラベルのクリックによる入力可能状態への移行を機能させられる <input/> をただ単体で使用するのではなく、ラベルと併用することで、ラベルとインプットの関連性...ユーザは何を入力すべきか...の明示ができて、使い勝手の良さにつながる <!--
日本語対応！CSS Flexboxのチートシートを作ったので配布します | Webクリエイターボックス
2021年12月18日 CSS, ダウンロード FlexboxとはFlexible Box Layout Moduleのことで、その名の通りフレキシブルで簡単にレイアウトが組めちゃう素敵ボックスです。現在ほとんどすべての最新ブラウザーでFlexboxをサポートしており、Flexboxを使ったレイアウト組みが今後のWebデザインのスタンダードとなるでしょう。Webクリエイターボックスでは以前からFlexboxの使い方について紹介してきたのですが、最近Flexboxが浸透してきたこともあってか各プロパティの使い方について質問される機会が増えてきたので、チートシートとしてまとめてみました。この記事ではなるべく画像メインでプロパティーの使い方を紹介したいと思います！ ↑私が10年以上利用している会計ソフト！ 動画で学ぶCSS Flexbox この記事はYouTube動画でも解説しています。動画派の
Keiyaku CSS
Keiyaku CSS Crazy Style Formatter for Japanese Contract Document Unfortunately, the style in Japanese contract document is totally crazy. I hope this CSS library cures that a bit: write a document logically structured in markdown or HTML, apply keiyaku-css to it then, you’ll get a well-formed document good luck! 概要 Keiyaku CSS（以下、「本件ライブラリ」という。）は、Markdownで書かれた契約文書を、適切な印刷書式にスタイリングするための、CSSライブラリです。 ユ
【HTML】Tableの幅を固定する
みなさん、こんにちは。 先日、HTMLのTableで思い通りに表示がされず、 少々悩んだことがありましたので、 今回はその解決方法を載せたいと思います。 まず、以下のようなTableがあったとします。 ◇CSS table{ border:1px solid #666666; border-collapse:collapse; } td,th{ border:1px solid #666666; } ◇Table 部署 氏名 このTableを以下の要件で改修します。 1.Tableの幅は固定 2.セルの内容は1行で表示させる 3.表示しきれない分は切り落としてしまって構わない まず、幅を固定化させるために、 Table、th、tdに対してwidthを指定します。 次に、内容によって幅が広がってしまうことを防ぐ為に、 Tableに対してtable-layout:fixedを指定します。 ここ
【スマホ版】はてなブログのヘッダー部分のカスタマイズ方法まとめ（グローバルナビ・フォント変更・デフォルト表示削除など） - Awesome
狭間純平@junpei_hazamaです。 最近いろんなサイトを参考にさせていただきながら、当ブログのカスタマイズをいじいじしまくっています。先人の知恵ってすごい！ というわけで今回ははてなブログのスマホ表示のヘッダー部分についてのカスタマイズを説明していきます。これからカスタマイズを考えている人はぜひ参考にしてみてください〜 はじめに注意！ ・基本的に無料版ではなく、有料版のProの方向けの記事です。 ・この記事ではPC版とは別にコードを記入していくため、レスポンシブ設定は解除しておいて下さい。解除の仕方ははてなブログ管理画面から「デザイン」→「スマートフォン」→「詳細設定」でチェックをはずせば完了です。 ・また、スマホの設定画面ではCSSデザインを書き込むスペースがありませんが、「スマートフォン」→「ヘッダ」→「タイトル下」に以下のコードを書き込むことでCSSコードが反映されるようにな
とほほのBootstrap 3入門 - とほほのWWW入門
このページは 「Bootstrap 3」について説明しています。Bootstrap 4 については、「Bootstrap 4入門」を参照してください。 Bootstrap は、スマートフォンなどのモバイル端末にも対応し、レスポンシブデザインを採用した HTML, CSS, JavaScript フレームワークです。 Twitter 社で開発され、最初は「Twitter Bootstrap」と呼ばれていましたが、現在は「Bootstrap」となりました。 ライセンスは MIT License で、商用利用も可能です。 現時点(2018年5月6日)の最新バージョンは 4.1.1 です。 Bootstrap 2 と Bootstrap 3 以降では一部互換性の無い機能があります。 2018年1月に Bootstrap 4 も正式リリースされました。
【CSS】Googleが公開したUI/UXライブラリ「Material Design Lite」を試してみた | unitopi - ユニトピ -
Androidをはじめ、Googleサービスで導入されているMaterial Design（マテリアルデザイン）のUI/UXを簡単に使うことができるライブラリが公開されました。 配布元はGoogleで、Material Design Liteと呼ばれるライブラリです。 CSS font Javascript のライブラリです。 早速使い方と使用例を見て行きたいと思います。 ダウンロード Material Design Lite 上記URLからどうぞ。 DLが済んだら配置し、以下のように指定してあげます。 <link rel="stylesheet" href="./material.min.css"> <script src="./material.min.js"></script> <link rel="stylesheet" href="//fonts.googleapis.com/i
CSSで泥沼にはまらない3つのアプローチ｜『プロとして恥ずかしくない 新・WEBデザインの大原則』発売記念イベント
注釈 60分のセミナー用のスライドです 60分間ひたすらしゃべるための資料なので、目次はありません セミナーのフォローアップのために公開しています 文字が大きいのは、会場の後ろの席でも見えるようにするためです Cascading Style Sheets .header { margin: 8px; color: #f00; } マジックナンバーの良くない例 .main { float: left; width: 640px; } .main h1 { width: 640px; } .main p { width: 640px; } .main ul li { width: 620px; margin-left: 20px; } 数値が乱立 .aaa { width: 640px; } .bbb { width: 324px; } .ccc { width: 216px; } .ddd
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
