はてなブックマーク

一人ぼっちでGitによるバージョン管理をするなら無料で非公開リポジトリが作れる「Bitbucket」がおすすめ by shirushiru · 2017年5月3日 一人ぼっちなのに、Gitは必要なのかシステム開発やWeb制作の現場では、もはや使えないなんて言ったら冷たくあしらわれてしまう、Git。 今まさに、Webやアプリケーション開発を学び始めようとしている人でも「git」という単語は耳にしたことがあるはず。 「聞いたことあるけどよくわからない」という方は、ぜひこちらのサイトを一読することをお勧めしたいです。 サルでもわかるGit入門 gitはバージョン管理を分散型で行えるので、チームで開発する場合に、ものすごく便利に使える。 ただそうなると、独学で開発を学ぶ段階では不要なのでは、、、と思ってしまうが、決してそうではない。 自分で開発、またはWeb制作を進めていくうちに、一人でも効率的に

HTMLページで作成した帳票をA4サイズに収める HTMLで出力しているページをA4横とかA4縦とかの帳票として印刷できるようにしたいことがあります。 社内用システムとか、需要ありますね。 A4サイズに綺麗に収まり、複数ページの場合は、しっかりとページが分かれるようにプリントアウトできるようにするためには、CSSでレイアウトすればイケます。 具体的なレイアウト方法をご紹介します。 HTMLの基本形 サンプルとして、月間の社員別営業成績表をA4サイズで印刷できるようなレイアウトを考えてみます。 <article> <section> <h1>2017年10月の成績</h1> <table> <thead> <tr> <th>社員番号</th> <th>名前</th> <th>獲得顧客数</th> <th>売上高</th> <th>売上高前年同期比</th> </tr> </thead> <t

【jQuery】ラジオボタン change()でイベント発動（サンプルコード付） by shirushiru · 公開 2017年5月8日 · 更新済み 2017年8月24日 webフォームで、選択肢のうち「その他」が選択されたら、その詳細をテキストで入力してもらう、なんてことはよくあると思います。 その他が選ばれなくてもテキストフィールドを丸出ししておいても問題はないのですが、ユーザー目線で考えたら、回答内容に応じて、入力すべきなのかどうなのかを感覚的にわかるようにした方が優しいですよね。 jQueryを使えば、そのようなフォーム機能の実装は簡単に行えますので、ご案内いたします。 まずはデモ今回やりたいことについて、デモ画面を用意しました。 「その他」を選択すると、テキストフィールド入力が有効になり、それ以外が選択されている場合は、無効になります。 ※デモ画面は見やすくするためにboot

iOSのinputで画面ズームがされないようにする方法 by shirushiru · 公開 2017年5月3日 · 更新済み 2017年5月3日 Webフォームで使われる、「input」。 <input type="text" name="example" value="" placeholder="名前"> みたいなやつです。 iOSの場合、この「input」項目にカーソルを合わせると、 ※iOSで見ると、ズームするはず。 画面ズームが作動して、入力欄部分にズームインします。 この自動で行われる画面動作が行われないようにしたい場合、どのような処置をしたら良いのか、ご紹介します。 画面フォーカスされる条件画面ズームされるのには、条件があります。 iOSでは、input要素に指定しているフォントサイズが「16px」未満だと、フォーカス時にズームされるという仕様になってます。 フォーカスを外

Web制作を自分で行い始めたとき、たとえば、h1、a、ul、liなどが、ブラウザごとの見え方が少しずつ違っていることに気づくと思います。 リセットcss（reset css）は、その違いをあらかじめリセットして、CSS制作を効率的にすることが目的です。 自分で設定するのもよいですが、「このタグはこういう設定にリセットしたらよいよ」っていう雛形を作っている人たちがいらっしゃいます。 そこで、人気のリセットCSSをご紹介します。 リセットcssのメリットとデメリット メリット ブラウザごとの表示の違いを、最小限に抑えることができる ブラウザごとの差異を気にせず、自分がスタイルしたい必要な部分だけスタイルすれば良い デメリット CSSの分量が多くなる リセットしっぱなしで、スタイルを当てていない要素がダサくなる といった感じでしょうか。まぁ、CSSの分量が多いといってもたかが知れているとは思いま

【CSS】メディアクエリとブレイクポイントの書き方 2018年版 レスポンシブデザインの基本 by shirushiru · 公開 2017年4月7日 · 更新済み 2018年1月19日 レスポンシブデザインの基本　メディアクエリとはメディアクエリとは、CSS2で可能だった「media」タイプを発展させた、CSS3の新しい要素です。 mediaタイプの主なものは、 screen（一般的ディスプレイ）、projection(プロジェクター)、print(プリンタ)、tv(テレビ)、all(すべて) などが挙げられます。 CSS2は上記のように、端末のタイプごとにスタイルを切り分けられることができましたが、それが限界でした。 たとえば、「ディスプレイ」といっても、今やスマホ、タブレット、PCと様々なデバイスが存在しており、それを一括りにしていては（端末毎にサイトを作る場合は別ですが）、見づらい