Web制作を劇的に効率UPさせる、最近人気の軽量「CSSフレームワーク」を厳選してみた！ - paiza times
どうも、まさとらん（@0310lan）です。 みなさんは、「CSSフレームワーク」を活用しているでしょうか？ いきなりフレームワークと聞くと、「なんだか難しそう…」と思ってしまうかもしれませんが、最近は誰でも利用できるようにシンプルな設計で公開されているモノが増えています。 そこで今回は、多機能でありながらも学習コストが低い「CSSフレームワーク」を厳選し、レスポンシブ対応でモバイルに優しいものをいくつかご紹介しようと思います！ ■CSSだけで多彩なサイトを構築できるフレームワーク！ 【 Picnic CSS 】 Web制作に必要なコンテンツを、とにかく簡単な手順で手っ取り早く構築できるように設計されているのが「Picnic CSS」です！ 特に、Flexboxを活用した非常に柔軟なグリッドレイアウトや、JavaScript不要でインタラクティブな要素を構築できる機能などはとても便利だと思
2016年に見直したHTML5・CSS3コーディング手法6選 - ICS MEDIA
HTML・CSSコーディングを取り巻く状況は、数年前と大きく変わっています。最近では、2016年11月にHTML 5.1が勧告されたり、2015年8月頃にChromeのブラウザーシェアがInternet Explorerを抜いたりといったニュースがありました。また、2017年4月にはWindows Vistaのサポートも終了するため、今後対応すべきはWindows 7のIE 11以降となります（※）。当たり前だと思っていたコーディング技術を今一度見直す時期にきているのではないでしょうか。本記事では2016年に見直した、今の時代に即したコーディング技術を紹介します。 ※ 参考記事「Internet Explorerサポートポリシー変更の重要なお知らせ - Microsoft」 1. meta keywords設定は検索順位に関係がない ウェブコンテンツのキーワードを指定するmeta keyw
意外と今っぽくなる、CSSやjQueryで実現するエフェクトまとめ
作成：2016/02/8 更新：2016/06/29 Web制作 > CSSやjQueryで実現する、今までにないようなエフェクトを実現するために知っておくと便利なエフェクトをまとめました。トレンドをおさえた最近のものを厳選してピックアップ。ファーストビューなどで、一味違った面白さを出したいときに。 エンジニア速報は Twitter の@commteで配信しています。 セグメンテッド コントロール pocketなどに見られる「リスト・タイルビュー」など表示形式の切り替え。コンテンツを切り替えるセグメンテッド コントロール（SegmentedControl）。少し古い記事ですが、他になさそうだったので。 Blueprint: View Mode Switch もうひとつはcodepenから。 See the Pen DropDown2Segment by ActiveCodex (@Acti
【第2弾】少しのコードで実装可能な20のCSS小技集
2019年5月17日 CSS はるか6年前に書いた記事「少しのコードで実装可能な20のCSS小技集」の第二弾です！（スパンながっ）簡単なコードで素敵な効果が得られる小技をダダっと紹介してみます。前回に引き続き、初心者さんからベテランさんまで参考にしてみてください！ ↑私が10年以上利用している会計ソフト！ 目次 画像を丸く表示 1本線のテーブル 1本線の水平線 線色を指定しなくても文字色と同一色になる 複数の背景画像 背景画像のサイズ Webフォントを使う 画像をモノクロやセピアにする リストマーカーの色を変更 グラデーション グラデーションボーダー フラットだけど立体的ボタン 画像をぼかす レスポンシブに対応した動画 要素を真ん中に配置 カンマで分けたリスト 文字を縦書き フォーカスすると伸びるテキストボックス iOSでボタンのスタイルをリセット 線のオフセット設定 HTML・CSSの全
非デザイナーがWebサイトをおしゃれに作るためにやったこと - Qiita
はじめに 普段はバックエンドエンジニアでデザインの勉強を一切やったことがない僕がそこそこのwebサイトであれば作れるようになってきたので、webサイトをおしゃれに作るためにやったことをまとめてみました。 手順 デザインについて無知でhtml, cssをほとんど書いたことない人（基本的な文法は知っている。）がいきなりおしゃれなサイトが作れるようにはなりません。以下のステップを踏んでいくといいと思います。 おしゃれなサイトを探して研究する。 bootstrapを使ってサイトを作ってみる。 実際に作ってみる。 おしゃれなサイトを探して研究する 個人的にこれをやることがおしゃれなwebサイトを作るための一番の近道だと思います。まずは既存のものを真似して作っていくことが大切だと思うので、なぜそのサイトがおしゃれなのか調べ尽くします。 この作業を繰り返しすることでどんなサイトがおしゃれなのかわかってき
今更聞けない！エンジニアのための CSS の基礎講座 〜ボックスモデル編〜 | 株式会社ヌーラボ(Nulab inc.)
注意 HTML5 からは 見た目は CSS に任せ、HTML は文書の構造（セマンティック）を表すことのみに重点を置かれるようになりました。例えば箇条書きリストを作るのに div と display: list-item; を使って構築するより、箇条書きリストを表す ul li を使ったほうがよりセマンティックです。このように目的にあった HTML 要素を使うようにしてください。 ボックスモデルとは CSS でレイアウトをする際には、 ボックスモデル を理解する必要があります。 CSS の定義するボックスモデルは以下の図のように 4つの領域で構成されています。 ボックスモデル解説図 content（コンテンツ） テキストや画像など、要素そのものの内容が表示される領域です。この領域のサイズは width（幅） と height（高さ）プロパティで指定することができます。 padding（パデ
Webプログラマから見たiOS9 Safari9のCSS/JavaScriptなどの新機能解説 - Qiita
iOS9がリリースされ、iPhone6sも発売され、iOS9 Safari9で使える新機能をWebプログラマ目線で使ってみたいものをいくつか試してみました。iOSはアップデートの進捗がわりと良いので、新機能でもモバイルサイトであれば積極的に使える…はず。デスクトップ版の方は…お察しください。 ぶっちゃけ今回はそこまで目玉機能はなく、地味です。地味ですが、SafariでWebアプリを作れるようになりそうな気配がどことなくするようなしないような感じの内容です。残念ながらServiceWorkerには対応していないので、それに対応してくれたらもっとアレなんですが。 iOS Safari9の新機能（OSX版含む） CSS系 backdropフィルタ対応 新し目のiOSやOSXとかのメニューバーが半透過されるあれが作れます。要は背景要素に対してフィルタがかけられるプロパティです。綺麗で良いですね。
Bootstrapで最近人気の高いレイアウトやコンポーネントを簡単に実装できるテンプレートのまとめ
上部固定のScrollspy対応ナビゲーション、アニメーションがかっこいいオフキャンバスメニュー、ブラウザの高さいっぱい・半分に画像を配置、複数のコンテンツを配置するレスポンシブ対応のコンポーネントなど、最近よく見かける人気の高いレイアウトやコンポーネントを簡単に実装できるBootstrap用のテンプレートを紹介します。 Bootstrap 実装方法のほとんどは、Bootstrapの最小限の構成に数行のHTMLと外部スタイルシートを記述するだけです。 Bootstrapの基本的な使い方は、下記の記事を参考にどうぞ。 参考 Bootstrapのグリッドシステムの基本な使い方 BootstrapのベースのCSSを使ってさまざまな要素を実装してみよう！基本要素とナビゲーションのスタイル 以下のテンプレートはApache 2.0ライセンスで、個人でも商用でも無料で利用できます。 Scrolling
jQueryで作る、下にスクロールで消えて、上にスクロールで現れる固定メニュー
最近、下にスクロールすれば消えて、上にスクロールすれば現れる固定メニューを設置しているサイトを２つくらい（サイト名は忘れてしまいました。。）見かけて、これは流行っているのではないかということで作ってみました。 メニュー自体はいたって普通のものですが、一応ソースを載せておきます。まずはHTMLです。 <nav id="menu-wrap"> <ul id="menu"> <li><a href="#">menu1</a></li> <li><a href="#">menu2</a></li> <li><a href="#">menu3</a></li> <li><a href="#">menu4</a></li> <li><a href="#">menu5</a></li> </ul> </nav> 続いてCSSです。 #menu-wrap { position: fixed; z-inde
Primer - GitHub製。みんなで使えるデザインフレームワーク MOONGIFT
企業やプロジェクトによってデザインガイドラインは自ずと必要になってきます。それが社で働くデザイナーの共通認識になる訳ですが、例えばFacebookアプリを作る際にはボタンやデザインをFacebookっぽくしたくなるのではないでしょうか。つまりデザインガイドラインは社内だけでなく社外の人にとっても有益なのです。 そこで登場したのがPrimerです。PrimerはGitHubが作り、使っているデザインガイドラインになります。 Primerの使い方 スクリーンショットを多めで紹介します。まずはグリッド。 ヘッダー。h1〜6まで対応。 テキスト。若干小さめ？ インラインテキストの装飾。 ボタン。ここはGitHubっぽいですね。 ボタングループ。こういうのもGitHubで使われていますよね。 フォーム。シンプルです。 フォームグループ。縦に並べる時に使えます。 メニュー。アイコンはオプションです。
CSSの content プロパティーを使いこなそう！
2015年4月8日 CSS CSSの小技やスニペット集なんかを見ていると、ちょくちょく見かける content プロパティー。「そういえば、こいつ一体何者…！？」と思った方もいるかもしれないので、今更ながら改めて content プロパティーの紹介をしようと思います。 ↑私が10年以上利用している会計ソフト！ content プロパティーって何？ content プロパティーは、要素の前後に、:before または :after という擬似要素を使ってテキストや画像などのコンテンツを挿入する際に使用します。擬似要素とは、HTMLなどの文書には記述されていない要素をCSSによって新たに作り出された架空の要素です。Webクリエイターボックスでも、過去記事「かつてはJavaScriptを利用していたものの、今ではCSSのみで実装できる10の小技」や「経歴や会社の沿革ページに！簡単なCSSで実装す
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Web制作者が備えておきたい最新版チートシートのまとめ、CSS3 Flexbox, CSSアニメーション, jQuery3, ES6, Bootstrap4など
[CSS]古いバージョンのIEがサポート終了したので、どんどん使っていきたいCSSのテクニックのまとめ![[CSS]古いバージョンのIEがサポート終了したので、どんどん使っていきたいCSSのテクニックのまとめ](https://cdn-ak-scissors.b.st-hatena.com/image/square/e1fd89076a824a2b1b121fa5a6c8839a4338de05/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201601%2F2016012701.png)
TECH PROjin
cow2design.com
Bootstrapはこう使う