Page Not Found Where are you going to fly? You seem to have followed a route that does not exist.
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"(赤い背景色の領域)を固定にそれぞれする方法で、固
自分用にひと通りの動きを一覧化したものが欲しくて作ったのでシェアします。 リンクやボタンのホバー時にエフェクトを付けるのと同じように、画像にもホバー時に何かエフェクトを付けたいというときに使えそうなエフェクトのサンプルです。 CSS3を多用しているので全ブラウザで実装できるわけではありませんが、いずれもCSSのみを使用して実装したもので、拡大縮小・スライド・白黒・ブラー・フラッシュなど全15種類です。 共通のHTML・CSS サンプルはいずれも下記のようなHTMLを使用しており、CSSについても共通スタイルとしてそれぞれに指定しています。 CSSでは幅や高さを指定している部分もあるので、参考にされる際はこれらを自身の環境に合わせて調整してください。
プログラミング言語やフレームワークのロゴ、多くの開発者に利用されているwebサービスやツールのロゴ、シンプルでわかりやすくデザインされたファイルタイプ、フラットデザインで表現されたブラウザなど、いずれもweb開発に関連していると思うアイコン・アイコンフォントです。 普段のデザイン業務などにはほとんど使わないと思うものが多いですが、技術系ブログとかポートフォリオなんかでは便利そうです。 紹介しているアイコンを使用する際は、ライセンス等は各自で再度確認してください。 Devicons 言語・フレームワーク・Webサービス・ブラウザなど、Web開発関連のアイコンフォントセットで、見かけることの少ないツール系のロゴも多数用意されています。 Freebie: SVG Developer Icon Set SVGとAIの2形式が用意されている全17種類のアイコンセットで、見た目もカラーとモノクロの2タ
丸括弧() 頭から微妙な見栄えですが、**丸括弧()**を表現してみたものです。 HTMLとCSSはそれぞれ下記のようになっており、擬似要素を使って生成したものにborder-radiusを指定します。 <div class="parenthesis"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. ... </p> </div> .parenthesis { position: relative; width: 500px; padding: 15px 30px; -webkit-box-sizing: border-box; box-sizing: border-box; } .parenthesis::before, .parenthesis::after { position: absolute; top:
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く