Keep Margins Out of Link Lists 下記は各ポイントを意訳したものです。 HTML:スタイルシート無しの状態 CSS:リンクをブロックレベルに CSS:さらによい実装方法 [ad#ad-2] HTML:スタイルシート無しの状態 HTMLは非常にシンプルです。 文字数の異なるテキストリンクをリスト要素で実装します。 HTML <ul> <li><a href="#">リスト1</a></li> <li><a href="#">リストリストリスト2</a></li> <li><a href="#">リストリスト3</a></li> </ul> デモページ(当方作成) リストのアイテムはブロックレベル、リンクはインラインレベルになり、リンクのクリックできる領域はテキストの長さに依存するため、小さく窮屈なものになっています。 CSS:リンクをブロックレベルに a要素をブロ
サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキスト サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキス
幅は%で指定した可変、高さはそれぞれ異なるカラムを使ったレイアウトで、スタイルシートを使用してカラムの高さを等しくする今までの方法から、これからの方法までを紹介します。 Fluid Width Equal Height Columns [ad#ad-2] 下記は各ポイントを意訳したものです。 Doug Neiner メソッド Nicolas Gallagher メソッド Using Tables One True Layout メソッド Flexbox メソッド メモ 訳者注 各デモは「:nth-child」を使用しているため、モダンブラウザのみ期待通りに表示します。詳しくは「メモ」を参照ください。 Doug Neiner メソッド 「Doug Neiner」メソッドは、CSS3グラデーションからアイデアを得た方法です。 [css] .five-columns { background-i
CSS でのレイアウト、段組み作りがとっても簡単にできる、CSS グリッドシステムをご紹介。既に使っている人もたくさんいるとは思いますが、未体験の人はぜひ試してみてくださいね! Web デザインに欠かせない、CSS でのレイアウト作り。コンテナ作って、ここにラッパー作って、メインが 600px で padding が 20px だから、サイドバーが、えーと … なんてことになりがちです。そんな面倒な作業がイヤだなーという人におすすめなのが、CSSグリッドシステム。全ての Web デザインに使える訳ではありませんが、結構重宝します。すでに使っている人もたくさんいると思いますが、こんな方法もあるんだよーということでご紹介します。 1. CSSグリッドシステムとは? CSS グリッドシステムというのは、レイアウトを均等に分けて、マス目上に考えるレイアウト。何が便利かっていうと、この段は4等分にし
Make a ‘View Source’ Button | CSS-Tricks 技術サイト等で使えそうなページ内に設置する「ソースを見る」ボタンの実装例。 なんらかのライブラリを配布する際やコードの動作を紹介するデモページなんかに導入しておくと利用者に親切かも。 ボタンクリックでLightBox風にソースを表示させることができ、きちんとハイライトもされた状態になっています。デザインもなかなかいい感じ。 ファイルのダウンロードも可能ですので比較的簡単に実装できますね。 firefoxやChromeでは、view-source:http://〜みたいにするとソースコードを見るページにリンクできますが、そうした方法での実装法も紹介されています。 関連エントリ ブラウザ上で動作するソースコードエディタ『Edit Area』 ブラウザ上でソースコード編集が可能な開発環境を提供「ecoder」
Five Useful Design Techniques and Coding Solutions For Web Designers [ad#ad-2] 下記は各ポイントを意訳したものです。 PHPはWordPressでのものとなっています。 1. 複数の項目がある棒グラフのエフェクト 2. ホバー時に追加情報を表示 3. カテゴリごとに異なるカラーを適用 4. ちょっと面白い画像のキャプション 5. ウェブのための印刷風デザイン おわりに -developersではなく、designers 1. 複数の項目がある棒グラフのエフェクト 下記のサイトで使用している棒グラフでは、上:タグの種類と数、下:コメントのついた記事と数、をそれぞれ素晴らしいエフェクトで実装しています。 こういった数値化されたデータは、ユーザーに対して有用なコンテンツの手がかりを提供し、ユーザビリティを改善することに
LoRa 開発シールドのデータを enebular で受け取る By hrd_pk|5月 9, 2017|未分類, | 花粉がまだ名残惜しく思っているようで、鼻がまだむずむずしています。 ぽかぽか陽気が続いていますが、みなさんいかがお過ごし… Read More
Photoshop風のインターフェイスを備えた、とっても使いやすいCSSグラデーションを作成するオンラインジェネレーターを紹介します。 Ultimate CSS Gradient Generator [ad#ad-2] 生成されるスタイルシートは、moz系(Firefoxなど)、webkit系(Chrome, Safariなど)だけでなく、旧ブラウザやIE用のfilterも生成されます。 生成されたスタイルシートの例 background: #eeeeee; /* old browsers */ background: -moz-linear-gradient(top, #eeeeee 0%, #5E5E5E 42%, #cccccc 70%, #cccccc 87%); /* firefox */ background: -webkit-gradient(linear, left top
Firefoxユーザーの時に使用していた CSSViewerを今更Chromeに入れて みました。やはり便利ですね、これ。 シンプルなので高機能を求めない方 にお勧めです。サクッと使えるのが いいですね。 ブックマークレットににたようなのあった気がするんですけど、これはこれで便利なのでお勧めです。 インストールするとアイコンが出るのでクリック後に見たい要素にマウス持っていけば、そこに指定されたcss見れます。 こんな感じ。テキスト、カラーなどで分けてくれているのも地味に良いですね。 Web制作の方に良さそうですよ。動作も軽いし、Firebug使うほどでもない、的な時にサクッと使えて便利です。 CSSViewer
CodeBurnerはFirefox/Adobe AIR/Mac OSX用のフリーウェア。Webデザイナー、プログラマーであれば開発中にリファレンスが見たくなることが多いはずだ。都度Webサイトを検索しても良いが、手軽に使えるリファレンスが手元にあると便利だ。 HTMLタグの検索 特にブラウザ間の誤差があるプロパティなのか否かといった情報は重要だ。そうした情報をつかんでおけばデザインが開発がスムーズになる。多様なプラットフォームに対応しているのがCodeBurnerだ。 CodeBurnerはHTML/CSSのリファレンスを多数のプラットフォームを使って提供している。FirefoxとFirebug向けをはじめ、Adobe AIR、OSX Dashboard、Operaが現在提供されており、今後Dreamweaver版が提供予定になっている。 ソースをクリックすると説明が出る 2ペインの画面
マークアップエンジニア(以下、ME)のtacamyです!(`・ω・´) カヤックでは、デザイナーもHTMLコーディングをしてくれています。 (いつもありがとうございます!) そんなワケで、本格的にHTMLコーディングはしないけど、 ちょこっとしたページなら組みますっていうデザイナー向けの、 「コレだけ読めばすぐできる」シリーズを始めました。 第一回は「携帯コーディング」についてです。 携帯はPCとは全くの別物なので、なんとなく敬遠しがちですが、 最低限の内容であれば覚えることも少ないですし、 一度覚えてしまえばスタンダードがしばらく変わらないので、覚えておいて損はないですよ! 携帯コーディングの基本 基礎の基礎 文字コードはShift-JIS CSSはインラインで指定(タグに直接style属性を追加する) 画像を含むページ容量100KB以内(HTML自体の容量は9KB以内) 画像はgifか
はじめに ご使用上の注意 (1) 主な更新履歴 (25) 管理者へのメール (1) 自己紹介 (1) 基本編 用語集 (82) Webページ作成入門 (7) 逆引きリファレンス (32) フォーマット HTML (402) HTML5 (7) XHTML (1) MathML (1) DTD (1) JSON (1) SVG (1) VML (1) GIF (1) CSV (1) セマンティック・ウェブ (1) CSS CSS (ABC順)(719) Bootstrap (61) Less (1) Sass (1) Tailwind CSS (1) CSSフレームワーク (1) リセットCSS (1) プログラミング言語 JavaScript (42) TypeScript (1) Java (26) Perl (6) PHP (14) Ruby (11) Python (14) Go言語
Complete Toolbox: 55 CSS Menu And Button Coding Tutorials クールなメニューやボタンを実装するCSSチュートリアル55。 多数あるので、メニューやボタン実装に迷った際のショーケース的に使うことができそうです。 ナビゲーションといっても様々なアプローチがあって見ているだけでも面白いです。 関連エントリ ドロップダウンメニューのデザインネタ帳 1枚の画像でハイライトする画像メニュー作成が可能なjQueryプラグイン「imagineMenu」 セクシーなドロップダウンメニュー実装サンプル ビローンと伸びるドロップダウンメニュー実装jQueryサンプル
PrimaryCSS 22のレイアウトが収まったCSSフレームワーク「PrimaryCSS」。 単体のCSSで予め用意されている22のレイアウトを簡単に実装できるものです。 レイアウトの種類は沢山あります。幅は固定されているので好みに応じて一括置換すればよいでしょう。 サイト上でHTMLコードの発行もできるので、サクッと複雑な段組レイアウトを作成したいような場合に便利そうです。 関連エントリ 42個のフリーCSSレイアウト-サンプル集「Free Faux Column CSS Layouts」 複雑なCSSレイアウトもサクッと実装できるCSSフレームワーク「emastic」 使えるCSSレイアウトテンプレート集「mycelly.com」 レイアウト作成に役立つCSSグリッドレイアウトジェネレーター集
10 examples of futuristic CSS3 techniques 近未来に頻繁に使われるであろうCSS3サンプルがまとまっていました。 本ブログで以前に紹介したものも多いですが、まとまっていて便利そうだったのでご紹介。 吹き出しをCSSオンリーで実装 シャドウ&グラデーション付きの立体ボタン 枠付き写真をCSSで実装 ポラロイド写真風 角丸ファンシーなフォーム実装 立体的なドロップダウンメニュー MacOSのインタフェースをCSSで実装 近未来においては、こうしたものを組み合わせつつ更にJavaScript等とも組み合わさって今では信じられないインタフェースになっていそうな気がします。 1990年代後半の時代を振り返ってみると、あの当時当たり前だったサイトが一部のサイトで見られるものになるような、同じような状態になっているのかも。 関連エントリ CSS3等を使ったサンプル
HTML5+CSS3の環境で汎用的に利用できるHTML・スタイルシート・スクリプトなどのファイルを一式にまとめたテンプレートを紹介します。 ファイル構成:コメント無し版 各ファイルの説明 index.html HTML5の要素を配置した汎用的に利用できるHTMLファイル。各スタイルシートファイルも埋め込まれています。 css/main.css @import用のスタイルシートです。 css/reset.css Eric Meyerの「Reset CSS」です。 css/core.css ベースとなるスタイルが定義されています。 css/_patches 各ブラウザ用のスタイルシートです。 css/_print プリント用のスタイルシートです。 js Modernizrがセットされています。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く