タグ

CSSとhtmlに関するraysatoのブックマーク (17)

  • とほほの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 も正式リリースされました。

  • かつてはJavaScriptを利用していたものの、今ではCSSのみで実装できる10の小技

    2015年3月18日 CSS 2011年に「少しのコードで実装可能な20のjQuery小技集」という記事で数々の便利な制作技を紹介したのですが、時は流れ、今ではCSSのみで表現できるものが多くなってきました。という事で今回はその記事内で紹介した技を中心に、かつてはJavaScriptを利用していたものの、今ではCSSのみで実装できる小技を紹介します。 ↑私が10年以上利用している会計ソフト! 目次 Div全体をクリックできるようにする テーブルの偶数・奇数の行の色を変える フォームにテキストを入れておき、フォーカスで消す(文字色も変更) ラジオボタンとチェックボックスを装飾する スライドパネル アコーディオン ツールチップ 言語によってスタイルを変更 横並びのdivの高さ揃える ボックスを上下左右中央に配置する それでは実際にどんな事ができるのか見てみましょう!サンプルも作ったのでコードと

    かつてはJavaScriptを利用していたものの、今ではCSSのみで実装できる10の小技
  • [CSS]多階層のリスト要素をツリー状にデザインするスタイルシートのテクニック

    画像を使用せずに、多階層のリストをツリー状にデザインするスタイルシートのテクニックを紹介します。 ピュアCSSなので、リストのアイテムは増やしても減らしても、ツリー状のスタイルを適用できます。 Parent child vertical list menu コードはこんな感じです。 HTML リストは階層ごとに入れ子を使用します。 コードは、CodeのjQueryまで。 <nav class="nav"> <ul class=list> <li> <a href="#">Home</a> <ul> <li> <a href="#">Lab</a> <ul> <li> <a href="#">Code</a> <ul> <li> <a href="#">Html</a> </li> <li> <a href="#">Css</a> </li> <li> <a href="#">Jquery<

  • HTTPリクエストを減らすために【序章】HTTPリクエストは甘え - MOL

    このシリーズはHTTPリクエストの理解を通じてWebパフォーマンスの重要性について考える5章構成になっている。 【序章】HTTPリクエストは甘え 【CSS Sprite編】スプライト地獄からの解放 【WebFont編】ドラッグ&ドロップしてコマンド叩いてウェーイ 【DataURI編】遅延ロードでレンダリングブロックを回避 【終章】我々には1000msの猶予しか残されていない 1日目は、HTTPリクエストの概要について説明する。 例えに、私のポートフォリオページ(t32k.me)が表示されるまでの流れを見ていく。まず、検索からでも方法はなんでもよいが、ブラウザのURLバーにt32k.meと打ち込んでアクセスする。そのページを見にいくということは、つまりt32k.meに対してHTTPスキームでリクエストするということを意味している。 クライアントであるブラウザは入力されたURLを判断して、リソ

  • Bootstrapベースの管理画面用テンプレート·Charisma MOONGIFT

    CharismaはHTML5/JavaScript製のオープンソース・ソフトウェア(Apache Licnese 2.0)です。 Webシステム開発において意外と不遇なのが管理画面です。内部の人が使うものなので適当に作られるケースが多くなります。そこで使ってみたいのがCharismaです。リッチな管理画面をBoostrapをベースに作り上げる事ができます。 ウィジェットがついた、リッチな管理画面です。ここまで恵まれているケースは早々ないでしょう。 ドラッグ&ドロップによる配置変更もサポート。 折り畳んで隠す事もできます。 グリッドは細かくサポートされています。 カレンダー。システム内部のデータをマッピングすると見通しが良くなりそうです。 メンバー一覧。検索やラベルもあって便利そうです。 ギャラリー。サムネイル写真をきれいに並べています。 タイポグラフィ。様々なタグをサポートしているので奇麗

    Bootstrapベースの管理画面用テンプレート·Charisma MOONGIFT
  • スマフォサイトでよく見るパーツのコードサンプル集 | 07design.blog

    最近スマートフォンサイトの案件が増えてきました。そこで、個人的によく使いそうなコードをEvernoteにまとめたりしていたのですが、 まだまだスマフォサイト構築のノウハウ記事も少ないですし、共有しておこうと思います。…最近スマートフォンサイトの案件が増えてきました。 そこで、個人的によく使いそうなコードをEvernoteにまとめたりしていたのですが、 まだまだスマフォサイト構築のノウハウ記事も少ないですし、共有しておこうと思います。 すべてのデモ(chromeなどのwebkit系ブラウザまたはスマートフォン実機でご覧ください) download ヘッダーの右にメニュー <h3>ヘッダーの右にメニュー</h3> <!--ヘッダーの右にメニュー--> <header class="header1"> <h1><a href="#"><img src="title.png" alt="SIT

  • WordPressではじめてテーマをカスタマイズ・自作するときありがちな10のつまずき – VIVID COLORS + BLOG -福岡から東京に出てきたデザイナーのブログ-

    今回は【WordPressではじめてテーマをカスタマイズ・自作するときありがちなに10のつまずき】ということで、テーマをカスタマイズや自作していく際、まず最初につまずくであろうポイントを10個、できるだけ簡単にわかりやすく解説してみました。 全部私が実際最初につまずいたポイントなので、きっとはじめてカスタマイズするかたのお役にたてるはず…! テーマカスタマイズの基礎の基礎編です。 テーマファイルを開いてみて、なにがわからないのかすらわからなくてカスタマイズを断念した、というような方にぜひ見ていただきたいエントリーです。 ざっくり概要がつかめれば、「なにがわからないのかわからない状態」が解消されるので、あとは自分で調べて理解していけるようになるんじゃないかな、と思います。 とりあえず一から作るのは大変だから既存テーマをいじって勉強したい。 今使ってるテーマのヘッダーをオリジナルの画像にしたり

    WordPressではじめてテーマをカスタマイズ・自作するときありがちな10のつまずき – VIVID COLORS + BLOG -福岡から東京に出てきたデザイナーのブログ-
  • Webアクセシビリティ - asa nisi masa

    Webアクセシビリティの指針と検証方法を調べたメモ ※アクセシビリティのみにフォーカスしており、「よいWeb画面」との間にはギャップがある点に注意。 プラクティス (必須)指針に目を通し、概要と重要度が高いものの対策を理解して開発 (任意)静的解析ツールとして、富士通アクセシビリティ・アシスタンスを使用する。 どなたかのサイト http://as.alpha-color.com/Tools.html 規格、指針 JIS規格 http://www.jisc.go.jp/app/JPS/JPSO0020.htmlより閲覧可能(ダウンロードや印刷はできない) JISX8341-X(JIS高齢者・障害者等配慮設計指針−情報通信における機器,ソフトウェア及びサービス) 第1部:共通指針 第2部:情報処理装置 第3部:ウェブコンテンツ 特に第3部は、具体例が豊富なので、画面デザインのガイドラインとして

    Webアクセシビリティ - asa nisi masa
  • jsdo.it

    Come creare il miglior gioco da casinò Quando si progetta un gioco da casinò, la prima cosa che devi considerare è che tipo di gioco sarà. Ci sono molti diversi tipi di giochi da casinò, dalle slot e video poker ai giochi da tavolo e giochi di carte. Dovrai decidere quale tipo di gioco si adatta meglio alle tue esigenze. Ogni tipo di gioco ha il proprio set di regole e regolamenti, quindi dovrai a

  • テーマの作成 - WordPress Codex 日本語版

    WordPress テーマは、WordPress のテーマディレクトリ (デフォルトでは wp-content/themes/) の中のサブディレクトリに存在します。themes ディレクトリの場所は wp-config.phpを使って移動することはできません/en)。サブディレクトリ (テーマフォルダ) には、スタイルシートファイル、テンプレートファイル、オプションの関数ファイル (functions.php)、JavaScript ファイル画像といったものが含まれています。例えば、「test」というテーマは、wp-content/themes/test/ ディレクトリにあります。テーマ名に数字を入れるとテーマ管理画面の利用可能なテーマ一覧に表示されないので避けましょう。 新しくインストールされた WordPress にはデフォルトテーマが同梱されています。デフォルトテーマのファイルを詳

  • Aptana

    From development to deployment, Aptana provides unprecedented ease for your favorite Web app platforms. Web app development with Web 2.0 smarts. Web app deployment and management made simple and scalable. Simplify building Web apps by using Ajax server-side too. Download Now Early Access Program Get Jaxer

  • ハイパーテキストリンクのスタイル大全

    ハイパーテキストリンクをデザインする上で知っておきたい基礎知識から、実用的なチップス、やってはいけない間違いなど、すぐに役立つテクニックをSmashing Magazineから紹介します。 The Definitive Guide To Styling Web Links 以下は、各ポイントを意訳したものです。 はじめに ハイパーテキストリンク(リンク)はウェブページをつなぎます。Web Standardistasによると「ハイパーテキストリンク無しではウェブはウェブではなく、それはただ別個の、無関係なページのコレクションでしょう」と言っています。 我々はページにたどり着いたら、ある種のリンクをクリックする必然性があります。 1. CSSのセレクタと擬似クラス リンクをスタイルする時には、ユーザーはページを流し読みすることを忘れないでください。そのため、リンク箇所はしっかりと明示すべきです

  • 続・先取り! Google Chrome Extensions 記事一覧 | gihyo.jp

    運営元のロゴ Copyright © 2007-2024 All Rights Reserved by Gijutsu-Hyoron Co., Ltd. ページ内容の全部あるいは一部を無断で利用することを禁止します⁠。個別にライセンスが設定されている記事等はそのライセンスに従います。

    続・先取り! Google Chrome Extensions 記事一覧 | gihyo.jp
  • PrimerCSS

    Primer undercoats your CSS by pulling out all of your classes and id's and placing them into a starter stylesheet. Paste your HTML in to get started. Made for you with love and care by @luckystrikes and @wades. Notice: Undefined index: htmlsrc in /home/ypp7m8mtix54/domains/primercss.com/html/index.php on line 43

  • CssCreator->Page Layout

    About the CSS Layout Generator The CSS Layout Generator was first released by Tony Aslett in October 2003, since then over 871,000 layouts have been generated. Updated in November 2010, HTML5 doctype can now be selected and a simple HTML5 template with appropriate tags will be created. Other HTML and XHTML doctypes are still available. The generator helps you create the structure of your website t

  • intensivstation :: CSS Templates :: Templates

    NEW dynamic basic CSS TEMPLATES 07 at the moment just in german avalible All templates are XHTML 1.0 and CSS2. Basic CSS TEMPLATES 2 columns fixed centered 3 columns fixed centered Freeflux Templates Special Templates for FLUX CMS Border Trick TEMPLATES 2 columns fixed centered 3 columns fixed centered CSS TEMPLATES AND SAMPLES Menu and content dynamic Menu fixed, Content dynamic Menu and c

  • Layout Gala: a collection of 40 CSS layouts based on the same markup and ready for download!

    by Alessandro Fulciniti In November 2005 I presented on pro.html.it a three-part article on creating CSS layouts using techniques like negative margins, any order columns and in some case opposite floats. The main goal of the article was getting the maximum number of layouts based on the same markup, each with valid CSS and HTML, without hacks nor workaround and a good cross-browser compatibility.

  • 1