意外と知られていないHTMLの基本の話
私はWeb制作が初めての方向け講座だけでなく現役の制作者の方向けに様々なWeb講座をしていますが、現役のWeb制作者の方でもHTMLに関して意外と知られていないんだなと思うことがいくつかあります。 特に、HTML5以前の古いHTMLの使い方のまま覚えている方が多いように思われますので、この記事ではそれを中心に取り上げてみました。 なお、この記事はHTML 5.1およびWHATWG HTML Standardの仕様書を参考に書いています。 width=”100%” のように数値以外の文字列を “” に入れるのはNG たとえばimg要素などで、ブラウザの幅いっぱいに画像を表示したいという場合、昔はimg要素に width=”100%” のような属性をつけることがありましたが、HTML5からはwidthなどの属性値に数値以外を含めることができなくなっています。（つまり%などの単位を含めることがで
Markdown記法 とりあえずこれだけ覚えれば大丈夫 基本のチートシート - megane9988のブログ
まだ使ってない人向けです。WordPressの場合は、Jetpackが提供してくれるMarkdownを利用することで、普通にタグを書くよりもずいぶんブログを書く時間が短縮できますよ。 見出し [code lang=text] # h1 ## h2 ### h3 // 増やした数だけ数字が増える [/code] リスト [code lang=text] – リスト – リスト – 子要素(先頭にタブインデント1つ) – 孫要素(先頭にタブインデント2つ) – 子要素(先頭にタブインデント1つ) – リスト [/code] 数字のリスト [code lang=text] 1. リスト 2. リスト 3. リスト //数字を増やさなくても同じ結果になる 1. リスト 1. リスト 1. リスト [/code] リンク [code lang=text] [リンクのテキスト](http://hoge
CSSコーディングで泣かないためのSassの基礎知識と10の利点
CSSコーディングで泣かないためのSassの基礎知識と10の利点：爆捗！ WordPressテーマ作成ショートカット（3）（1/3 ページ） 本連載では、CMSのスタンダードでもある「WordPress」のテーマ作成を、Dreamweaverをメインに用いてさまざまなモダンな技術を組み合わせながら爆発的に捗（はかど）らせる方法を解説していく。今回は、現場におけるCSSコーディングの3つの問題点、Sassの概要と主な10の機能、SASS記法とSCSS記法の違いなどを紹介。 本連載「爆捗！ WordPressテーマ作成ショートカット」では、初回の「Dreamweaverで始めるWordPressサイト構築の基礎知識」で、「Adobe Dreamweaver CC」（以下、Dreamweaver）でWordPressのテーマをカスタマイズできるようにする環境構築や設定を行い、前回の「WordPr
WordPress のややこしいループ処理はこう書けばいい
慣れてないとわかりにくい、慣れてくるとめんどくさい。そんな WordPress のループ処理をシンプルにする方法。 メインループの場合 これを、 while ( have_posts() ) : the_post(); // 記事を表示 endwhile; こう。 do_action( 'mytheme/loop', '記事出力テンプレート名' ); もちろん、これだけだとシー…ンとしてしまうので functions.php に以下のような処理を書いておきます。 /** * WordPress main loop. * * @param string $slug The slug name for the generic template. * @param string $name The name of the specialised template. */ add_action(
_s を使ったテーマ作成 アーカイブ | Gatespace's Blog
_s（underscores） というスターター・テーマを利用したテーマ開発の手順を書いていきます。 http://underscores.me/ なお、ある程度テーマの作成（カスタマイズ）に慣れた人向けの内容となりますので、ご了承ください。
ちょいちょい忘れる『WP_Query』の使い方 | 予習と復習
WordPressでテンプレート作る時に、「WP_Query」は一番使ってる気がするのになんだかんだで、いっつも検索して調べてるので、覚えるためにも大雑把にまとめてみます。 『WP_Query』ってどんな時に使うのか？ WordPress のページの一部でメインループではない、独自のループ設定をしたい時なんかに query_posts() の代わりに使ったりします。 使い方は、欲しい引数の条件を設定してループに教えてあげればいい。 例えば、カテゴリ ID 1 の記事を 5 件欲しかったら <?php $args = array( 'cat' => 1, 'posts_per_page' => 5 ); $the_query = new WP_Query( $args ); if ( $the_query->have_posts() ) : while ( $the_query->have_
完璧に分かる！コーディング一連の流れと知識(HTML5+レスポンシブ+WordPress)
作成：2014/01/27 更新：2015/08/07 Web制作 > 前回、Web制作の一連の流れを書きましたが、今回は少し掘り下げて「コーディング」についてのフローをまとめます(HTML5+レスポンシブ+WordPress)。会社によって違うと思いますが、ざっくりとしたコーディングの流れと気をつけておきたいことをメモしています。 エンジニア速報は Twitter の@commteで配信しています。 もくじ コーディング前の準備 １．仕様書の確認 ２．入稿データの確認・スケジューリング HTML5 マークアップ ３．テンプレート作成 ４．条件付きコメント ５．GCF＋キャッシュクリア ６．OGP記述 ７．ファビコン ８．アウトライン作成 ９．バリデーターをチェック CSS の設定 １０．ノーマライズスタイル レスポンシブデザイン設計 １１．モバイルファーストを基準に設計 １２．プログレッ
覚えるべきWordPressテンプレートタグ | はじめてのWordPressまとめ
はじめに このサイトは、WordPressのカスタマイズが出来るようになるための参考サイトとして作成した。 もし興味を持った事があり、それに対して深い知識を得たいと思うならば、他サイトを参考にしてもらいたい。 WordPressのインストール方法 XAMPPでローカル環境構築して、簡単WordPressインストール 今回はこちらの場合で説明を行う。 USBメモリにWordPress用のローカル環境を3分で構築、お手軽過ぎるInstant WordPress すぐにWordPressを使いたい場合にオススメ。 WordPressをカスタマイズするために必要な知識 WordPressのカスタマイズでは、大きく分けて下記の６つを理解しなければならない。 ・WordPressテンプレートタグ http://wpdocs.sourceforge.jp/テンプレートタグ ・WordPress条件分岐タ
今日から使える！ Sass/compass ゆるめ勉強会
Sass/Compass ってよく聞くけど、なんか難しそう…って思っている主にデザイナー/HTMLコーダーさん向けの勉強会で利用したスライドです。勉強会にはハンズオンが組み込まれていたので、この資料には中途半端な部分がありますがご容赦ください。 (*'-'*) 内容的には、基礎的な事柄を、活用のための考え方を添えて解説しています。何かの参考になれば幸いです。
Creasty | Yuki Iwanaga
Hello. I'm Yuki Iwanaga, a software engineer pursuing beauty in both design and engineering
【WordPress】ブログのシングルページとその他ページの「h1」タグを見直してみました！ | きになるnet
ブログを更新いくにつれて、ブログのシングルページとその他（インデックスページや、カテゴリページなど）のページの「h1」タグを見直した方がいいのではないかと思っていたので、唐突なのですが自分なりに今回見直してみることにしました。 ※SEOに関して、全くの素人ですが素人なりに考えてみました。 見直す点 WordPressのテーマは自作をしているため、今まで「h1」タグはどのページもブログタイトル（ロゴ）を指定していました。 <h1> <a id="logo" href="<?php bloginfo('url');?>">きになるnet</a> </h1> これだと当たり前なのですが、どのページを開いても「h1」タグはブログタイトル（ロゴ）のまま… 「h1」タグは、1ページに1つと確か本で読んだ記憶があるので、インデックスページや、カテゴリページ等なら記事が多くあるため、「h1」タグはブログタ
WordPress のコアファイルで見つけたカッコイイ PHP コードの書き方・関数のまとめ
while ( $term = array_shift($terms) ) $_terms[] = $term->name; get_terms() in wp-includes/taxonomy.php タームオブジェクトの配列から必要な値（上記ではターム名）のみを配列に入れています。array_shift() でオブジェクトを順に取得しつつ while の条件式にしているところがカッコイイですね。カスタム投稿タイプオブジェクトを取得して slug => label の配列を作る時などにも便利な書き方です。WordPress Coding Standards 的に大丈夫なのかな？と思いましたがセーフみたいです。 試しに速度を計測してみたところ、普通に foreach でループさせた方が速かったです。このコはカッコだけでした、ぐぬぬ。 function __construct( $mana
Markdownを導入してみたから記法まとめ。 | Ginpen.com
めもめも。 wiki記法みたいな書き方で色々できるアレです。導入してみたので、記法をまとめてみました。 導入したのはこれ。 WordPress › Markdown for WordPress and bbPress « WordPress Plugins “markdown”でプラグイン検索するとたくさんヒットするんですが、公開前に手動で変換ボタンを押さなくちゃいけなかったりするものもありました。これはそんな事はなくて、書いておけば勝手に変換して表示してくれます。パフォーマンスはその分悪いのかな……？ これを選んだ理由はそれくらいで、またその利点も他のプラグインが備えている事もあるかと思いますが、とりあえず使ってみます。他にもっと便利そうなのあれば教えてください。 あと後述してますが、SyntaxHighlighterと競合してぐちゃぐちゃになりました。これはSyntaxHighligh
WP-Mix | A fresh mix of code snippets and tutorials
Block Multiple IP Addresses from Text File with PHP Here is a fun little tutorial. It shows how to block multiple IP addresses that are listed in a plain text file. It’s a nice little system to block bad IP addresses without using any database. For example, this is useful if you’ve got a bunch of IP addresses that you want to block quickly. […] CSS Selectors and Default Styles for the WordPress Ad
Web制作者の覚醒剤CodeKitでマンモスうれぴー(はぁと
head cleanerと併せて高速なWebサイト作りに励みたいものね。 SASS, Lessのコンパイル Web制作やっているなら、SASS/SCSSとかLessのことは知ってると思うけど、CodeKitはこれらを保存するたびにコンパイルしてくれるわ。あとはSublime Text2なんかのエディタがあれば、特にコンパイルを意識しないでもコーディングできるわね。ターミナルに苦手意識があっても問題無しよ。 ちなみに、Coffee ScriptとかHaml、Jade、Stylusなんかもコンパイルできるから、Ruby on RailsやNodeJS使ってる人にもおすすめよ。 おすすめポイント1. 全部入り CodeKitのお勧めポイントは「全部入り」なことね。SASSやLessのGUIコンパイルツールは無料で色んなところにあるんだけど、私はこういうユーティリティツールを何個もインストールする
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
使いやすいWordPressのためのCSSのつくりかた
クリーンな WordPress サイトのための PHP コーディングのお作法 ― 計画的に WordPress を拡張していくためのフレームワーク思考 | WordCamp Tokyo 2011
underscores (_s) を使おう！ ― WordPressとおやつの会 Dec. 2012
Word bench千葉ーphp超初心者のための繰り返し処理の書き方
WP Emmet