コーディング - ページ 23

この記事は私たちの一部です 「HTML 5 / CSS 3チュートリアルシリーズ」 - あなたをより良いデザイナーや開発者にするためのお手伝いをします. ここをクリック 同じシリーズの他の記事を見る. CSSには、次のような特定の条件で要素を選択できるようにするセレクタがいくつかあります。 ホバー, ：フォーカス, ：アクティブ, それでも今日はこれらのセレクタをカバーしません。まだほとんど知られていないがほとんどのWebデザイナーによって使用されている方法を見ていきます。 ではない セレクタ、または否定セレクタとも呼ばれます. それは何をするためのものか? きっと ではない 名前自体はすでにその機能を説明しています。 指定された要素または条件の反対. 例えば： この構文は以外の要素を選択します p （段落）. ：しない（p） 以下の構文例では、 div する要素...

この記事は私たちの一部です 「HTML 5 / CSS 3チュートリアルシリーズ」 - あなたをより良いデザイナーや開発者にするためのお手伝いをします. ここをクリック 同じシリーズの他の記事を見る. 私がCSS3について大好きなことの一つはセレクターに頼ることなく要素を明確にターゲットにすることを可能にするセレクターの新たな追加です。 クラス, id または他の要素属性、そしてここでカバーするものは以下のセレクタです。, ：ファースト・オブ・タイプ. の ：ファースト・オブ・タイプ selectorは指定された要素の最初の子をターゲットにします。たとえば、下のスニペットは最初の子をターゲットにします。 h2 Webページ上. h2：最初の型/ *スタイル宣言* / の ：ファースト・オブ・タイプ に等しい ：タイプのn（1）, それだけではなく 最初 タイプの場合は、さらに2番目、3番目などを選択できます。次のスニペットは2番目をターゲットにします...

この記事は私たちの一部です 「HTML 5 / CSS 3チュートリアルシリーズ」 - あなたをより良いデザイナーや開発者にするためのお手伝いをします. ここをクリック 同じシリーズの他の記事を見る. さほど昔ではありませんが、 ボックス Webページでは、 div, 指定します 100px 幅と高さの両方について パディング にとって 10px との境界 10px 同様に. div width：100px;高さ：100ピクセル。パディング：10px。ボーダー：10px solid #eaeaea; ブラウザは、ボックスのサイズを140pxに拡大します。この場合、幅と高さの合計140pxは、追加されたサイズで構成されます。 パディング そしてその...

この記事は私たちの一部です 「HTML 5 / CSS 3チュートリアルシリーズ」 - あなたをより良いデザイナーや開発者にするためのお手伝いをします. ここをクリック 同じシリーズの他の記事を見る. の 変換モジュール CSS3での驚異的な追加機能は、Webサイト上の要素を次のレベルに操作する方法です。. 私を本当に驚かせるいくつかの実験があります、このような例。しかし、CSS専用のアイコンのように、どうにかしてオートボットに変身するようなものを作成するつもりはありません。それは、実に現実的にも使用できないためです。. 代わりに、今回は、CSS3の2次元変換の基本について検討し、基本レベルでどのように機能するかを確認します。. 構文 CSS3変換モジュールは、基本的に並進、拡大縮小、回転、傾斜などの要素をある程度変換することを可能にします。. 公式の構文は 変換：メソッド（値）. しかし、まだ初期段階にある他のCSS3のすばらしい追加のように、現在のブラウザはまだ変換を実行するために構文バージョンを必要とします。したがって、完全な構文は次のようになります。 変換：メソッド（値）。 / * W3C公式構文* / -o-transform：method（value）; / * Opera 10.5以降*...

真にオープンで包括的なWebには、障害のあるユーザーが支援技術に依存して動的なWebコンテンツと最新のWebアプリケーションを楽しむことを可能にする技術が必要です。 W3CのアクセシビリティWeb標準は、障害のあるユーザーが効率的に使用できるAccessible Rich Internet Application（ARIA）をWebに追加することを目的としています。. ARIAは、Web Accessibility Intitiative（WAI）によって公開されている多数のアクセシビリティ標準およびガイドラインの1つです。 HTMLドキュメントに簡単に挿入できる追加のマークアップを提供します。 WAI-ARIAはOpen Web Platformをターゲットとしたクロスプラットフォームでクロスデバイスのソリューションなので、Webサイトだけでなくゲーム、デジタルエンターテインメント、ヘルスケア、モバイル、その他の種類のアプリについても考えてください. この記事では、WAI-ARIA規格の助けを借りて、HTML文書にアクセシビリティを追加する方法について説明します。. ARIAフレームワーク HTMLの構文は、開発者が要素を正しく記述し、その役割を識別し、それらの間の関係を指定することを常に可能にするわけではありません。それが彼らの感覚を完全に所有している訪問者にとってめったに問題ではない間、それは援助技術ユーザーがスクリーンで何が起こっているかについて理解して、彼らのオプションを模索するのを妨げることができます. これはARIAが私たちの助けになるポイントです。というのも、それによってさまざまな要素の目的を定義することが可能になるからです。 ランドマークの役割, そしてその性質を説明する アリアプレフィックス属性. アリアプレフィックス属性には2つのタイプがあります。 プロパティ ページのライフサイクルを通して変化する可能性が低い機能について説明します。 州 ユーザーとのやり取りによって頻繁に変化する可能性があるものに関する情報を提供します。. ランドマークの役割 ランドマークの役割 ARIAのRoles Modelの最もよく知られた形式があります（他のものはAbstract Roles、Widget Roles、およびDocument...

WordPressの開発者が子テーマを使い始めている理由はいくつかあります。彼らはあなたに別の既存のテーマの上にユニークなレイアウトをカスタマイズする機会を与えます。これは自分自身のテーマを構築して遊んでみたい初心者に最適です。. さらに、多くのプレミアムデザインは時間の経過とともに新しいアップデートをリリースします。コアテーマファイルに変更を加えている場合、それらは更新を実行するときに上書きされますが、子テーマは別々になっていてきれいに隠れています。これは、既存のプレミアムテーマを構築し、その過程での時間を節約できることを意味します。. このガイドでは、WordPressの子テーマを作成するための基本的な概念と、それがなぜそんなに良いアイデアなのかを紹介します。. 入門 子供のテーマは見かけほど難しくありません。親テーマを使用しないことの利点は、すべてのHTML / CSSを最初から作成する必要がないということです。子テーマはあなたが含むテンプレートファイルを自動的に使用します。 sidebar.php または footer.php. しかし、それらが見当たらない場合、あなたの子テーマはその親から同じファイルを引っ張ります。. この機能は、既存のテンプレートをカスタマイズするための非常に大きな自由を提供します。クリスマスや新年のデザインパターンを追加するなど、特別なイベントのためにあなたのウェブサイトの周りのエリアを修正するのにも最適です。. 必要なファイル WordPressで子テーマを設定するには、単一の.cssスタイルシートしか必要ありません。また、新しいディレクトリを作成する必要があります。 / wp-content /テーマ あなたの子供のテーマを収容するフォルダあなたに注意を払う ではない このフォルダを親テーマの中に作成しますが、それと並行して同じテーマのディレクトリに作成します。. 多くの場合、開発者は新しいCSSファイルと同じフォルダにfunctions.phpとscreenshot.pngを含めます。スクリーンショットはあなたのWordPress管理者パネルに表示され、機能テーマファイルはたくさんのバックエンドの変更に使用することができます。. しかし今のところ私達は主要なスタイルシートに焦点を合わせるべきです。これは一般的に呼ばれています style.css そして、重要なメタ情報を持つコメントヘッダを含みます。親のディレクトリ名を含めると、テーマは子としてのみ表示されるため、これは重要です。以下はヘッダコメントの例です。 / *テーマ名：Twenty Eleven ChildテーマURI：http：//example.com/説明：Twenty Elevenデザインの子テーマAuthor：Jake Rocheleau作者URI：http：//www.hongkiat.com/blog/テンプレート：twentyelevenバージョン：0.1...

日付の形式は地域や言語によって異なるため、ユーザーに言語や地域に固有の日付を表示する方法を見つけることができれば常に役に立ちます。. 2012年12月、ECMAはJavaScriptの国際化APIの仕様をリリースしました。国際化APIは、言語と言語仕様に従って特定のデータを表示するのに役立ちます。それはに使用することができます 通貨、タイムゾーンを特定する もっと. この記事では、検討します 日付フォーマット このAPIを使う. ユーザーのロケールを知っている ユーザーの優先ロケールに従って日付を表示するには、まずその優先ロケールとは何かを知る必要があります。現在それを知るための最も確実な方法はユーザーに尋ねることです。ユーザーにWebページで好みの言語と地域の設定を選択させる. しかし、それが選択肢ではない場合は、次のように解釈できます。 受け入れ言語 ヘッダを要求するか、または navigator.language（ChromeおよびFirefoxの場合）または navigator.browserLanguage（IEの場合）値. これらのオプションのすべてがブラウザのUIの優先言語を返すわけではないことに注意してください。. var language_tag = window.navigator.browserLanguage || window.navigator.language || "en"; // 'en-GB'のような言語タグを返します 国際化APIの確認 ブラウザが国際化APIをサポートしているかどうかを知るために、グローバルオブジェクトの存在を確認することができます。 国際空港. if（window.hasOwnProperty​（ "Intl"）&&...

Webサーバーをカスタマイズするためのさまざまなツールの中で、.htaccess構成ファイルは非常に優れた資産です。あなたはできる 文書タイプ、構文解析エンジン、URLリダイレクトを素早くリセットする, そして他の多くの重要な機能。あまり技術的ではないウェブマスターは、あなた自身の.htaccessファイルを管理することの詳細に入ることができないかもしれません。しかし、トピック自体は興味深いものであり、いくつかの調査に値する. この記事では、WebマスターおよびWeb開発者向けの、より意図的な概念のいくつかを紹介します。誰でも Apacheサーバー上で自分のWebサイトを立ち上げる 間違いなく彼らの.htaccessファイルを管理する方法を理解したいと思うでしょう。それ カスタマイズ性が高い そしてそれ どのWeb言語でも動作可能 PHPからRubyへ. この記事の最後に、いくつかの外部Webアプリケーションを追加しました。 初心者が動的に.htaccessファイルを生成できるようにする. .htaccessファイルを使う理由? これはすばらしい質問です、そしておそらく私たちは答えることから始めるべきです “.htaccessファイルとは何ですか？”? これは、Apache Webサーバーによって使用される非常に特別な設定ファイルです。 .htaccessファイルはWebサーバーに伝えることができます さまざまな形式の情報を提示する方法、およびさまざまなHTTP要求ヘッダーを処理する方法. 本当にそれはの手段です 分権 Webサーバー設定を整理します。 1台の物理サーバーに、それぞれ独自の.htaccessファイルを使用して50の異なるWebサイトを保持できます。それはウェブマスターに多くの力を与えます。そうでなければ不可能です。しかし、なぜあなたはそれを使うべきですか? 最大の理由はセキュリティです。あなたはできる 特定のディレクトリをロックアウトするか、パスワードで保護する. これは、プライベートなプロジェクトや、少しセキュリティを強化したい新しいコンテンツ管理システムに最適です。しかし、404エラーメッセージを特定のWebページにリダイレクトするなどの一般的なタスクもあります。. これは1行のコードだけを取ります そしてそれは訪問者が行方不明のページにどう反応するかに劇的に影響を与えることができます. .htaccessファイルは理解する価値があると他の人に納得させるために私が言うことができることは実際には多くありません。実際に動作していることが確認できたら、この小さな設定ファイルから得られるすべての値を認識することができます。また、この記事の残りの部分で、Webマスターを.htaccess構成の管理に照らし出すための洞察に富んだトピックをいくつかご紹介します。. アクセスを許可/拒否...