サンプルサイトの制作を通して、「Webサイトのコーディング」についてまとめました。 ここで言うコーディングとは、「HTMLで文書を書いて（マークアップして）、CSSで見栄えを整える（CSSコーディングする）」ことを指します。主に「Webデザイナー」と呼ばれる人たちが担う範囲のコーディングについて書いてます。 以下は目次です。クリックするとその項目へ移動します。 コーディングの下準備 ディレクトリの構造を考える ディレクトリの設置 Web開発環境について CotEditorというテキストエディタ Zen-Codingという便利なプラグイン その他のWeb開発環境 コーディング！まずはマークアップ（HTML） index.htmlの基本設定 トップページの内容をマークアップ コーディング！レイアウトを整える（CSS） style.cssの基本設定 トップページのレイアウトを整える <heade
Learn typed code through a programming game. Learn Python, JavaScript, and HTML as you solve puzzles and learn to make your own coding games and websites.
バイト先で「新ゆとり世代」と言われました。れこです。 HTML、CSSを省略して書けるZen-Codingの後見、 Emmetについて書こうと思います。 やれCoffeeだTypeScriptだSassだ〜と手をつける前に、 もっと簡単に、デメリット無く作業効率をあげられます。 CoffeeScriptやSassなどのプリプロセッサ系とは違い、 CoffeeやSassの知識を開発メンバー全員が持ってないとならず、 結局自由が効かなくなる、ということはありません。 個人から使えて、チームで使ってもなお良し。 さらに、展開後のカーソルの位置がいい感じだったりと、 細かい気配りまで完璧です。 そんなEmmetを 僕が頻繁に使っている機能に焦点を当てて、紹介したいと思います。 Emmetの導入 Emmetは各種エディタ・IDEのプラグイン形式で配布されています。 お値段は無料です。 Web系の人が
全世界で20万人を超える凄腕のコーダーが集うプログラミングコンテスト「TopCoder」。本稿では、アルゴリズム部門のSRMで取り上げられる問題を考えながら、論理的思考力およびコーディングのテクニックを養っていきます。 はじめに はじめまして。高橋直大です。本連載「最強最速アルゴリズマー養成講座」では、全世界で20万人を超える凄腕のコーダーが集うプログラミングコンテスト「TopCoder」について、そこで出題される数学・アルゴリズムのパズルを考えることで、コーディングのテクニックおよび論理的思考力を磨くことを目的に開始するものです。ここで扱う技法は主にアルゴリズムのそれですが、その根底にはロジカルな思考術が存在します。そうした能力を養いたい方にとって少しでも役に立てれば幸いです。 なお、本稿は必要に応じてコーディング例も紹介しますが、TopCoderで出題される問題の中から比較的やさしい問
一度書いたコードは二度と探さない！スニペットを究めて快適コーディング！【HTML, CSS, JavaScript】 ※この記事は2013年8月26日に執筆された記事です。現在は仕様が異なる可能性があります。 気がつけば繰り返し同じ単語で検索し、同じコードを書いている…なんてことはありませんか？「この部分の記述、もう一回使うことがあるかも」と思ったらぜひスニペットとして登録しておきましょう！ スニペットとは繰り返し登場するコードの断片、またはそれをすぐに呼び出せるように管理するエディタの機能のことです。自分がよく使用する記述をスニペットにしておけばいちいち検索したり、昔書いたソースを探ってみたりすることなく、使いたい時に正確な記述をサッと呼び出して使うことができます。 Dreamweaver、Sublime Textなどのオーサリングツールやテキストエディタにはスニペットを自在に使うための
お疲れさまです、モモコです。 ゲリラ豪雨に備えて折り畳み傘を常にバッグに入れているせいか、何となく肩が重いです。 今回はCSS3だけで作れるローディングアニメーションを5つご紹介します！ 閲覧の際にはモダンブラウザ（最新のGoogleChromeなど）をご利用下さい。 FADE LOADING FADE LOADING 入力した文字がふわっと浮かび上がるローディングアニメーション。 質感と動きが合っていてがとてもエレガントです。 CSS3 loading animation experiment CSS3 loading animation experiment DIRT3というゲームのUIにインスピレーションを得て作成されたローディングアニメーション。 多彩な変化がついており、とてもクールなアニメーションになっています。 CSS only loading spinners CSS onl
かなり今さら感はありますけど、ul・ol・li要素関連の備忘録です。 対応ブラウザ（特に一部のIEで未対応）とかそもそも使う場面がそんなにないとかの理由で使用頻度がかなり低いと思うのもありますが、低いからこそ使おうと思ったときにパッと思い浮かばなそうなので書き残しておきます。 list-style-type リストマーカーの種類を指定するプロパティlist-style-typeのメモです。 使用頻度が高いと思うのはulやolにデフォルトで設定されているdiscやdecimal辺りかと思いますが、他にもいろいろあるのと一部のブラウザでは未対応などあるので、パッと確認したいときのために一覧にしました。 画像はWin7 Chromeでの表示をキャプチャしたもの。 ChromeやFirefoxといったブラウザでは上記のように問題なく表示されますが、IEでは一部のマーカーが対応していない場合がありま
「テストコードは大切だよね」という話は良くしますが・・・ 恥ずかしながら、テストコードの書き方を知らないので、基礎から調べてみます。 参考にしたのはここ。 http://www.python.jp/doc/2.5/lib/module-unittest.html １．まず、unittestをimportして、unittest.TestCaseを継承したクラスを作成します。 ２．テストを行う前に、オブジェクトの作成などの事前処理を行いたい場合は、 「setUp」というメソッドを宣言します。 ３．テストメソッドを作成します。 ４．unittest.main()を呼び出すと、テストクラスの実行が開始されます。 ・・・といっても良くわからないので、ただ関数名を表示するだけの テストケースを作成して動かしてみます。 # -*- coding:utf-8 -*- import unittest #un
1年に1回は更新する Container Queriesの沼へようこそ2023-03-08UAスタイルシートとリセットCSSとは - 20232023-02-26脳内フィルターで見るCSSレイアウト2022-11-22劇薬の The New CSS Reset2021-07-20Sassを@importから@useに置き換えるための手引き2020-05-26 / 2022-09-29Container Queriesという手法 / CSS Advent Calendar 20192019-12-23レスポンシブwebデザインのコーディングでやってること2018-12-28宣言ブロックのCSS設計2017-07-18Webデザイナーに最低限知っておいてほしい、検索と置換(正規表現)2016-05-21画像をCSSで斜めにマスクした時の知見2015-04-10CSSで2カラムを作ってみる201
idの命名に迷ったら 2007-10-19 0 0 XHTML/CSS Role, XHTML 以前こんなエントリーを書きました。 id="header"で問題ないのでは id，class名をどうふるとよいか，しばしば悩みます。いくつかのパターンがあって，そのどれかを使うのですが，明確な基準というものはありませんでした。 XHTML Role 属性モジュール 先日W3Cから，「XHTML Role 属性モジュール」の最終草案が出されました。 XHTML Role 属性モジュール（日本語訳） 部分的に引用してみます。 概要 この仕様で定義される XHTML Role 属性は、作成者が要素に役割を与えるための属性です。機械で抽出可能な意味情報を要素に与えることで、XML を用いた言語に注釈を与えることができるようになります。ユースケースとして、アクセシビリティやデバイスアダプテーション、サー
The community of free, local coding clubs for kids and teensIn over 100 countries, CoderDojo is the free, fun way to learn coding for kids and teens. Public, accessible venues Dojos take place in public, accessible spaces such as libraries, community centres, and even cinemas. Some venues provide equipment for kids and teens (Ninjas) to use. Enthusiastic volunteers Dojos are run by amazing, suppor
Web 制作の現場で使う jQueryデザイン入門 | バシャログ。を紹介されて私も読みました。復習のつもりで読みましたが、.load()で、ページの断片を読み込む方法を知らなかったりして、ためになりました。さて、今日は、jQueryとは関係なくNetBeansでzen-codingを行う方法を紹介します。 zen-coding = 効率的なHTMLコーディング 私も最近ishidaに教えていただいたのですが、zen-codingがブログでとりあげられるのをよく見かけるようになりました。zen-codingを簡単に説明しますと、HTMLのタグを効率的に入力する方法(そしてそのプラグイン)のようです。例えば、zen-codingを組み込んだAptanaでは p#header と入力して、ショートカットキーを入力すると、 <p id="header"></p> という風に入力できます。どのよう
Zen Coding で html をパパっと書くのはけっこう慣れてきたんですが、CSS をパパっと書くのはほとんどやったことなかったなあ、ちゃんと覚えたいなあと思いまして、とりあえずチートシートを探してみました。 Zen-Coding のオフィシャルに PDF があったんですが、全部盛り込まれててちょっと量が多い…覚えられない… できたら印刷用に 1ページで、必要なやつだけまとまってるやつが欲しい… ということで、我流で、チートシートを作ってみました。 1ページに納まるように自分が使わなさそうなやつは外して、抜粋した感じで入れてあります。 ↓こちらの PDF です http://monaural.net/lab/zen/zen_css_cheatsheet.pdf これで勉強しまっす。 "margin-left" は "ml", "text-align" は "ta" みたいな感じでけっ
Zen-Codingのダウンロード 下記のURLよりNetbeansようのファイルをダウンロードしてください。 http://code.google.com/p/zen-coding/ Netbeansは、あまり人気がないのか、サポートも編集用のスニペットだけのようです。 Netbeansにファイルを Netbeansを立ち上げてます。 メニュー＞ツール>オプションを選択します。 オプションメニューの下にある、インポートを選択してます。 次に先程ダンロードした>Zen-Codingのデータを参照より選択します。 チェックボタンがでるのですべてにチェックして、了解を押します。 あとは、Netbeansを再起動したら終了です。 これで導入は終了です。 使用方法と設定 使いかたは、ショートコードを入力してからtabキーで実行されます。 Example [html]html:xs[/html] を
HTMLの記法について 基本的には「div」の様に要素を省略せずに記述して、それを展開すると「<div></div>」という形に展開されます。 このときに展開できる要素は以下の公式ドキュメントに明記されていますのでそちらを見るとよいです。 Zen HTML Elements Zen HTML Selectors Zen CheatSheets 基本的な記法 ひとつずつ順番に記述して説明していきます。しばらく初歩的な説明になるのである程度知っている方は飛ばしていただいて良いかと思います。 まずものすごく基本的な記法である、単独タグの記法について説明を行います。 cssのセレクタをイメージしながら見ていくと納得しやすいと思います。 タグだけ変換 変換前 div 変換後 <div></div> デモ 文末でtabを押してください div 変換後、div要素の間にカーソルが移動するので、すぐにテキ
Smartyとは Smartyは、PHP用のテンプレートエンジンです。これを利用すると、ロジックとデザインを分離して管理することができます。 一つのPHPファイルにロジックとデザインの両方を書いて作成することも可能ですが、分離することでプログラムの見通しが良くなります。また、プログラマーとデザイナーの分業など、複数の人が制作に関わる場合、特に威力を発揮します。 Smartyの利用方法 Smartyを利用するには、公式サイトからダウンロードしたファイルを、PHPから読み込める場所に設置します。その後、PHPプログラムから require_once 'libs/Smarty.class.php'; のように Smarty.class.php を読み込めばOKです。（Smarty.class.php がSmartyの本体です。） 公式サイト Smartyの詳細な解説は、以下の公式ページに記載され
イチオシ [[data.opening_days_date_label]] [[data.opening_days_time]]〜 [[data.tertiary_area_name]] ([[data.secondary_area_name]]) 男性 [[ entryStatus(data.application_deadline_date, data.entry_status_male) ]] [[data.condition_male_from]]〜[[data.condition_male_to]]歳 / 女性 [[ entryStatus(data.application_deadline_date, data.entry_status_female) ]] [[data.condition_female_from]]〜[[data.condition_female_to]]歳
このドキュメントは、Zend Framework に貢献してくださる開発者個人 (あるいはチーム) のためにコードの書式やドキュメント作成の指針を示すものです。 Zend Framework を用いて開発をする人たちにとってもこのコーディング規約は有用でしょう。 これに従えば、Zend Framework のコードとの一貫性が保てるからです。 そのためには、ここで完全なコーディング規約を示す必要があります。 注意: 詳細なレベルまでの設計指針を示すこと以上に、 それを標準規格として確立することが大切だと考えています。 Zend Framework コーディング規約の指針は、 これまで ZF プロジェクトでうまく回っていた方針をまとめたものです。 このライセンスのもとで、 そのまま使用するなり多少変更して使用するなりすることができます。 ZF コーディング規約では、次のような内容を扱います。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
