CSSでやりたかったことが数行のコードで実装できるスタイルシートの小技のまとめ -CSS Protips
リスト要素で実装したアイテム間の区切り線の最後だけ取り除く簡単なコード、リストの各アイテムをカンマ区切りで配置させるコード、テキスト表示をすべてのデバイスで最適化するコードなど、サイトやブログに役立つ便利なCSSのテクニックを紹介します。 CSS Protips -GitHub 当記事は、2015/11/4に公開した記事に追加分を加えたものです。 更新: 2016/3/7 13, 14, 15を追加。 更新: 2016/4/13 16, 17を追加。 CSS ProtipsのライセンスはCC0 1.0で、個人でも商用でも無料で利用できます。 スタイルシートの対応ブラウザはChrome, Firefox, Safari, Edge, IE11です。 1. リスト要素の最後だけ区切り線を削除 2. body要素に「line-height」を加える 3. 天地の中央に配置 4. リストをカンマ区
Web制作者は要ブックマーク！制作時にいろいろと役立つ便利サイトのまとめ
Web制作時に、あれ？なんだっけな？って時に役立つ便利サイトを紹介します。 HTML5やCSS3の各ブラウザのバージョンごとのサポート状況、スクリーンサイズやデバイスごとのMedia Queriesの書き方、Bootstrap, Foundationなど各フレームワークの対応ブラウザやライセンス、ブラウザの各バージョンごとのCSS Hackなど、いざという時に役立つサイトばかりです。 Can I Use...Support tables for HTML5, CSS3 Can I Useは先月くらいにUIを刷新し、より使いやすくなりました。デスクトップ・モバイル用の各ブラウザでのバージョンごとのHTML5, CSS3のサポート状況がそれぞれ詳しく分かります。
大きな背景画像を使った魅力的なWebサイトを作ろう
2014年9月9日 CSS, Webデザイン 以前このブログで背景に動画を使ったWebサイトの作り方を紹介しましたが、やはり動画を準備するのは少しハードルが高いと感じる人もいますよね。そこで今回は導入しやすく印象に残りやすい、大きな背景画像を用いたWebサイトの作り方を紹介します！ ↑私が10年以上利用している会計ソフト！ 背景に大きな画像を使うメリット・デメリット 大きな背景画像のメリットは、なんといってもその迫力です。言葉を使わずとも、そのWebサイトを通じて伝えたいイメージをストレートに表現できます。その写真が高画質で、クオリティが高いほど印象にも残りやすいので、近年海外を中心に多くのサイトで用いられている手法です。 しかし、いくつかの注意点をおさえておかないと、どんなに素敵な写真であっても効果が半減してしまいます。ひとつは画像が大きければ大きいほど、ページの読み込みに時間がかかって
Web制作者がマジで学べる国内ブログ厳選10個【制作+SEO対策編】 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
みなさんどうも〜こんにちはぁ！ 日々レベルアップを目指してWebを学んでおりますライターの、のび太です。 以前「Web制作初心者がマジで学べるおすすめ国内ブログ厳選10個」という記事を書かせていただいたのですが、予想以上に好評で驚きました。お役に立てて光栄です！ そのときご紹介したブログの他にも、まだまだ有益で素晴らしい国内ブログはたくさんあります。そこで今回は、「やばい！ マジで有益すぎる！ ありがてぇ！」と感じたブログを、制作系とSEO系とに分けて、計10個ほどご紹介したいと思います。 今まで知らなかったという人は、ぜひこの機会にRSS購読を！ 制作系 以下7ブログが、デザイン、コーディング、CMSなど制作系の内容になります。 NxWorld http://www.nxworld.net/ どの記事もシンプルかつ丁寧な説明で非常にわかりやすいです。特にWordPressカスタマイズ系の
これ結構使えた！サービスサイトやWordPressテーマで使われている小技まとめ
作成：2014/05/19 更新：2014/11/01 WordPress > ウェブサービスサイトや最近のWordPressテーマで使われているエフェクトや小技をまとめました。今回またjQueryが多くなってしまいましたが、サイト制作時に一手間加えたくなる小技集です。 エンジニア速報は Twitter の@commteで配信しています。 もくじ サイト読み込み時 １．画像読み込み時、ローディング画像を表示／jQuery ２．読み込み時に文字を動かす／jQuery ヘッダー ３．文字の拡大・縮小／jQuery ４．入力補助／jQuery ５．伸縮するサーチボックス／jQuery コンテンツ ６．中心に水平線を入れる／CSS ７．均等に並べる／段組み／CSS ８．コンテンツが現れた時にアニメーションさせる／jQuery ９．マウスホバーで画像を拡大しキャプションを出す／jQuery １０．マ
Useful CSS Text Effects
2014年8月22日 CSS モバイルファーストの概念が広まり、コンテンツ主体の「読ませる」サイトが増えてきた昨今。テキスト周りをより便利に、より素敵に表示できるようなCSSをいくつか集めました。ユーザビリティの向上も図れるようなものもあるので要チェック！基本的なテクニックが中心なので、初心者さん〜中級者さんの参考になればと思います。 ↑私が10年以上利用している会計ソフト！ テキスト周りで使えるCSSの小技 目次 テキストを選択する時の色を変更 蛍光ペンで線を引いたような効果 長いテキストを「…」で省略する 番号リストの表現を変更 リンクの種類でアイコン変える 言語によってスタイルを変更 テキストリンクのエフェクト プリント時はURLを表示 長いURLを途中で折返す 途中で折り返さず、次の行に 先頭の文字を大きく 先頭を一文字分あける グラデーションテキスト ブラウザーは特記していなけれ
CSSのみで実装するボタンデザインやホバーエフェクト 20＋α - NxWorld
実際に使用したものやいつか使うかもと思ったものをJSFiddleやEvernoteなんかでバラバラにメモしていたのですが、それらの中でよく使いそうなものを一覧化したものが欲しかったのでまとめました。 今となっては様々なところで用いられていますし、もっと凄くて面白い動きを実装しているチュートリアルなんかも沢山見かけますが、個人的に汎用性高いと思うもの中心です。 対象ブラウザに古いIEなどが含まれている場合はもちろん使えませんが、いずれもjQueryや画像などを一切使用せずにデザインやアニメーションも全てCSSのみで実装しているものです。 また、同様にCSSのみでクリエイティブなボタンデザインやエフェクトを実装できるエントリーや便利なジェネレータツールなども備忘録兼ねて併せて紹介します。 CSS3を多用しているため、ブラウザ（特にIE7・IE8など）によっては動きや見栄えが説明と異なる場合があ
html/css 参考サイト総まとめ
作成：2013/10/15 更新：2014/11/01 Web制作 > 先週、WordPressとEC-CUBEのレイアウトを変更しなければいけなくて、久しぶりにいじっておりましたが、忘れていたり知らなかったことが沢山ありました。レイアウトはSEOやUIにも深く関係しているのもあり、ここらへんでCSSやHTML５を触るときに参考にすると捗る記事を一回まとめようと思います。今回はCMSやオリジナルサイトを作るうえで「知っておくと必ず役立つ」ものをまとめました。 エンジニア速報は Twitter の@commteで配信しています。 もくじ 定番まとめ １．勉強になるテクニック／サンプルまとめ 基本知識 ２．セレクタ ３．メディア クエリ ４．コーディング規約 ５．フォント ６．CSSスプライト ７．アニメーション ８．正確なHTML使用方法 ９．CSSハック １０．書き方／読み方 定番まとめ
hr要素のデザインサンプル 12 - NxWorld
hr要素は罫線を表示させるもので、話題を変えるときの目印となる区切り線などとして用いられます。 どのブラウザでも完璧に同じ見栄えをとなると背景画像とかがやはり手っ取り早いし無難なんですが、やろうと思えばCSSだけでも結構いろいろとできるので、備忘録兼ねてhr要素をスタイリングしたものをまとめてみました。 ここで紹介しているものは、ブラウザによっては（特にCSS3を用いているもの）ちゃんと表示されません。 また、多用する人も多いと思う破線や点線もブラウザによっては多少見栄えが違ったりするので、使用する際はあらかじめ注意が必要になります。 はじめに ここで紹介しているものは、すべてHTMLは<hr />のみです。 また、それぞれのhr要素にはデフォルトスタイルとしてあらかじめ下記のようなスタイルを指定してあります。
次のレベルまでWEBサイトを引き上げてくれるCSS、javascriptテクニック集
CSSやjavascriptを利用してサイトをよりリッチな表現に変えていくというのは、WEB制作の現場では常に行われていて、様々なスニペットやライブラリが日夜リリースされています。今日紹介するのは次のレベルまでWEBサイトを引き上げてくれるCSS、javascriptテクニック「CSS and JavaScript tools to take your website to the next level」です。 Countable.js 様々なCSSやjavascriptによるテクニックがまとめられていますが、今日はその中からいくつか気になったものを紹介したいと思います。 詳しくは以下 iCheck クリックしたラジオボックスやチェックボックスから、返り値をとれるjavascript。それをキーにして何かを動かしたいときに。 Almost Flat UI フラットデザインUIを簡単に実装で
HTML5＋CSS3の「カンタン装飾設定」で今風デザイン
基本的にグラデーションや角丸はジェネレータからコピペして設定できるので、作業自体は簡単です。HTML5＋CSS3サンプルを使って表現してみましょう。 （1）装飾のキモは「グラデーション・線・角丸・影・テクスチャー」 前回HTML5＋CSS3の「レイアウトを自在に使いこなす」では、限られたいくつかのCSSプロパティを組み合わせて、さまざまなレイアウトができることをお見せしましたが、今回はそれに装飾を加えていきます。 いざ装飾しようとすると、どこから手を付ければ良いのか迷ってしまうかもしれませんが、アイコンなどの絵を除けば、装飾の要素は「グラデーション」「線」「角丸」「影」「テクスチャー」くらいなものです。それらを整理して組み合わせることで、全体として一体感のあるデザインに仕上げられます。 「それが難しいんだよ！」というお叱りの声が聞こえてきそうですが（笑）、以下の2つを見比べてみましょう。上
CSSでレイアウトするなら絶対覚えておきたい配置のルール：フロートや絶対配置、z-index とかいろいろ
最近改めて CSS の基本、要素の配置、レイアウトについて学習しました。過去に CSS でのレイアウトなどの記事を書いた事があるんですけど、改めて勉強してみたら、いろいろ間違えて解釈していたなー ... っていうか、基本が分かってなかったんだなーと反省 ...。今回は CSS の基本中の基本、視覚整形モデルについてまとめてみました。 Webデザインをする上で、必須とも言えるのが CSS …。このブログ – Webデザインレシピでも、過去に CSS について書いた記事がいくつかあります。最近 … でもないけど、以下のふたつは CSS でのレイアウトについて、いろいろと書いた記事でした。 CSSでレイアウトするなら絶対覚えておきたいブロックレベル要素のクセとかいろいろ – 2011年 6月17日 CSS：初心者の頃にハマったスタイルシートのあれこれ … IE7多め -2011年 4月21日 で
サービス終了のお知らせ - NAVER まとめ
サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
あなたの作業を音速にするかもしれないWEB屋の作業スピードを上げるチートシート大量紹介 | バンクーバーのうぇぶ屋
このブログがフロントに関する記事が多いもんだから、たまにデザイナーと呼ばれることがあるんですが、僕は業務としてはデザインよか制作ディレクションの方がどちらかと言えばメインなんですよね。 そんなディレクターとしての役割の一つに、周りにいる優れたデザイナーやプログラマー、デベロッパーの業務効率を考えることが挙げられます。 何を取るわけでもなく中途半端な僕ですが、ディレクターとして周りの各プロフェッショナルの役に少しでも立てればと、そして制作する上での効率を向上させるべく色々情報収集をする中で、よくチートシートの存在を目にします。（チートシートってどれだけ普及してるのかわかりませんが、つまりカンニングペーパーのことらしいです。） WEB屋にとってのチートシートって、どれだけ優れた技術力やデザイン力を持っていても、何かしら新しい発見がある物ですよね。以前書かせてもらった時間の価値は人によって違う！
【HTML】最近のPCサイトに見るテンプレ要素まとめ | istis
新卒入社2年目で、フロントエンドエンジニアをしています。阿部です。 いろいろなサイトのソースを見ていて、最近見るなぁと思った要素を勉強がてらにまとめてみました。 「IE対策」、「キャッシュ対策」、「高速化」、「ソーシャルメディア要素」、「スマートフォン要素」の5つに分けて、広く浅くですがご紹介します。 IE対策 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> IEで閲覧している場合、Google Chrome Frameで表示します。 Google Chrome Frameがインストールされていない場合は、IEの利用可能な最新のレンダリングエンジンで表示します。 Google Chrome Frame（GCF）とは、IEでGoogle Chrome相当のレンダリングエンジンを利用可能にするIEのプラグインで
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Web制作者はおさえておきたい！CSSの基本テクニックから実務に役立つ便利ツールまでのまとめ
HTML5/CSS3のテンプレートのまとめ | コリス
HTML5とCSS3を使いこなしたくなるフレームワーク15選
HugeDomains.com
Web制作をこれから始める人の為のスキル・HTML・CSS・ブラウザ・写真素材入手の基礎情報*ホームページを作る人のネタ帳
