Swiperという軽量でレスポンシブ対応でスワイプ切り替えもできちゃうスライダー | NeGiMeMo.net
bell賞味期限切れコンテンツ この記事は公開または最終更新から1703日くらい経過しています。 このメッセージが表示されている記事（特にプログラミング系）は情報が古くなっている可能性があるので注意して下さい。 レスポンシブにも対応していて、スマホなどのタッチデバイスによるスワイプ操作にも対応したコンテンツスライダーです。 触ってみたらなかなか良い感じだったのですが、日本語の情報が少なかったのでメモ。 Swiperの主な特徴 レスポンシブ 横スライドだけじゃなくて縦スライドにも対応 フリーモード（自分で動かした分だけしかスライドしなくなる） カルーセルモード jQueryなしで単体動作させることもできる（jQueryで発火させることも出来る） コンテンツスライダーなので画像だけじゃなくてなんでも詰め込める などでしょうか？ 他にもたくさんありますので、公式サイトのFeaturesを読んでみ
効率的に学べた！Webデザインを「職種別」に基礎から勉強出来る総まとめ | コムテブログ
作成：2014/01/6 更新：2014/11/01 Webデザイン > Web制作において、Webデザイナーに関係するものを職種別にまとめました。会社によって分け方は違うと思います。今回は参考サイトとスライドを掲載しています。 エンジニア速報は Twitter の@commteで配信しています。 もくじ アートディレクター １．アクセシビリティ ２．ユーザビリティ ３．UX（ユーザーエクスペリエンス） ４．IA（情報アーキテクチャ） ５．画面設計（ワイヤーフレーム） ６．進行管理 Webデザイナー ７．レイアウト・フォントの知識 ８．配色 ９．Illustratorの使い方 １０．Photoshopの使い方 １１．バナー作成 １２．ボタン作成 フロントエンドエンジニア １３．HTML5 １４．CSS3／Sass １５．javascript １６．jQuery １７．WordPressテー
ワンランク上のHTMLコーディングを行うための18のポイント | ベイジの社長ブログ
HTMLコーディングの初級というと、どの程度のスキルを差すのでしょうか。弊社では、以下のようなことがひとまずできていると、だいたい初級レベルを越え始めた段階かな、という気がしています。 ターゲットブラウザで大きな崩れがない。 リンク漏れや原稿違いなどのヒューマンエラーの頻度が極めて低い。 バリデーター・チェックでエラーが出ない。 逆に、これだけのことができて、なぜまだ初級レベルなのでしょうか。それは、現場では、これだけでは不十分だからです。ブラウザでひとまず正常に表示されるだけでなく、改修に素早く対応できる柔軟性、協業や運用後の更新を楽にするルールの一貫性や簡潔さ、HTMLの概念をきちんと踏まえた正しい構造設計なども、求められてくるからです。 そこでここでは、脱・初級者を目指す方のために、弊社内で行っているHTMLコーディングの、いわゆるエラーということ以外のチェックポイントを、まとめてみ
Windows XPアップグレード時のレガシーWebシステム維持方法まとめ - ふろしき Blog
12年強もの長い期間に渡り利用されたWindows XPも、2014年4月9日をもって延長サポートを終了しEOLです。しかし世間では依然として、騒ぎが落ち着かないようですね。 アップグレード問題は、本ブログでもかなり取り扱ってきたネタですが、もう十分に情報が揃ってきたように思えます。ここで一旦整理して、Webシステムにターゲットを絞ったレガシー資産の維持方法・対策について、その全体像を眺めてみましょう。 1. アップグレード先のWindowsのバージョンについて まずは、アップグレード先のOSについてです。 バージョンごとに強い癖を持つIE8以下向けに開発されたWebシステムであっても、大きな改修を行うこと無く移行する方法を、IEは機能として提供しています。「ドキュメントモード」です。これまではアップグレード先がWindowsであれば、その上で動作するIEが必ず持っている機能であり、レガシ
ScaleOut | Supership
「ミライリアルの幸せを、デジタルの力で創る」ことを目指すSupershipグループの社内報です。日々の出来事、メンバーの働く様子や声、未来への想いなど、Supershipグループの”Be Super”なストーリーをみんなでシェアしていきます。
[CSS]アイテム数が不明でもカラム数に合わせてぴったりに配置するスタイルシート
下記のような3カラムのグリッドに複数のアイテムを配置する時、アイテムの数が3の倍数だったらぴったり収まりますが、アイテムが7, 8個の場合は最後に余白を生じます。 もちろん余白のままでも良い場合はありますが、ぴったり収めたいという時に役立つスタイルシートのテクニックを紹介します。 Tetris & The Power Of CSS 基本となるHTMLは、リストでアイテムを配置します。 HTML アイテム数は、適当に変更して構いません。 <ul class="flex-container"> <li class="flex-item">1</li> <li class="flex-item">2</li> <li class="flex-item">3</li> <li class="flex-item">4</li> <li class="flex-item">5</li> <li cla
コメントとコメントアウトは人間が読む文章を書くのにも便利だぞ
今日は文章を書くことを、作業面から助ける提案を。 知っている／やっている人には当たり前すぎる話だが、知ると知らないとでは執筆中の効率の面でも精神衛生の面でも大違いなので書く。 コメントとは何か？ プログラミング言語を用いてコンピュータに何か有用な作業をさせるための指示を書き上げることをプログラミングといい、書かれた指示のかたまりをソースコードという。 ソースコードには、コンピュータが処理を行うときには〈ないもの〉扱いされる（つまり処理されることなく飛ばされる）が、覚え書きとしてコメント（comment）があちこちに挿入されることが多い。 たとえばC++やJavaでは// 以降がコメントと見なされ、PerlやPythonでは、# 以降がコメントと見なされる。 またHTML、Wikiでは、で括られた部分がコメントと見なされ、C、C++、Java、JavaScript、CSSでは、/* と */
Internet ExplorerのどのバージョンからどのHTML/CSS/JSに対応しているかの一覧
Internet Explorer 7から対応したHTML/CSS/JS Internet Explorer 7はMicrosoft社から2006年10月18日（日本語版は11月2日）にリリースされたウェブブラウザ。 HTML 透過PNGフォーマット abbr要素 CSS 子供セレクタ（親要素 > 子要素 ） 隣接セレクタ（要素1 + 要素2） 間接セレクタ（要素1 ~ 要素2） 属性セレクタ（[属性名], [属性名="属性値"], [属性名~="属性値"], [属性名|="属性値"]） a要素以外をセレクタにした:hover擬似クラス, :active擬似クラス :first-child擬似クラス max-widthプロパティ, max-heightプロパティ min-widthプロパティ, min-heightプロパティ positionプロパティの fixed の値 border-c
標準の日本語フォント / もうパンツはかない
各環境でどんな日本語フォントが使えるのか、まとめてみました。 それぞれのOSで標準添付されていると思われる日本語フォントをCSSの指定で表示させたものをキャプチャーしました。小さい方の字は16ピクセル、大きい方は 150% とCSS上で指定しています。使用ブラウザは主に各環境の標準ブラウザ(MacはSafari、WindowsはEdge)です。 Mac Windows Linux macOS Sonoma (14) ヒラギノ角ゴシック (ウェイト:W0〜W9の10段階) font-family: "HiraginoSans-W0","Hiragino Sans","ヒラギノ角ゴシック"; font-weight: 100; font-family: "Hiragino Sans","ヒラギノ角ゴシック"; font-weight: 400; font-family: "Hiragino S
[CSS]日本語にもマッチする、見出しの文字をかっこよくするスタイルシートのまとめ | コリス
This is a Headline ブラウザはChrome, SafariのWebkit系でご覧ください。 各スタイルとともに、スタイルシートを紹介します。 とその前に、HTMLはごくシンプルです。 <h1 class="vintage">美しい日本語</h1> ヴィンテージ風にスタイルします。 .vintage{ background: #EEE url(data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAIAAAAmkwkpAAAAHklEQVQImWNkYGBgYGD4//8/A5wF5SBYyAr+//8PAPOCFO0Q2zq7AAAAAElFTkSuQmCC) repeat; text-shadow: 5px -5px black, 4px -4px white; font-weight: bold; -webkit
長く続くサイトのコツ
つるまない・集めない・影響を与えない この3つに尽きるのではないだろうか。 ここでリンクを貼ったり、何かしら影響を与えることはそのサイトが望むことではないので、あるサイトとして呼ぶことにする。 とあるジャンルのいちばん続いていて、Google先生の評価が高いあるサイトについて特徴を見ていきたいと思う。 ・かたくなにHTMLで作っている ブログが普及するかなり前からやっているので、手打ちのHTMLでやっている。ちゃんとCSSも使いこなしている。 ・CSSデザインはリキッド リキッドというよりは、寸法を固定する気がない。自然体のHTMLに少しのCSSで色づけ。 ・外部リンクはなし はるか昔にトラブルにあったのか、私がこのサイトを見つけたときには、リンクは一切なかった。別のサイトを教えたいときには、検索するときの言葉をヒントにしていた。 ・コンテンツは1000くらい こつこつと作っていき、100
激簡単にHTMLとCSSの共有が出来るリアルタイムオンラインエディタScrathpadが良い感じ！ | バンクーバーのうぇぶ屋
先日一通のメールが届きまして、ScrathpadというオンラインHTML＆CSSエディターのローンチをお知らせするメールでした。 新サービスの公開しましたメールはよく届くので、オンラインエディタであればjsfiddleをよく使う僕にとっては得に期待してたわけでは無かったのが正直な所ですが、いやコレはもしかしたら乗り換えるかもと思ったので、まずは皆さんとも共有させて頂ければと思います！ 似たサービスならCssizer.comやjsdo.itなんかが挙げられますが、僕のようなフロントエンド畑の人間であれば得に簡単なHTMLとCSSを仲間内と共有したい機会なんか多いわけで、とにかく”ド”シンプルなオンラインエディターの方が嬉しいっちゃ嬉しいわけです。 そういう”ド”シンプル、”ド”簡単って意味では今回ご紹介するScrathpadというサービスはなかなか僕の希望を叶えてくれましたので、まずは超カン
[CSS]外部スタイルシートの指定は@importとlinkでどちらがいいか
外部スタイルシートの指定は@importとlinkでどちらがいいかと、書籍「ハイパフォーマンスWebサイト ―高速サイトを実現する14のルール」の@importはパフォーマンスに悪影響を与えることについてのフォローアップを紹介します。 don't use @import 内容は、IEでは@importで外部スタイルシートを指定すると、パフォーマンスに悪影響を与えるので使用しないでください、というものです。 下記は、外部スタイルシートを@importとlinkを組み合わせて、それぞれのパフォーマンスを比較したもので、キャプチャはそのサイトのものと、参考に当環境でIE7/Fx3(XP)を検証したものです。 @import @import 2つの外部スタイルシートを@importで指定。 <textarea name="code" class="html" cols="60" rows="5">
IE8・IE9をクラッシュさせるシンプルなCSSコードが見つかる
わずか1行でInternet Explorerをクラッシュさせてしまうコードというものもありましたが、今回見つかったコードも、CSSに数行足すだけでInternet Explorer 8と9をクラッシュさせることが可能です。 Benutzer:Schinken/CSS-IE-Crash – Hackerspace Bamberg - Backspace http://www.hackerspace-bamberg.de/Benutzer:Schinken/CSS-IE-Crash デモページはこちら、IE8・IE9だとアクセスした瞬間にクラッシュし操作不可能になるので注意。 http://schinken.github.io/experiments/iecrash/crash.html 実際にIE8でアクセスしてみたところ、ページにアクセスしたとたんに一切の操作を受け付けなくなり、そのまま
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://ideahacker.net/2013/06/28/5571/
iDangero.us
新着記事
「nth-child」と「nth-of-type」の使い方と違い
新しいCSSの仕様を色々調べてみた
screw-axis.com