コードを試したい場合だったり、プログラミングの学習をしたりするときに、開発環境を整えるのが面倒なことはありませんか？今回は面倒なアカウント登録も不要で、ブラウザだけですぐにプログラミングができるWebサービスをご紹介します。 Runstant http://phi-jp.github.io/runstant/release/alpha/ 対応言語：HTML, CSS, JavaScript ……
Webデザイナーがコードを書くべきか、書かないべきか？ これはたいへん物議をかもす話題です。一人分支払額が減るため、クライアントはコードが書けるWebデザイナーを好みます（他にも理由はあると思いますが）。一方でデザイン優先で考える人はコードについて、創造性を抑制する技術的な足かせになるといいます。更に議論をややこしくするのは、私達を取り巻く情報環境は常に複雑化しているということです。しかしながら、……
グリッド状に並んでいる画像を見たとき、白の交差部分に灰色の影のようなものが現れたことはありませんか？ これは幻覚ではなく、ハーマングリッド現象が起こったときに見えるものなのです。2ピクセル超の余白をとり、画像をグリッド状に並べた時にこの現象は起こります。この灰色の影のようなものは交差部分に焦点を合わせると見えなくなります。[caption id="attachment_1576" align="a……
box-shadowプロパティを使うと、簡単にボックスに影を付けることができます。デザインの幅を広げる上で、とても重宝するプロパティなので、是非覚えておきましょう。box-shadowプロパティの使い方まず基本的な記述の仕方を見ていきます。box要素{ box-shadow: 横方向 縦方向; }この様に、box-shadow: 横方向 縦方向; を追加するだけで、簡単に影をつけられま……
text-alignというプロパティはよく使わていますが、vertical-alignを知っていますか？ text-alignがテキストを横方向の左右真ん中の位置を指定するプロパティなのに対して、vertical-alignは縦方向の位置を指定するプロパティです。 ですが、このvertical-alignにはルールがあり、このルールを守っていないとうまくデザインが適用されません。今回は、verti……
自分で１からサイトを制作するのはハードルが高いという方や、CSSの勉強をしている方にお勧めしたいテンプレート7選です。 利用の際は配布元の利用規約に従ってください。 1.無料レスポンシブHTMLテンプレートNo.021 配布ページ 無料ホームページテンプレート.com様のテンプレートです。 レスポンシブデザイン対応で、表示領域が携帯の幅になると、メニューがアコーディオンタイプに切り替わります。シ……
様々なページを作成していると、ページ毎にコンテンツの容量に違いが出てきます。そうすると、縦の長さの違いに伴って、スクロールバーが表示されているページと、されていないページを行き来することで、表示の際にガタつきが生じます。スクロールバーが必要なページのスクロールバーを消してしまうと、コンテンツが全て見れなくなってしまう為、スクロールバーが必要な方に合わせるのが一般的です。つまり、画面を統一させるため……
メディアクエリはユーザーの環境を調べ、環境ごとに適したスタイルシートを指定しておいて自動で反映させることができるというものです。これを利用することで、ユーザーの環境や閲覧する時の表示サイズに影響されることなく、最適なデザインを保つことができます。CSSのメディアクエリの使い方ユーザーの閲覧環境によって表示を振り分ける方法は、media属性を利用することでも出来ましたが、今回ご紹介するCSSで使うメ……
セルの中が思ったより長文になってしまった場合や、表示する範囲が狭まってしまった時に、文字列が勝手に折り返してしまい、レイアウトが崩れることがあると思います。そんな時は、今回ご紹介する方法を利用することで、簡単に文字列の折り返しを禁止することができます。white-space: nowrapを利用する white-space: nowrapは、改行を強制的に禁止するとができるプロパティです。例を見て……
z-indexプロパティは、要素の重なる順番を指定することができるプロパティです。これを利用することで、よりcssでのデザインにバリエーションが増えます。そんなz-indexプロパティの使い方について、今回はご紹介します。z-indexプロパティとは先ほども記述した様に、z-indexプロパティでは要素の重なる順番を指定することができます。Y軸が縦方向、X軸が横方向なのに対し、Z軸は重なりのことで……