素晴らしいアイデア満載のクリエイティブなスタイルシートのテクニックを紹介します。 これからのプロジェクトに使ってみたくなるような実用的なものから、CSSでこんなこともできるのか!という驚きのテクニックまで、今年もCSSに注目です。
![CSSのすごいアイデアが満載!実用的なものからスゴ技までスタイルシートのテクニックのまとめ](https://cdn-ak-scissors.b.st-hatena.com/image/square/d1689646e95f328c9043415a6af2a82b4991deb1/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201501%2F2015031002.gif)
ここでは、次世代モバイル機器として台頭してきているiPhoneについて、実際のiPhone対応サイト制作やアメリカ動向とともに、今後の展望を占います。 iPhone(日本商標:アイフォーン)の基礎知識 iPhoneは、2007年6月29日にアメリカで発売されたスマートフォンに位置付けられる携帯電話です。それまで、アメリカ国内でモバイル経由でWebにアクセスしている人は全体利用者数のうち10%以下でした。しかし、iPhoneにはWebブラウザのSafariが標準搭載されており、従来のモバイル特有のインターフェースによる制限がなくなったうえ、無線LANに対応していることから、登場以来多くの人がiPhone、すなわちモバイル経由でのWebブラウジングを行うようになりました。 また、iPod touchと共通のタッチパネルを採用することにより、「つまむ」「広げる」「滑らせる」などの操作が可能
Vertically Center Multi-Lined Text demo デモでは、一行、複数行ともに中央に配置されています。 仕組みは、吹き出しに「display: table;」、その中のパラグラフに「display: table-cell;」を指定し、天地左右中央に配置します。 HTML <div class="area"> <div class="bubble"> <p>To look best, text should really be centered inside this bubble both vertically and horizontally.</p> </div> </div> CSS .area { width: 300px; height: 300px; background: url(../images/abe-bg.png) no-repeat;
こんにちは、霙(@xxmiz0rexx)です。 立て続けに記事を書いてしまうほど愛してやまない魅力的なエディタ『Sublime Text』。 便利な機能は星の数ほどありますが、今回はこれだけ覚えておけばSublime Textの恩恵にあずかれるはず!!という、 私のオススメショートカットキーたちをご紹介したいと思います:) ※Mac版です 覚えておきたいショートカットキー とりあえず一番オススメの3つをご紹介。とっておきの便利な子たちがいます。 私がSublime Textを使う理由の最たるものがこれで、もっと言うとこれがあるから使っていますw みぞれが選ぶ最も便利なショートカットキー3個 入力コマンド 結果
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
Web担当者さんへ 今回は技術的な説明が多く、実際に設定ファイルを操作できない場合もあるかと思います。リダイレクト関連の設定は一歩間違えると致命傷です。場合によっては、対策が必要かどうかの検討が必要になるでしょう。動的URL、静的URLとは何かURLには大きく分けて、動的URLと静的URLの2種類があります。 動的URL(ダイナミックURL)の例: http://www.example.com/dir1/file.html?query1=param1静的URL(スタティックURL)の例: http://www.example.com/dir1/file/query1/param1/その違いは、URL中に「?」「=」「&」などのパラメータが含まれているかどうかです。 SEOの世界では、コンテンツが動的に生成されるケース、つまり特定の条件に対するページが単一のHTMLファイルで用意されておらず
2013-12-18 ブラウザ開発で使用した超絶便利なオープンソースライブラリ10選 こんにちはnasustです。Showrtpathブラウザ( http://showrtpath.com )の開発で使用したオープンソースを全て紹介したいと思います。 正直言って、このオープンソースが無ければ3倍近くの開発期間が延びたでしょう。ちなみにShowrtpathブラウザの開発期間は、大凡2人月ぐらいです。 BlocksKit https://github.com/pandamonia/BlocksKit このライブラリが無ければ、iOS開発の面白さは半減するでしょう。iOSのクラスにあるデリゲータと対応するBlocksのメソッドを追加してくれます。 [Button addEventHandler:^(id sender) { //Buttonが押された時の処理 } forControlEvents
すべてのモダンブラウザとIE8+に対応したグリッドを複雑なフレームワークを使うのではなく、シンプルで簡単に実装するスタイルシートのチュートリアルを紹介します。 Don't Overthink It Grids 下記は各ポイントを意訳したものです。 ラッパー カラム フロートのクリア ガター(溝) 外側のガター(溝) カラムの追加 対応ブラウザ ラッパー まずは、グリッドを包むラッパーです。 グリッド用のラッパーはセマンティック的には特に意味がなく、ただのラッパー(包み紙)です。使用する要素はdivがよいです。 HTML <div class="grid"> <!-- 100% wide --> </div> 表示例 ラッパーとなるdiv要素はブロックレベルのエレメントで、この中にグリッドを包み込みます。 カラム カラムはよく見かけるメイン コンテンツとサイドバーの2つです。 メイン コンテ
画像が右からスライドし、それに続きコンテンツを配置した半透明のパネルが追いかけるようにスライドするコンテンツスライダーを紹介します。 実装はHTML/CSSで、スクリプトは無しです。 radio click through スライダーの動作の仕組みはラジオボタンで、チェックが入ったコンテンツを表示します。 実装はこんな感じ。 HTML 各パネルはリスト要素で、ラジオボタンとラベル、コンテンツがセットになっています。 <div id="gal"> <nav class="galnav"> <ul> <li> <input type="radio" name="btn" value="one" checked="checked"/> <label for="btn"></label> <figure> <img src="image.jpg"/> <figcaption> <h4>見出し</h
HTML5はXHTML1.0やHTML4を継承しつつ、使い方が大きく変わった点もあります。 よく利用されるHTML5の各要素の誤用されがちな例とそれを正しく適切に使う方法を紹介します。 You're Doing it Wrong: Common HTML Tag Misuses [ad#ad-2] 下記は各ポイントを意訳したものです。 <br>の誤用 <br>の間違った使い方 <br>のよくある誤用は、コンテンツ間にスペースをつくるために使用することです。 これはWYSIWYGエディタで作成するとよく起きる現象で、複数の空の行で隙間をつくります。 <br>の適切な使い方 <br>は文章を改行するために使用するものです。 段落に分けるには<p>を使用し、文章同士の間をあけるためにはCSSのmarginなどで間隔を設定します。 <div>の誤用 <div>の間違った使い方 HTML+CSSでペ
デモページ [ad#ad-2] 実装 全コードはデモページに記載されているので、ここではラインのスタイルをピックアップします。 HTML マークアップはシンプルなリストで、ul要素にclassを指定するだけです。 <ul class="container"> <li>First list item</li> <li>Second list item</li> <li>Third list item, etc.</li> </ul> CSS 両端がフェードするラインはCSS3グラデーションで、linear-gradientを使います。 シンプルに書くと下記のようになります。 background–image: linear–gradient(rgba(0,0,0,0), rgba(0,0,0,0.1), rgba(0,0,0,0)); 両端が「0」で、真ん中が「1」です。 また、このグラデー
10 Very Useful WordPress Hacks [ad#ad-2] 下記は各ポイントを意訳したものです。 リンクを新しいウインドウで開く 検索結果ページのインデックスを阻止 編集ボタンを設置 コントロールパネルのリンクを設置 データベースエラーページのカスタマイズ ページ内にもう一つのページを埋め込む 著者の情報を加える Facebookのボタンを加える WordPressのアドミンバーを下に移動 管理者用のパスワードをリセット リンクを新しいウインドウで開く デフォルトでリンクを常に新しいウインドウで開くようにします。 「wp-admin」フォルダ内の「quicktags.js」を変更します。 変更前 if (!edCheckOpenTags(i)) { var URL = prompt('Enter the URL' ,defaultValue); if (URL) {
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く