今時のトレンドがうまく取り入れられ、高品質にデザインされたレスポンシブ対応のランディングページ、プロダクトページ、縦長ページ、ポートフォリオ、ブログなど、HTML5/CSS3で作成された商用利用無料のテンプレートを紹介します。 レスポンシブ時のレイアウトの変化、気持ちいい繊細なアニメーションなど勉強にもなりますね。
理解しておきたい、CSSによるインラインレイアウトの仕組み(inline-block編)Inline Layout─Frontrend Conference 高津戸壮(株式会社ピクセルグリッド) この記事は、Frontrend Conferenceのセッション「Inline layout」でお話させていただいた内容を基に、連載記事(全4回)として書き起こしたものです。今回は第4回目、最終回です。 背景画像でリストのビュレットを配置した場合の問題 今回は、前回までの内容を踏まえ、主にインラインブロックについて見ていきます。まずは、以下のようなリストを「HTMLとCSSで作りたい」と思います。この時、リストのビュレットはオリジナルの画像にしたいです。 こんな時、背景画像を利用し、以下のような方法でこの見栄えを再現するという方は多いでしょう。筆者も昔からずっと、この方法で実装してきました。
TL;DR 実務で意外と使う基本的なものやトリッキーな小技。少ない記述で済む CSS テクニックなどをまとめました。今回は Web 制作に関わるなら、必ずおさえておきたいものや今後使っていきたいテクニック中心です。 画像 1.画像の下にできる隙間をなくす 画像の下に色などを配置すると、わずかに隙間が出来ることがあります。そんな時は親ブロックにline-height: 0;で OK。他には画像に直接vertical-align: bottom;かdisplay:block;を使えます。 css 画像の下にできる隙間をなくす方法 2.画像の下にテキストが回り込まないようにする 回り込み解除は親要素か以下の例だとテキストにoverflow: hidden;かoverflow: auto;を指定します。IE 対策で zoom 属性 zoom:1;も同時に設定します。 css 3.float を使わ
WordPressのテーマによっては最初から蛍光ペン風のマーカーが付いていることがあります。 その場合は設定する必要はありません。 設定されていない方向けに書いています。 蛍光ペンマーカーを設定(CSS) まずはCSSの設定からスタート。 蛍光ペンマーカーのCSSは「linear-gradient()属性」を使います。 linear-gradient(transparent 線の太さ, 線の色 0%) このlinear-gradient属性、グラデーションを使って設定します。 ()内の線の太さと線の色を好みの色と太さに変更するだけでOK。 線の太さと線の色の意味は下の通りになります。 線の太さ 黄色の蛍光ペン(太) .marker_yellow_futo { background: linear-gradient(transparent 0%, #ffff66 0%); } 黄色の蛍光ペン
Crescent Eve はシンプルなエディタです。 こだわりの基本機能とHTML編集機能を持っています。 【雑談】 ある日のふとした疑問 ~ HTMLを書く道具 ~ ある日、メモ帳等のテキストエディタでHTML書いている人が意外に多いことに気がつきました。 「多機能で優秀なHTMLエディタは沢山あるのに、なぜかな」 「もしかして、軽くてシンプルなSDI形式のHTMLエディタが求められているのだろうか」 「よし、作ってみよう!」 「あくまでシンプルに、テキストエディタとしても使えるようにして、タグはキーボードから自然に入力補完できるようにしよう」 「手作業でタグを打ち込んだら間違いが出るから、文法チェック機能をつけよう」 「文字コードの自動認識は、絶対失敗しないようにしよう」 ・・・というような考えから Crescent Eveを開発することにしました。 その後 公開以来、多くの方に好評を
本ガイドラインは、バーンワークス株式会社が行う Web サイト制作全般においての品質を保持するために定めたものである。当社は本ガイドラインに基づいた制作を行い、クライアントに対して常に安定した品質のサービス、及び納品物を提供する。 Last modified 2023-10-18 ディレクターはクライアントから指定の Web サイト要件を満たし、Web サイトのビジネスゴールを達成するため、適切な情報提供、提案を行う、また Web サイトの情報設計からプロジェクトの進行管理、プロジェクトメンバーの業務管理、納品物の品質管理を適切に行うものとする。 ディレクターはクライアントを含めプロジェクトメンバー間でのコミュニケーションを積極的に取ることで円滑なプロジェクト進行を心がける。また、クライアントに対しては進捗の報告、情報共有を適時、および明確に行い、信頼関係の構築に努める。 新規 Web サ
(2014-06-09 ... 18) Bootstrap 3の学習記録ノートです。 できるだけ手を抜かず隅々まできちんと調査し、コードはほぼ全て実際に試して確認しました。 元々公開を意図したものではありませんが、ここまで詳細に調べた資料はそうはないと思いますので最低限の体裁を整えて公開します。みなさんのお役に立てば幸いです。 なおHTML部分はほぼ全てjadeで記述しています。jadeを知らないと理解できないノートになってしまっていますが、生のHTMLではとてもこのスピードでは学習できません。どうかご了承下さい。 なお「ここは違うのでは」「こうした方がよいのでは」などという点がありましたらGitHubのissuesかpull requestなどでお教え頂けるとありがたいです(6/19記)。 (Qiita用に追加) Qiitaコメントでのご指摘も歓迎します。 その後しばらくしてバージョンが
地味な離島ライター内藤です。普段はコーダーとして仕事をしていますが、たまにはデザイナーさんのように人の目に触れる仕事もしてみたい! そこで本日は、日々の業務で見かけてこれは使えるぞと思ったtableを、独自に再構築してソースコードを公開しようと思います。 table作成時に参考になるサイト 本題に入る、その前に。XPの公式サポートも終了し、HTML5+CSS3の普及が進んでいます。今更ながら、この技術でどんなtableが実現できるのか、とてもわかりやすく説明されていたサイトをまずご紹介します。 table専門参考ページ4選 table専門の参考ページを4つほど選んでみました。 CSS3を使って美しく装飾されたテーブルの作り方|Webpark CSS3でのtableの作り方を、見た目とソースから解説してあります。 テーブル|CSSデザイン|スタイルシート(CSS)|PHP & JavaScr
Webページの制作に携わったことがあるならCSSも扱ったことがあるだろう。当初は小さかったCSSファイルも、デザインの変更や調整を続けるうちに、どんどん大きくなっていき、簡単には全体を見渡すことができなくなる。既存のデザインが崩れたりパラメータ間の調整を取るため、既存のCSSには手を加えずに新しいスタイルを追加していくことになるため、ファイルはどんどん大きくなっていく。 こうした状況はCSSファイルのメンテナンスという観点からはあまり好ましいものとはいえない。編集を繰り返していくうちに、すでに使われなくなっているスタイルもあるだろう。そうしたスタイルはできれば削除した方が、ファイルの中身の見通しがよくなる。そんな場合に活用できるツールがThe David Walsh Blogの記事「uncss: Find Unused CSS」において紹介された。 紹介されているツールは「uncss」とい
scrollUp jQuery plugin 今や定番となっている「スクロールアップ」ボタン。スクロールしているとあらわれて、クリックするとトップへするするとスクロールしてくれるというボタンです。 インターネットで検索すると様々な「スクロールアップ」ボタンを見つけることができて、迷ってしまいます。 いろいろなシーンに合わせて簡単に利用できて、エフェクトも綺麗なjQueryプラグイン「scrollUp jQuery plugin」がオススメです。 サンプルを作ってみました。 上へスクロールさせるならいろんなシーンで使えるjQueryプラグイン「scrollUp jQuery plugin」サンプル 今のホームページにそのまま組み込むだけで、「スクロールアップ」ボタンの設置が出来ますのでとても簡単で便利です。 設置方法は続きをどうぞ。 【使用方法】 こちらの「scrollUp jQuery p
今日は土曜日なので、軽めの記事を投稿させていただきます。以前紹介した[CSSだけで作るtableデザインテクニック]の続編です。今回はCSSだけで作るテーブル2つと、おまけとしてCSS+ちょっとした画像で作るテーブルを紹介させていただきます! こんなに朝早くから投稿した理由は、これから新潟に旅行に行くからです!!予約投稿すればよかったんですが、ちょっと手直しをしたかった所があったので、ついでに投稿しちゃいました! 気に入っていただけましたら自由に使ってください。シンプルなデザインですのでカスタマイズもしやすくなっていると思います。ではどうぞ! CSSテーブルデザインテクニック01 HTML テクニック01 <table> <tr> <th class="t_top">No.</th> <th class="t_top">table title01</th> <th class="t_top
スマートフォンサイトを制作する際、個人的に覚えておいた方が良いと思うCSSのプロパティやテクニックをまとめてみました。 自分用の備忘録ではありますが、他のブログ等でも取り上げられていることが多いので、いずれも覚えておいて損はないものだと思います。 普段から制作している方にとっては目新しいのはないと思いますが、まだスマートフォンサイトを制作したことがない方やまだまだ苦手だなと思う方は参考にしてみてください。 UA切り替え・Viewport指定・拡大縮小の有無・電話番号リンクの無効化・ホーム画面用のアイコン指定など、スマートフォンサイトを制作する際に最低限覚えておくべきと思うことは他にも沢山あるんですが、今回はCSSに焦点を当てています。 また、タイトルでは「スマートフォンサイト制作時」としてはいますが、レスポンシブWebデザイン制作時でも頻繁に使うものだったり、PCサイト制作時でもCSS3に
実際に使用したものやいつか使うかもと思ったものをJSFiddleやEvernoteなんかでバラバラにメモしていたのですが、それらの中でよく使いそうなものを一覧化したものが欲しかったのでまとめました。 今となっては様々なところで用いられていますし、もっと凄くて面白い動きを実装しているチュートリアルなんかも沢山見かけますが、個人的に汎用性高いと思うもの中心です。 対象ブラウザに古いIEなどが含まれている場合はもちろん使えませんが、いずれもjQueryや画像などを一切使用せずにデザインやアニメーションも全てCSSのみで実装しているものです。 また、同様にCSSのみでクリエイティブなボタンデザインやエフェクトを実装できるエントリーや便利なジェネレータツールなども備忘録兼ねて併せて紹介します。 CSS3を多用しているため、ブラウザ(特にIE7・IE8など)によっては動きや見栄えが説明と異なる場合があ
tableやtr、tdなどのテーブル関連のタグのdsiplayプロパティを変更することでデザインを変更します。 tableタグのdisplayの値はデフォルトではtable、tdやthタグはtable-cellといった具合ですが、この値をblockやlist-itemなど他の値に変えます。 @media only screen and (max-width:420px){ tbody tr{ display: block; margin-bottom: 1.5em; } tbody th, tbody td{ display: list-item; border: none; } ..... } Chrome、Safari、Firefox対応。 IEではTableのdisplayを変更しても表示は変わらないようなので非対応です。 条件分岐コメントを使ってIEにはメディアクエリを読ませないよ
作成:2013/11/25 更新:2014/10/24 Webデザイン > 先週WordPressの自作テーマを作っていたときに、もっとCSSで効率化できないものかと、色々調べてたら結構使ってないものがありました。出来るだけ短縮できるところは短縮したいので、今回はCSSの中でもサイトを作る上で「知っておくと効率的」なものをまとめました。 エンジニア速報は Twitter の@commteで配信しています。 もくじ 知っておきたいプロパティ 1.カウント数を出力 2.要素の前後に文字や画像 3.カーニング 4.画像フィルタ 5.均等幅にレイアウト 6.アニメーション一覧 スマホサイト対策 7.viewport 8.改行削除 9.Webクリップアイコン 10.UIリセット/入力フィールド拡張 11.横並び 12.ボタンサンプル 13.画像を使わない矢印 14.自動改行 15.はみ出しを隠す 1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く