Coder's Mind 〜 コーディングするときに大事にしている心がけ 〜 | セミナー | mkasumi.com
この記事は「Coder's Mind 〜 コーディングするときに大事にしている心がけ 〜」というタイトルで、5月26日（土）に開催されたWordBench三重 第1回勉強会「WordPress15周年を祝う会＆Web制作関連のおはなし」でお話しした内容を改めてブログにまとめます。 この記事では具体的なソースコードの実装方法や例などは出しません。今までの5年間マークアップエンジニアとして働いてきて、納得いくコーディングができるようになった考え方の軸を紹介します。勉強会の参加者は初めてお会いする方が多く、どんな話が適しているか判断が難しかったため、少しコードを書いたことがある方なら理解できる・知って欲しい内容にしています。 ちなみに、私が思う納得のいくソースコードの条件は以下です。 反省しやすい・修正しやすい 人から問われたときにスムースに説明できる設計・仕様になっていること 利用者がスムース
メンテナブルCSS | 株式会社サイバーエージェント
1. 序論 CSSは記述ルールが簡素であり、少しの学習コストですぐに記述ができる手軽なツールです。 しかし、大規模なアプリケーションで複数人で開発するケース等では、見栄えだけしか考えずに身勝手にコーディングしてしまうと、 非常にメンテナンスコストがかかる負の遺産が作られてしまいます。 そのためCSSの品質を保つために様々なプロジェクトで、CSSの定義ルールが決められています。 本稿では一般的なCSSの定義ルールと、そのルールがなぜ作られたのかを合せて報告致します。 また、CSSのルールを適用するにあたって、手動・目視でルールの適用をチェックするのは非常にコストが高い作業です。 これらルールの適用を補助するツール群を、合せて報告致します。
Scattered Polaroids Gallery
This first example shows a simple use case without showing a description on the back side of the Polaroid. Clicking another navigation dot will reshuffle the Polaroids and bring the respective current item to the center. Click on the gallery to start it. Serenity Beach Happy Days Beautywood Heaven of time Speed Racer Forever this Lovely Green Wonderful Love Addict Friendship White Nights Serendipi
SublimeTextの教科書で紹介されてるプラグインまとめ - Qiita
via Impress Japan: Web制作者のためのSublime Textの教科書 今すぐ最高のエディタを使いこなすプロのノウハウ サンプルPDF4章の目次より ※説明は私の調べたものなのでかなり適当です。 SideBarEnhancements サイドバー右クリックのメニューを拡張 titoBouzout/SideBarEnhancements LineEndings 改行コードの変更。 SublimeText/LineEndings ※現状、SublimeText3で動かないです。143Pのコラムで動かし方について言及がある模様。 TrailingSpaces 行末の半角スペースを削除。 SublimeText/TrailingSpaces Focus Last Tab Sublime Text 2 では、Chrome などのタブブラウザーと同じように command + 1
9 Mixin Libraries For Sass Designers Should Get
If you use Sass in your development workflow, you know the importance of mixins. When you see some things that are written repeatedly and tediously in CSS, that’s where mixins can help you prevent repetitive work. A mixin contains CSS declarations that you can reuse throughout your site. There are many mixins are made by developers, to help you when working with Sass in your development. Most cove
David Bushell – Freelance Web Design (UK)
David Bushell Web Design & Front-end Development I make websites I design and build websites with a focus on standards, performance, and accessibility. With a decade of professional experience — in-house and remote — I've delivered for all types of organisations. Whether it's WordPress, JAMStack, or PWAs, I have the know-how to help you. What my clients say Highly skilled, personable, helpful and
“マークアップ”するということ ～ HTML5勧告に寄せて ～
HTMLを適切な要素を使って書いていくことは実はそれほど難しくはない。しかし過剰に要素を使わずに、かつスタイリングすることも意識して、と適切に“マークアップ”するのはなかなかの修練を必要とする。いったい“マークアップ”するということはどういうことなのだろうか、そしてどのような思考の元に行えば良いのだろうか。 HTML5での変化 著作権表示のマークアップ small要素 footer要素とsmall要素 p要素とdiv要素 footer要素とp要素 スタイリングとの兼ね合い マークアップするということ HTML5での変化 コンテンツに則した素直な形でマークアップできること。 HTML5で変わることや変わったことは多くあるが、それらをおおまかに俯瞰するとこのような言葉に集約できる。そのために様々な要素や属性が追加され、既存の実装をなるべく壊さない形で要素の意味に変更が加えられた。これらの変化は
CSSでのフォント指定について考える（2014年）｜DTP Transit
結論1：アルファベットでウエイトなしだけでも、すべてのモダンブラウザに対応可能です。ただし、旧バージョンのSafariやFirefoxでは対応がまちまちであったため、それらに対応するには併記します。 游ゴシック体と游明朝体はWinodws 8.1では日本語名、OS X Mavericks（10.9）ではアルファベット名のみの対応であるため、両名の併記が必要となります。 疑問2：「ヒラギノ明朝 Pro」と「ヒラギノ明朝 ProN」のどちらを記述すればいいのでしょうか。 「ヒラギノ明朝 Pro」を改訂し、JIS X 0213:2004の例示字体に対応させたものが「ヒラギノ明朝 ProN」です。 参考： ウィキペディア - ヒラギノ 「ヒラギノ明朝 Pro」と「ヒラギノ明朝 ProN」の違い CSSのfont-family指定はこれで決まり！（2013春） 結論2：新しい字形に対応をしている「ヒ
Owl Carousel
How To Use 1. Load jQuery and include Owl Carousel plugin files To use Owl Carousel, you’ll need to make sure both the Owl and jQuery 1.7 or higher scripts are included. <!-- Important Owl stylesheet --> <link rel="stylesheet" href="owl-carousel/owl.carousel.css"> <!-- Default Theme --> <link rel="stylesheet" href="owl-carousel/owl.theme.css"> <!-- jQuery 1.7+ --> <script src="jquery-1.9.1.min.js"
http://ipestov.com/the-best-plugins-for-sublime-text/
See related links to what you are looking for.
［速報］HTML5、ついにW3Cの勧告となる
W3Cが発表したプレスリリース（日本語）の冒頭を引用します。 2014年10月28日(アメリカ)： ワールド・ワイド・ウェブ・コンソーシアム(W3C)は、ウェブページやウェブアプリケーションを構築する際に使用されるフォーマットHTMLの第5版であるHTML5を勧告として公開し、オープン・ウェブ・プラットフォームの礎を築きました。HTML5は、アプリケーション開発者やアプリケーション産業がこの先何年に渡って信頼するに足る、アプリケーション開発のための機能を提供します。HTML5は今や幅広いデバイスで、そして世界中のユーザが利用可能であり、かつ豊富な機能を持つアプリケーションの開発コストを削減します。 W3Cディレクターを務めるティム・バーナーズ＝リーは、「ビデオやオーディオをブラウザ上で見たり、ブラウザ上で通話をすることは、今や当然の事として受け止められている」と述べています。「写真や店舗の
The i, b, em, & strong elements | HTML5 Doctor
While many HTML4 elements have been brought into HTML5 essentially unchanged, several historically presentational ones have been given semantic meanings. Let’s look at <i> and <b> and compare them to the semantic stalwarts <em> and <strong>. In summary: <i> — was italic, now for text in an “alternate voice”, such as transliterated foreign words, technical terms, and typographically italicized text
[HTML5]アウトラインで迷わない！ sectionと見出しについて
webcre8はHTML5を勉強中です(APIだとかCanvasだとかはまだです)。当ブログWEBCRE8.jpもHTML5を用いた自作テーマで作成されています。 皆さんもコーディングしていて「これはどう書くのがベストなんだ？」「これであってるのか？」と迷う事ってよくありますよね。 HTML5でコーディングしていて最近ホントにこれでいいのか？と迷っていたのはsectionと見出しについて。コーディングレベルのHTML5でよく取り沙汰されるアウトラインの話題ですね。 これについて何人かのweb制作者、特に@HissyNCさんと@kojika17さんと話をしてみたことも含めて、HTML5のアウトラインについて今までのwebcre8と同じように「…つまりどういうことだってばよ？」と混乱している人の為にわかりやすく整理してみようかなーと思います。 厳密な解説はこの記事を読まずとももっと信頼できる文
![[HTML5]アウトラインで迷わない！ sectionと見出しについて](https://cdn-ak-scissors.b.st-hatena.com/image/square/a579b466a9d9646edbe9cc1cec01abca7601b9fc/height=288;version=1;width=512/http%3A%2F%2Fwebcre8.jp%2Fwordpress%2Fwp-content%2Fuploads%2F2011%2F09%2Fhtml5-section-outline-150x150.png)
初心者がコーディングのときに失敗しがちなこと
何人も新人のウェブデザイナーをみてきましたが、 みんな大体同じところでつまづくようです。 そして自分もそうだったなぁと思うところでもあります。 知っていればすぐに終わりますが、 知らなければ（もしくは、調べることをしなければ）ずっとわからないまま。 「知っておけば楽になるのに！」と思ったことをピックアップしてみました。 「<」「>」「"」「&」「ノーブレークスペース」は実体参照を使う 上付き文字<sup>や下付き文字は<sub>を使う 非表示文字の表示方法 ExcelからDreamweaverへの表の貼付け 時々、スペースキーを何度も叩いて半角スペースを挿入し、 「スペースが表示されません」と聞いてくる人がいます。 そんな場合には「 」を使います。 実体参照をつかわずに「<」「>」を文章中に直接書くと ブラウザがタグと誤って解釈しカラム落ちなどの原因になります。 （実はこの記事を
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
AUTOCODING （オートコーディング） | デザインからコーディングを自動生成
MUI: The React component library you always wanted
Horic Design
Drunken Parrot UI Kit - Bootstrap Framework Theme
ターミナルからgithubページを作ろう！！ | github | Horic Design
CodePen - Pure CSS One Div Weather Animated Icons
