CSSで片方可変、片方固定のカラムレイアウトを実装する方法 - NxWorld
CSSで片方の幅が可変で、もう片方の幅が固定というタイプのカラムレイアウトを実装する方法を全4パターン紹介します。 対象ブラウザやOSなど環境によっては使えないものもありますが、全て同じ見た目（レイアウト）を実装することができます。 HTMLと実装イメージについて 紹介する方法はいずれも下記のようなHTMLを使用したものになり、ご覧のようにメイン・サイド・それらを括る親要素の3つのdiv要素で実装していきます。 <div class="wrapper"> <div class="main"> <!-- 可変 --> </div> <div class="side"> <!-- 固定 --> </div> </div> また、今回はこのイメージのようにdiv class="main"（青い背景色の領域）を可変、div class="side"（赤い背景色の領域）を固定にそれぞれする方法で、固
Macでssh時の'Permission denied (publickey).'の解決法
B! 22 0 0 0 Macでたまにsshしたり、gitコマンドでGitHubにpushしたりするときに うまくいかない時があって色々調べたのでそのまとめ。 sshでPermission denined Macでのssh-agent: launchdで立ち上げ SSH_AUTH_SOCKを自動で設定する sshでPermission denined 普段Mac内でiTermなどターミナルを立ち上げて作業を行ってる時には問題ないんですが、 cronで予約しておいたジョブの中や Macに外からsshで入って作業したりするときに、 gitコマンドを使ったりすると、 Permission denied (publickey). fatal: Could not read from remote repository. Please make sure you have the correct a
ssh周りの設定、Tipsのまとめ
B! 332 0 0 0 SSH関連のポストが結構たまったので取り敢えずのまとめ。 SSHクライアント Windows Mac Android/iPhone 多段SSH 外部から見れないページを外部から見る方法 その他ポートフォワード 同じサーバーに複数接続時に接続高速化 接続を強化 無料ダイナミックDNS Mac関連 SSHクライアント ターミナルです。 LinuxならGnomeターミナルなりなんなり入ってる物で良いでしょうし、 Macも取り敢えずは入ってるターミナル.appで使えます。 Windowsでは現段階ではコマンドプロンプトやPowerShellではsshがサポートされてないので 1 何らかの物を入れてあげる必要があります。 Windows Windowsでは今パッと入れるのであれば MobaXtermが一番優れていると思います。 MobaXterm: Windowsでのcyg
[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プロファイラ 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氏）として開発されたもの。 モバイル対応でカラーパレットやテンプレートなどにより容易にカスタマイズが可能。エンタープライズ向けアプリケーションでよく用いられるカラーパターン、タイポグラフィ、アイコンや、ログイン画面、ダッシュボードなどのパターンが用意されています。
CodeIgniterでテンプレートを使ってメールを送信する方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、ひろゆきです。 今日は、CodeIgniterでテンプレートを使用してメールを送信する方法をメモとして残したいと思います。 1. テンプレートの準備 「application/views」の下に「template/mail」ディレクトリを作成して、メールのテンプレートとなるcontact.phpを配置します。contact.phpの内容は、以下のように書きます。 {name}さまからお問い合わせがありました。 ====お問い合わせ内容====== ■お名前 {name}さま ■メールアドレス {mail} ■電話番号 {tel} <?php if(isset($zip) && $zip != ''): ?> ■郵便番号 {zip} <?php endif; ?> <?php if(isset($address) && $address != ''): ?> ■住所 {addre
Silent Push / Background Fetch 時の fetchCompletionHandler に渡す引数ごとの挙動の違いを調べてみた
Silent Push / Background Fetch 時の fetchCompletionHandler に渡す引数ごとの挙動の違いを調べてみた 2014/09/10追記: 追加調査によって判明した事項を追記しています。 iOS 7から追加されたPush通知によるバックグラウンド処理機能 (Silent Push) および定期的なバックグラウンドフェッチ機能 (Background Fetch) ですが、これらの機能はバックグラウンド処理が完了したタイミングでいずれもfetchCompletionHandlerにUIBackgroundFetchResult型の値を渡すような設計になっています。 ちょっと調べれば、大体どこの解説サイトにも以下のように説明があります。 UIBackgroundFetchResultNewData 新しいコンテンツの取得に成功し、新しいデータが存在した
「ドキュメントデザイン」で最も重要な50のルールをまとめた「Color CRAYON-TIP Method」
グラフィックデザイナーがドキュメントをデザインするにあたって特に重要な要素を「Color(カラー)」「Contrast(コントラスト)」「Repetition(反復)」「Arrangement(アレンジ)」「Why(なぜ)」「Organization(組織化)」「Negative Space(ネガティブスペース)」「Typography(タイポグラフィ)」「Iconography(図像学)」「Photography(フォトグラフィ)」という10のカテゴリに分類し、各カテゴリに5つずつ、全部で50のルールを盛り込んだインフォグラフィックが「Color CRAYON-TIP」です。 The 50 Most Important Rules of Document Design: Color CRAYON-TIP Method http://thevisualcommunicationguy.co
Linuxのシステムやハードウェア情報を取得するコマンドを集めてみた | クロの思考ノート
こんにちは。今回はLinuxのシステム情報を入手するコマンド特集です。システムの設定やハードの情報を入手する際に役立ちそうなコマンド（というかCUI操作）を独断と偏見でピックアップします。ディストロやバージョンによって設定ファイルやコマンドは変化しますので注意してくださいね。（本記事のコマンドは2014年9月時点のものです） CPUやメモリの情報を調べる CUPの情報を得る $ cat /proc/cpuinfo 出力例 processor : 0 vendor_id : GenuineIntel cpu family : 6 model : 23 model name : Intel(R) Core(TM)2 Duo CPU P8400 @ 2.26GHz stepping : 6 microcode : 0x60c cpu MHz : 800.000 cache size : 3072
かつては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のパスワードポ
IPアドレスを指定してMACアドレスを調べるには？ arpingコマンド
IPアドレスを指定してMACアドレスを調べるには？ arpingコマンド：ネットワーク管理の基本Tips IPアドレスからMACアドレスを確認したい場合は、「arping」コマンドを利用できます。IPアドレスとMACアドレスのひも付けがどのようであるかも確認できます。 連載バックナンバー 本連載では、ネットワーク管理の基本コマンドを順を追って紹介していきます。基本書式と用法、主要なオプション、用例サンプルを示しますので、manやhelp代わりに通読し、各コマンドでできることを順次おさらいしてみてください。ネットワーク機器の存在を確認する際の基本コマンド「ping」は以前紹介しましたが、今回は、MACアドレスとIPアドレスの組み合わせでノードの存在確認を行う「arping」コマンドを紹介します。 なお、本連載では、執筆時点の最新版Red Hat Enterprise Linux（RHEL）お
テーブル内容の編集がその場で出来て便利になる「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以来の衝撃 色々試して
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
住所・フリガナは自動入力すべし！ フォームで使えるライブラリまとめ／15か条の12 | 勝手にEFO分析-エントリーフォーム改善
1000種類ものダミーデータを一括生成してくれるサービス｢mockaroo｣ | ライフハッカー［日本版］
