【全30項目】コーディング時のルールや思想（HTML/CSS/Sass/JSなど）
宣伝💡 この記事の内容の超大容量版がこちらの本になります。興味がある方は是非チェックしてみてください。 Web業界に新卒で入ってから7年と数ヶ月が経ちました。私はデザインからフロントエンド全般が守備範囲です（Next.jsを使った軽めのWeb開発くらいまで）。 最近ようやく自分の中での「コーディングの手法やルール」が固まってきたので、言語化してこの記事で解説していこうと思います。 はじめに まず最初にこの記事の方針や前提をいくつか書いておきます。 用語や知識の詳しい解説はしていないので、分からない内容が出てきたら調べながら記事を読んでいただくとより理解しやすいと思います 実務を数年経験していないと理解できない部分があるかもしれないです（完全初学者向けではなく、初・中級者向け） あくまで自分の中での手法やルールであり、全ての実装者・会社・プロジェクトなどに当てはまるわけではありません（もち
実務経験3年すぎた現役Webデザイナーのリアル【勉強方法編】 - IT系女子ログ
（7月25日、コーディング編更新しました。） 私がWebのスキルアップのために行っている勉強方法をすべてご紹介します。 たくさんありますが、「今日は模写をしてみよう」とか、「今日は案出ししてみよう」とか、楽しんで勉強するのが一番だと思います。 今まで自分に合っているものを優先して取り入れてきましたが、「もっと効率いい方法があるよ！」というアイデアがあれば、ぜひ教えていただきたいです！ デザイン編 忙しくてもできること 毎日5分でもデザインを観察する ニュースを見る、読む いいと感じたデザインを自分なりに消化してから制作に取り入れる 部分的でもいいので2案以上作る 周りの人に自分から意見をいただきにいく 意見をいただいたら要点を控えておく 提出する時には自分の言葉での説明も添える 広告を見て、伝えたい内容や狙いを考察する 時間あるときにしたいこと 思い浮かんだ案をできるだけ作ってみる 素敵だ
Mac歴15年のWEBデザイナーがオススメする便利補助ツール13選 | 株式会社インディバル
サービス Service 採用コンサルティング、採用代行をはじめとし、短期単発雇用やDXリクルーティングなどの新たな採用手法のご提案、 その他人材募集～定着、派遣まで採用に関することをワンストップでご提供しています。 雇用・採用改革支援 WEBプロモーションを利用したDXリクルーティング等、新たな採用活動手法をご提案させていただきます。 人材募集支援 採用サイト制作、求人広告、採用イベント等、 貴社の採用ターゲットをご提案させていただきます。 人材定着・活躍支援 入社後のパフォーマンスも見据えた 「ベストマッチング」を目指し様々な サービスラインナップをご用意しています。 人材確保支援 スポットアルバイト紹介や 派遣、日々紹介、 請負サービスを ご提案させていただきます。
コーディングをするときに鼻血がでるほど便利なwebツールリスト - Qiita
普段お世話になっているwebツール達の紹介です。 以下のサイトはすべて 無料 & 登録不要 です。 正規表現 regexper 正規表現を可視化してくれます。 複雑な正規表現を書くときやコードリーディングのお供に重宝します。 Rubular Rubyの正規表現をテストできます。 JSON JSON FORMATTER & VALIDATOR JSON系のツールが集まったサイト。 それぞれ、サイト名とドメインが違うのでリンクはそのうちの１つになっています。 (画像クリックでそれぞれのツールに飛べます。) ひとつずつ紹介します。 JSONをフォーマットしてくれます。 出力結果は折りたたむことができるので、長いJSONを読むときにも便利です。 JSONを含めた様々なデータ形式を変換できます。 Inputの以下に対応。 CSV INI JSON XML YAML Outputは以下に対応。 JSO
CSS3のセレクタ全42種 まとめておさらい使い方リファレンス | WP-E (仮)
こんにちわ。WP-Eイクラこと@ampersand_xyzです。 CSS3のセレクタ、ちゃんと覚えてる？ 普段使わなかったりするようなセレクタって、すっかり脳みそから抜け落ちてしまい、適用されているスタイルを確認したときに あれ？コレなんだったっけ？ というセリフを何度心のなかでつぶやいたか分かりません。 また、場面によって必要に応じたセレクタを使えてるかどうかというところも気になるところ。どんなセレクタがあるのかを覚えておけば、たとえばDOMの動的生成をするときに無駄な分岐処理をしてstyle適用とか、JSでゴリゴリスタイル付与とかしなくてよくなるはずです。 おさらい用チートシート作成を兼ねて、Selector Level3 のSelectorsについて、セレクタの記法と使い方のgistつけてまとめていきたいと思います。 なお、仕様書の日本語訳は以下のページをご参照ください http:/
コーディング不要のディープラーニング開発ツール、ソニーが無償提供
コーディング不要で、ディープラーニングのプログラムを生成できるソフトウェア「Neural Network Console」を、ソニーが無償提供。 ソニーは8月17日、コーディングの知識がなくても、ディープラーニング（深層学習）のプログラムを生成できるソフトウェア「Neural Network Console」の無償提供を始めた。自社の製品・サービス開発にも利用しているツールを多くの開発者や研究者に使ってもらうことで「ディープラーニング技術の発展につなげる」という。 同社は今年6月、ディープラーニングのプログラムを生成する際に使うコアライブラリー（基盤ソフトウェア）「Neural Network Libraries」（以下、Libraries）をオープンソース化した。人間の脳を模倣した「ニューラルネットワーク」の設計、製品・サービスへの搭載を効率化する演算モジュール群だが、利用には高度なプロ
CSS 画像やテキスト要素を縦横中央配置する6つの方法 – How to Center Elements Horizontally and Vertically. | Stronghold Archive
CSS 画像やテキスト要素を縦横中央配置する6つの方法 – How to Center Elements Horizontally and Vertically. どうもこんにちは。Toshikuraです。今回のTipsは【CSS 画像やテキスト要素を縦横中央配置する6つの方法】です。CSSの基礎的な記事ですが縦横中央配置には色々な方法がありますのでメモしておきます。うまく使い分けると便利な場面もあったりしますので備忘としてお役に立つかもしれません。 1. display:tableでの実装 CSSのdisplayプロパティによって要素をテーブル化し、vertical-alignで縦方向へ中央配置する方法でレスポンシブ化も容易です。もっとも安定した方法だと思いますがIE7では動作しません。 HTML <div class="table"> <p>p tag p tag p tag p ta
Web制作者がマジで学べる国内ブログ厳選10個【制作+SEO対策編】 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
みなさんどうも〜こんにちはぁ！ 日々レベルアップを目指してWebを学んでおりますライターの、のび太です。 以前「Web制作初心者がマジで学べるおすすめ国内ブログ厳選10個」という記事を書かせていただいたのですが、予想以上に好評で驚きました。お役に立てて光栄です！ そのときご紹介したブログの他にも、まだまだ有益で素晴らしい国内ブログはたくさんあります。そこで今回は、「やばい！ マジで有益すぎる！ ありがてぇ！」と感じたブログを、制作系とSEO系とに分けて、計10個ほどご紹介したいと思います。 今まで知らなかったという人は、ぜひこの機会にRSS購読を！ 制作系 以下7ブログが、デザイン、コーディング、CMSなど制作系の内容になります。 NxWorld http://www.nxworld.net/ どの記事もシンプルかつ丁寧な説明で非常にわかりやすいです。特にWordPressカスタマイズ系の
デザイナーのわたしがプログラミングの基礎をだいたい3日で覚えた1つの方法
works デザイナーのわたしがプログラミングの基礎をだいたい3日で覚えた1つの方法 Posted by Miki Ishijima on May 20, 2014. フルスタックエンジニア！フルスタックエンジニア！ 最近なんでもかんでも出来る人が求められていますね。Webデザイナーの人でも簡単なプログラムに触れる機会は以前より格段に増えています。 わたしもプログラムを覚えたいと思い、勉強していました。しかしそれは、禁煙と同じようなもので触ってはやめて、触ってはやめて、飽きてしまうの繰り返しでした。 身につかない原因 プログラムの勉強会や、本、ブログなどを読んでもなぜ身につかないのか。難しいというのは理由ではありません。 むしろ、基礎の「き」くらいであればコーディングと同じくらい簡単です。 わたしが一番の原因だと考えるのは作りたいものがないというコトです。 子供向けプログラム学習アプリケー
自分のwebサイト作る工程 - MEMOGRAPHIX
2. モック作る次に、Illustrator でモック作る。前は Photoshop で作ってたけど Illustrator に変えた。ラフスケッチでだいたいの構造は決まってるので、それを画面で見た時の見栄えを検証する。雑だけどこれは自分のサイトなのだから自分しか見ないという前提があって、雑でも問題ないということにしてる。8割くらい作り込んだところでやめて、コーディングに入るようにしている。2割くらい変更可能な余地を残しておくことで、コード書くとき融通が効く。 ラフとかモック描かずにコーディング始めることもたまにあるけど、それは余程デザインが頭のなかで固まっている場合に限る。ラフとかモック作るの、コーディングと同じくらい大事だと思ってて、コーディングを始めてしまうとデザインに気を配るのを疎かにしがち。デザインを考えつつ同時にコードを書くというのは結構難しくて、トレーニングが要る。全体のデザ
お問い合せフォームをコーディングするための9つのTips | 株式会社LIG
こんにちは。 LIGフィリピン支社代表のせいとです。 お問い合わせフォームといえば、どんなサイトにも大体備わっているものですよね。 どのフォームも見た目は大体同じのため、構築自体は簡単かと思います。 ただし、システムが絡んだり、ユーザーに操作してもらったりと、けっこう重要なページであったりもします。 そこで今回は、ユーザーにとってより快適なフォームを実現するためにオススメしたいクールな技をお伝えしたいと思います。 また、今回の記事を書くにあたり、デモページを作成しました。 こちらのソースも見ながら読んでいただくと、よりわかりやすいかと思います。 ユーザーフレンドリーで構築もしやすいクールなお問い合せフォームをコーディングする9つのTips 1. ボタン系の要素は全て<button type=”submit”></button>を使う 「送信する」「入力画面に戻る」などの要素を作る際、タグは
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
『最強のエディタ、ターミナル環境はこれだ！〜PLAIDエンジニアの開発ツール調べてみた〜 | PLAID engineer blog』へのコメント