[CSS]ビューポート(vw, vh)とパーセント(%)、レスポンシブに適した単位の賢い使い分け方法
先日の記事「フォントサイズの指定方法（翻訳版）」で、CSSの比較的新しい単位「ビューポートの単位(Viewport Units)」について触れました。この単位「vw, vh, vmin, vmax」はブラウザのビューポートのサイズに基づくもので、これらの単位で指定した実際の大きさはビューポートの大きさによって変化するため、レスポンシブデザインにあった単位と言えるでしょう。 これらの単位を使うことは「フォントサイズの指定方法」でフォントサイズに使うことを反対しましたが、レイアウトでは非常に役立つ単位です。 Viewport vs. Percentage Units 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 ビューポートの単位(Viewport Units)とは 要素を幅いっぱいに指定 (% > vw) 要素を高さいっぱいに指定 (
![[CSS]ビューポート(vw, vh)とパーセント(%)、レスポンシブに適した単位の賢い使い分け方法](https://cdn-ak-scissors.b.st-hatena.com/image/square/9632aee4416db718e0899706ace859f7fdcdf363/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201502%2F2015072201.png)
優秀なJavaScriptの開発者になるための5か条 | POSTD
(注記：7/15、いただいた翻訳フィードバックを元に記事を修正いたしました。) 子供の頃、私の興味は互いに関係性のない様々な分野に及んでいました。数学も歴史も大好きでした。 ルネッサンスマン 、つまり 博学者 と言う、複数の分野に秀でた人になりたいと思っていました。これはとても難しい課題で、私は突如として、器用貧乏な人になってしまう危機に直面したのです。 私は特定の分野に特化しなくては、と考え始めました。そうすればたとえルネッサンスマンにはなれなくても、少なくとも、器用貧乏にならなくても済むと思ったのです。どうしたらソフトウェア開発をするのに必要な広い知識を保ちながら、1つの分野で専門性を高めることができるのでしょうか。 この記事では、過去5年間、私が良いJavaScript開発者になるために使ったテクニックとリソースの概要をお伝えしようと思います。 最近の多くのWeb開発者は、ある共通の
シンプルでかつ最高のJavaScriptプロファイラ sjsp を作りました！ ― Webアプリケーションが複雑化する中でプロファイラに求められるものとは何か - プログラムモグモグ
あらすじ Web技術が複雑になる中で、JavaScriptのプロファイリングをとる方法とは。 プロファイリングを取るためのコードを手で書いてみましょう。 とてもシンプルで、かつ最高のJavaScriptプロファイラ sjsp を作りました。 本当にあった怖い話 上司 「とにかくJavaScriptのコードを速くしてくれ」 私 「分かりました、速くします」 (次の日) 私 「いいプロファイラがないなら作ればいいじゃない」 同じチームの人 「えっ？」 私 「最高のJavaScriptプロファイラ作ったよ」 同じチームの人 「「えっえっ？？？」」 私 「早速使ってみたらこことここが遅いって分かったよ」 同じチームの人 「「「この子は一体…」」」 JavaScriptのプロファイリングの難しさ 近年、Webブラウザーの処理速度は著しく向上し、その可用性の高さから、アプリケーションのプラットフォーム
WordPressの制作・公開・運用・セキュリティなどに関する重要なチェック項目のまとめ
WordPressの制作の準備、制作、公開、SEOやセキュリティやメンテナンスなど運用における、WordPressでサイトやブログを運営する際の大切なポイントをまとめたチェックリストを紹介します。 Killer WordPress Checklist: 101+ easy steps to launch your next website! 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 チェックリストはインフォグラフィックにもなっており、元ページでダウンロードできます。 インフォグラフィックの一部 はじめに WordPressの制作準備時のチェックリスト WordPressの制作時のチェックリスト WordPressの公開時のチェックリスト WordPessのSEOのチェックリスト WordPessのセキュリティのチェックリスト W
最近５〜６年分の人気のある jQueryプラグインを，年別に全て把握するまとめ。定番プラグインの日本語解説付きページへのリンク集 - 主に言語とシステム開発に関して
JavaScriptプログラミングのTOPへ さいきん５〜６年で人気のある jQueryプラグインを， 年ごとに全て把握するためのまとめ。 毎年，「今年のお勧めプラグイン」が ランキング記事として幾つか発表される。 それらの記事へのリンク集。 目を通しておくだけで，最新のjQuery事情が把握できるし， Webデザインの引き出しを増やせる。 ２０１５年 ２０１４年 ２０１３年 ２０１２年 ２０１１年 ２０１０年 ※↑ もくじジェネレータ で自動生成 ２０１５年 [jQuery]WEB制作でよく使うjQueryプラグイン [2015年版] | EMiAC-Works http://emiac-works.com/coding/jquery/... 2015/04/16 WEB制作でよく使うjQueryプラグインをご紹介。色々使ってきた中で今のものに落ちついてきた。定番と呼ばれるものが多い ス
米HP、業務アプリケーション向けのUXフレームワーク「Grommet」、オープンソースで公開
米ヒューレット・パッカードは、業務アプリケーション向けのJavaScript製UXフレームワーク「Grommet」をオープンソースで公開しました。Grommetは、「コンシューマグレードの機能を備えたエンタープライズ向けのUXフレームワーク」（米HP CTO Martin Flink氏）として開発されたもの。 モバイル対応でカラーパレットやテンプレートなどにより容易にカスタマイズが可能。エンタープライズ向けアプリケーションでよく用いられるカラーパターン、タイポグラフィ、アイコンや、ログイン画面、ダッシュボードなどのパターンが用意されています。
かつてはJavaScriptを利用していたものの、今ではCSSのみで実装できる10の小技
2015年3月18日 CSS 2011年に「少しのコードで実装可能な20のjQuery小技集」という記事で数々の便利な制作技を紹介したのですが、時は流れ、今ではCSSのみで表現できるものが多くなってきました。という事で今回はその記事内で紹介した技を中心に、かつてはJavaScriptを利用していたものの、今ではCSSのみで実装できる小技を紹介します。 ↑私が10年以上利用している会計ソフト！ 目次 Div全体をクリックできるようにする テーブルの偶数・奇数の行の色を変える フォームにテキストを入れておき、フォーカスで消す（文字色も変更） ラジオボタンとチェックボックスを装飾する スライドパネル アコーディオン ツールチップ 言語によってスタイルを変更 横並びのdivの高さ揃える ボックスを上下左右中央に配置する それでは実際にどんな事ができるのか見てみましょう！サンプルも作ったのでコードと
GitHubのようなサイトを独自に運用できる「GitLab」や「GitBucket」を使ってみよう | さくらのナレッジ
（※3月18日追記：当初「SSH公開鍵の管理機能」において、GitBucketを「×」としていましたが、SSHアクセス機能を機能を有効にすることでSSH公開鍵の管理機能も利用できるとのことで、「○」に修正しました） GitLabおよびGitBucketと、RedmineおよびTracとの大きな違いとして、フォークやマージ/プルリクエスト機能をサポートしているかどうかがある。これらの機能を利用したいのであれば、GitLabやGitBucketが候補となるだろう。 いっぽう、Redmineはカレンダー機能やガントチャートと言ったプロジェクト管理機能が充実しているのが特徴だ。また、Tracはシンプルなユーザーインターフェイスや、プラグインによるカスタマイズ性の高さがある。フォークやマージ/プルリクエスト機能を利用しないのであれば、プロジェクト管理機能が充実しているRedmineやTracは十分な
AWSのアカウント開設後にすべき事をまとめてみた | DevelopersIO
はじめに AWSチームのすずきです。 クラウドサービスのAWS、有効なクレジットカードと電話番号があれば、10分ほどでその利用が開始できます。 AWS アカウント作成の流れ この様に簡単に取得できるAWSのアカウントですが、その管理が不適切な場合、意図せぬ事故の原因となることがあります。 今回、AWSを安全に安心して利用するため、AWSアカウントを開設後に実施すべき設定についてまとめてみました。 AWS環境が、弊社クラスメソッドメンバーズを初めとする請求代行サービスを利用されている場合、一部当てはまらない項目もありますのでご注意ください。 目次 ルートアカウントの保護 MFA（多要素認証）の導入 アクセスキーとシークレットキーの確認 IAM（Identity and Access Management）設定 IAMグループ作成 IAMユーザ作成 IAMユーザの認証設定 IAMのパスワードポ
テーブル内容の編集がその場で出来て便利になる「jQuery-Tabledit」:phpspot開発日誌
markcell/jQuery-Tabledit GitHub テーブル内容の編集がその場で出来て便利になる「jQuery-Tabledit」。 セルをクリックしてそのまま編集したり、編集ボタンを押してから編集可能になり、Saveボタンで保存、削除ボタン→確認で削除といった機能を埋め込むことが出来ます。 デモでは次のようにBootstrapをベースとして作られておりBootstrapなサイトでも便利に使えそう。 編集開始→保存時の挙動が細かく調整できるのはよさそうです 関連エントリ インライン編集できるテーブル実装用jQueryプラグイン「editable-table」 HTMLテーブルを JSON、XML、PNG、CSV、PDFなどあらゆる形式に変換できる「HTML table Export」 複数条件で結果を絞り込めるテーブルを実装できるjQueryプラグイン「Multifilter」
Ajaxを劇的に簡単にするReact.js
ここ数年、Javascript界隈でフレームワーク戦争が勃発してきました。クライアント開発の規模も年々大きくなり、jQueryだけでは複雑な画面遷移などを管理しきれなくなってきたのが原因だと思います。 私も昨年までAngularとbackboneを試しましたが、サーバサイドをMVCにしているのに、クライアントでもMVCを作るMVCの2階建ては、やり過ぎなのではないかと思っていました。フレームワークそのもの覚えるまでにも一苦労というのも面倒に感じました。 2014年、海外でブームに火が付いたReact.js そんな中、2014年の後半からFacebook発のReact.jsの採用事例が聞こえてくるようになりました。AirBnBや米Yahoo! Mailなど大手がReact.jsを積極的に採用し出したので気になり、年末年始を使って色々調べてみることにしました。 Rails以来の衝撃 色々試して
【TEDトーク】人間、何かを学ぶのに必要な時間は「20時間」あれば十分！ | TABI LABO
作家のジョン・カウフマンは力説する。何かを学ぶのに計画的に集中力をもって挑めば、どんなことでも20時間で事足りると。 大切なことは、効果的に知的に取り組む姿勢と、以下の4つの概念を踏まえておくことだそう。 ①スキルを分解して上達に役立てる ②自己修正できることだけを学ぶ ③練習のジャマになるものを取り除く ④少なくとも20時間以上は練習する 軽快なトークと後半は怒濤のウクレレサウンドを楽しみながらご覧頂きたい。 ほんの少しの練習でグッと上達することができます。何かのスキルを身につけようとした時、そこに費やす時間はそれほど重要ではありませんよね。私たちが関心があるのは、どれだけ上手くなったかという結果なはずです。 何かをやり初めてそこそこ上手くなるまでに、人間はどれくらいの時間を必要とすると思いますか？できるだけ短い時間で到達したいですよね・・・。私が研究したところ、「20時間」です。
JavaScriptだけでファイルの保存機能を実装する
こんばんは。ファガイです。本日はJavaScriptだけでブラウザのある情報のデータを保存する機能の実装方法について書こうと思います。 概要ローカル上だけでファイルの保存ができるようになる方法になります。 自分が作っているMarkdown-F Editorはその機能を使って保存を実装しています。 今回利用する機能はHTML5の機能なので、ブラウザによっては実装されていない可能性がありますので、注意。 確認ブラウザIE11FirefoxGoogleChromeにて確認を取ってます。IEに関しては独自関数を使っているため、前のブラウザでは対応されていない可能性があります。 ソースコードソース自体は結構簡単です。 var text = "テキストデータ"; var blob = new Blob([text], {type: "text/plain"}); // バイナリデータを作ります。 //
[iOS] iOSのDelegateをしっかりと理解する | DevelopersIO
iOS の通知を知る こんにちは、iPhone アプリ開発担当の荒川です。 この記事では iOS アプリでの「通知」について紹介します。 今回扱う「通知」とは、「プッシュ通知（Push Notification）」や「ローカル通知（Local Notification）」のことではなく、特定のインスタンスから別のインスタンスへ処理を委譲することを指します。 「委譲（いじょう）」と言われると何やら難しいことのように思えますが、あるクラスに書かれた何かの処理を他のクラスで処理する事だと思って下さい。 iOS アプリケーションでは以下の通知方法がよく使われます。 Delegate（処理の委譲） Key Value Observe（キー値監視） Notification Center（情報のブロードキャスト） この中の Delegate について、Objective-C での実装方法を交えて紹介し
![[iOS] iOSのDelegateをしっかりと理解する | DevelopersIO](https://cdn-ak-scissors.b.st-hatena.com/image/square/3b908864d8ed9e4027eb1c344eb948e4eb8ce49a/height=288;version=1;width=512/https%3A%2F%2Fdevio2023-media.developers.io%2Fwp-content%2Fuploads%2F2014%2F11%2Fios8.png)
Swift開発で参考にしたいGitHub社の「Swift Style Guide」と日本語版 | ソフトアンテナ
Appleのアプリ開発用言語として大きな注目を集めているプログラミング言語「Swift」。まだ新しい言語だけあって、様々な定石や規約が出揃っておらず、どのように書けばベストなのか迷っている開発者の方も多いかもしれません。 そのようなときに参考になりそうなGitHub社のスタイルガイド、「Swift Style Guide」と、その日本語訳「Swiftコーディング規約」が公開されています。 同スタイルガイドは、Swiftプログラムの精密さや厳密さを向上させ、エラーを減少させることを目的としたガイドラインで、例えば、「(タブよりスペースを使うといった)空白の使い方」から、「可能な限りlet宣言をvar宣言より優先する」、「オプショナル型の開示指定は避ける」、「暗黙的開示オプショナル型の使用を避ける」などシンタックスの細部に至る、様々な指針が提示されています。 if let foo = foo
保存版！CSS3で出来る素敵なデザインやアニメーションをまとめてみた
主要ブラウザで使うことの出来る「CSS3」ですが、IE8に対応していないためにCSS3の基本や使い方は知っていても実務等では使う機会が少なかった(クライアントワークではIE8が対応ブラウザに含まれていたため)方もいらっしゃると思います。そうするとふと「あれ、あのプロパティはどう使うんだっけ？」とか「この要素だけにスタイルを適応するCSS3は何だっけ…？」など忘れてしまうこともしばしば…。 最近ではIE8のシェアは低くなり、またスマホサイト制作の機会も増えたためクライアントワークでもCSS3を活用したWeb制作が増えてきました。そこで今回は、まず覚えておくと便利な機能の復習とそれを応用し「これCSS3だけで作れるの!?」というような驚きの作品の数々をまとめてみました！ CSS3とは そもそも「CSS3」とは何のことでしょうか。改めてその定義を確認してみましょう。 「CSS」は、ウェブページの
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
SSL Tools
HTML／CSSコーディング時間を激減させる「Creative Cloud Extract」と、その真価を引きだすための10のポイント
イベント資料｜iOSオールスターズ勉強会 - TECH PLAY［テックプレイ］
dfltweb1.onamae.com – このドメインはお名前.comで取得されています。
