自力でWebサイトを作れるようになるブロックコーディングとは？ HTML/CSSの脱初心者を目指して
HTML/CSSの知識を習得しても、いざWebサイトを構築しようとすると手が止まってしまう。それは知識の体系化ができていないから、と語るのが『HTML/CSSブロックコーディング』の著者である笠井枝理依さんです。笠井さんは本書で、そうした悩みを解決する手法としてサイトの要素をブロック単位で分解してコーディングしていくブロックコーディングを解説しています。今回は本書からWebサイトをブロックに分解する方法を紹介します。 本書は『HTML/CSSブロックコーディング デザインをすらすら再現できる』の「Ch01 モックアップをブロック分解」を抜粋したものです。掲載にあたって編集しています。 モックアップとは モックアップとは皆さんが考えるところの「デザイン」であり､日本では「デザインカンプ」と呼ばれることもよくあります。Webページがどのように表示されるのか､実際にブラウザで表示される場合と遜色
【サボりたいエンジニア向け】コーディングに役立つチートシートまとめ - Qiita
はじめに こんな人が役に立つ記事 コーディング業務の効率を上げたい。 コーディングに関するチートシートを知りたい。 打つのもめんどいからコピペでなんとかしたい（笑） 今回は、コーディングに役立つチートシートをまとめました。 VSCODEチートシート エンジニアなら必ず使うであろうVsCodeのショートカットチートシート。これはよく使ってます！ HTML系のチートシート集 HTMLに関するチートシートをまとめてみました。 HTML5 タグチートシート HTML5 のタグチートシート。サイトには 5 から廃止になった避けるべきタグなどもまとめてられており、 PDFでダウンロードできます。 HTML5 入れ子チートシート HTML の入れ子の可否を視覚的に分かりやすく、色づけしてくれます。対象要素の親、子を選ぶだけで、簡単に調べることが出来ますので便利なチートシート 特殊文字一覧：HTMLで使え
仕様書の参考例と、こんな内容を仕様書に最低書くといいというお話｜田辺めぐみ
よく、仕様書を書いていなくて、書いてみたいけど、具体的な仕様書がネット上に落ちてなくってこまってるって相談を受けるので 「仕様書の記載内容のイメージ」を作りました！ ※前提として「現在仕様書を書いていない、自社開発のMVP検証前後のフェーズのスタートアップ向け」に書いています。PMが仕様書、エンジニアがDesign Docを書く分担です。 ついでに、システム開発の基礎である「システム開発のV字モデルをベースにした設計書の紹介」も含めてまとめてみましたー！ 大規模開発に使われたり、古くからあるフレームワークなので、スタートアップの方だと、システム開発のV字モデルの概念やそれにあわせた成果物を知らない人が多いけど、「要件定義書」と「設計書」を全てドキュメント化するとどうなるかを理解した上で、「仕様書」として情報を削る方が、考慮漏れ防止やエンジニアがやっている設計内容の理解につながるので、全体を
ゲーム作りをパターン化して1年で139個のミニゲームを作る - ABAの日誌
このページの上から139個が今年の分だ。こうして並べてみるのは楽しいな。ゲームをたくさん作ることでゲーム制作のスキルアップを！みたいな気概は無いので、ヤマザキ春のパンまつりのシールを集めるのと同じような楽しさだが。でも、作って、Twitterに放流して、いろんな人に遊んでもらって、フィードバックをもらう、というサイクルがたくさん回せたのは良かった。今年遊んでくださった皆さま方、ありがとうございました。 2,3日とかの短期間でミニゲームを作り続けるためには、作るもの・作り方をパターン化してほうが良い。今年は以下のレギュレーションで作った。 Chromeで遊べる恐竜ジャンプゲームのような、手軽にブラウザで遊べるゲームを目指す 操作方法はスマホでの操作が容易な、ワンボタン、左右へのスライド、画面上のタップ、の3種類に限定する 画面サイズは100x100を基本とし、キャラクタは6x6と小さくするこ
Goを学ぶときに参照した学習リソースまとめ
皆さん、新しいプログラミング言語を学ぶ時、どのように学習しているでしょうか？ 私は4月に新卒でエンジニアになり、業務でGoを使うことになりました。その際、とりあえず公式チュートリアルであるTour of Goをやりましたが、その後にどうやって学習を進めれば良いか迷ってしまいました。 考えてみると、新しい言語を学ぶ際、毎回学習方法に困っている気がします。ネットでサンプルを探す、動画を見る、書籍を読む、などさまざまな学習方法があると思いますが、私は手を動かしながらいろいろなパターンを学んでいくのが好きです。 そこで今回Goを学ぶ際も、手を動かしてさまざまなコーディングのパターンを学習するために、ネットや書籍でサンプルを探して実践しました。 この学習方法は私にとっては楽しみながら続けることができて、他の言語を学ぶ際も今回実装したサンプルを使って学習しようと考えています！ そこで自分と同じ様な悩み
どうやってコーディングを学ぶか - Magnolia Tech
CPANに上がってるモジュール、一つ一つの粒度が小さいから読みやすいし、ドキュメントもテストもしっかり揃ってて挙動を把握しやすくて、自分にとっては最高の教科書だったな 今でも他の言語で分からない時に同じ目的のPerlモジュールを見る事があるし— magnoliak🍧 (@magnolia_k_) 2021年1月7日 自分が学んだ頃の、時代的なものもあるけど、今でもPerlのモジュールは粒度が小さく、ドキュメント、テストがしっかり用意されているので、参考にするにはちょうど良いと思っている。 ScalaのScalatraっていうWAFのメンテナンスに参加しているんだけど、HTTPプロトコルだったり、Webのお作法的なところが分からないことが有ったら、たいていPlackか、Rackのソースを見て理解するところから始める、みたいなことしてる— magnoliak🍧 (@magnolia_k_)
VSCodeを使いこなすための一歩、コードを書く時に知っていると便利なショートカットのまとめ
Visual Studio Codeでコードを書く時に知っていると便利なショートカットを紹介します。コードを書く時に自分がよく実行する操作のショートカットを覚えておくと、作業効率は格段にアップします。 21 VSCode Shortcuts to Make Coding Faster and More Fun by jsmanifest 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに VSCodeで利用できるショートカットのいくつかを見逃しているかもしれません。すべての人がすべてのショートカットを調べて、より速くコードを作成し、より多くの人に役立つショートカットを見つける時間があるわけではありません。 この記事では、より高速なプログラマーになるためのお気に入りのショートカットをリストアップしました。これらのショートカッ
こうしてGoogleに入社した(kumagi編) - Software Transactional Memo
Googleオフィスの窓からの眺めをGoogle Photoが自動加工したもの TL;DR AtCoderやろうぜ Googleの(僕から見て)偉い人が立て続けにブログを書いており ctrl-x-s.blog hoge.blog ここ数件の僕のブログへの反響を読んでも「Googlerだから特別」みたいな意見が散見され、入社へのハードルが変に高く見られてしまっている気がするので、僕がGoogleに入社する準備として取り組んでいた事とそのレベルを紹介する。程度の低さに安心して欲しい。 英語 英語の論文は興味の赴くままに読んでいたため読むことに関してはあまり苦手意識は無いものの、絶対的な英語力に関して言うとTOEIC500点というスコアが端的に表している。これがどれぐらいかというと、得意分野から外れると長文を読む速度と精度がガタ落ちし、リスニングも結構な単語を聞き落とし、文脈からの推測と辛うじて
新人Webプログラマの学習が捗るリンク集 - Qiita
はじめに この記事は自分のための備忘録も兼ねた、新人による新人のための新人の教材リンク集です。 新年度になりましたので、少し更新をしました。よろしくおねがいします。 ターゲット この記事はこんな人に向けて書いています。 これからWebプログラマを目指す人 Webプログラマになったばかりの人 コーディングだけでなくデザインやマーケティングにも興味がある人 早く一人前のWebプログラマになりたいと思ってる人 つまりわたしのようなへっぽこのこと 1. コーディングを身につける ▼まずはここから 何から始めて良いかわからない！新しい言語を学びたい！という方に。 ドットインストール https://dotinstall.com/ 動画付きで解説してくれる学習サイト。とにかくカバーしている範囲が広いのも特徴。無料プランでも十分勉強になります。早口ながら丁寧でわかりやすく、時々ちょっと間違える田口先生の
未経験から7日間でコーダーとして現場投入させるまでのカリキュラムを忘れないようにメモっとく - Qiita
エンジニア不足と言われて久しいですが、できる経験者を採用するのはますます難しくなっていますね。 そんななか、弊社ではひょんな縁からエンジニア未経験の新人をエンジニアとして採用することになりました。未経験とはいえ、弱小企業の弊社には悠長に育てている余裕がないため、7日間で現場投入を目指してカリキュラムを組みました。 だいたいうまくいったので、メモがわりに晒しておきます。 前提条件 誰でも7日間でエンジニアになれると言っているわけではありません。あくまで一例として捉えていただければ幸いです。 担当してもらう予定の領域 HTML/CSS コーディング JavaScript はそこそこで（動きのエフェクトやカルーセルを仕込める程度） concrete5 テーマの開発（PHPファイルに foreach を入れていくイメージ、WordPress と変わらない） 流石にアプリケーション開発で7日間は無理
プログラマの採用面接で聞かれる、データ構造とアルゴリズムに関する50以上の質問 | POSTD
情報科学科の卒業生やプログラマの中には、UberやNetflixのような新興企業や、 Amazon 、 Microsoft 、 Google のような大企業や、InfosysやLuxsoftのようなサービスを基本とする企業で、プログラミング、コーディング、ソフトウェア開発の仕事に就きたいと考える人が大勢います。しかし、実際にそういった企業で面接を受ける場合、大半の人が プログラミングに関してどのような質問をされるか 見当もつきません。 この記事では、 新卒生からプログラマになって1〜2年までの 経験値が異なる人たち向けに、それぞれの プログラミングの面接でよく聞かれる質問 をいくつか紹介していきます。 コーディングの面接では、主に データ構造とアルゴリズムに基づいた質問 がされますが、 一時変数を使わずにどのように2つの整数をスワップするのか 、というような論理的な質問もされるでしょう。
コーディング作業はもう一切不要！2.0でものすごい進化を遂げた、国産の無料デザインツール -STUDIO 2.0
去年当ブログで紹介した際にも評判が高かったSTUDIOが、満を持して2.0にアップデートされました！ STUDIOはコーディング作業は一切不要で、Webサイトやスマホアプリのデザインを積み木感覚で楽しくデザインできるツールで、無料で始めることができます。 STUDIO STUDIOの特徴 STUDIOの使い方 STUDIOの特徴 STUDIOは無料で利用できる国内産のデザインツールで、Webサイトやスマホアプリのモックアップ作成から、デザイン、さまざまな実機でのプレビュー、公開、そして運用や解析まで、それぞれの専門知識に詳しくなくても簡単にできます。
VSCode+Vue.jsを使用するならインストールするべき拡張機能と設定 | iwb.jp
VS Codeとは 正式名称はVisual Studio Code。Microsoft社が開発したオープンソースのテキストエディタ。 Vue.jsとの相性が良いためVue.jsの開発者のEvan Youなどが使用している。 VS CodeはEmmetやGitなどコーディングを行う上で必須の拡張機能がいくつか最初からインストールされているので使いやすい。 (Extentionsで@builtinで検索すると一覧が見られる) しかし、Vue.jsを使用する上で必要な拡張機能は最初からインストールされている訳ではないため、インストールしたほうが良い拡張機能と設定(settings.json)をまとめた。 以下にVS Codeおすすめ拡張機能を記載した。 Vue.js Extension Pack Vue.js開発でインストールされていることの多い11の拡張機能パック。 vetur vue-pee
初心者プログラマが犯しがちな過ち25選 - Qiita
以下はThe Mistakes I Made As a Beginner Programmerの日本語訳です。 The Mistakes I Made As a Beginner Programmer 初心者プログラマが犯しがちな間違いと、それらを特定し、避けるための習慣を学ぶ方法。 まず最初に言っておくことがあります。 この記事は、誤りを犯すことを悪いと糾弾するために作成されたものではありません。 むしろ貴方が誤りに自ら気付き、あるいはその兆候を見いだし、それらを避けられるようにするために書かれたものです。 私は過去これらの誤りを犯し、それぞれから学びを得てきました。 今ではこれらを避けるようなコーディングを習慣付けるようにしています。 貴方もそうしましょう。 紹介は順不同です。 1) 設計せずに実装する 高品質なコンテンツは、一般的には容易に作成できるものではありません。 それには慎重
コーディング速度を上げる！Webサービス・ジェネレーターなどの便利ツール7 - Design Color
1. Font-familyの選定「Font-familyメーカー」 Windows・Mac・iOSの標準フォントの一覧が見れて、ドラッグ＆ドロップで自分で組み合わせて好きなFont-fammilyが作れるWebサービスです！ 全部に共通してインストールされてるのはどれだろうとか、このOSではこっちのフォントで代用しよう…なんてあれこれ考えながらFont-familyを考えることができます。 有名サイトで使われているFont-familyが見れたり、特にこだわりが無い時はサルワカさんの「おすすめ」が見れたりと、かゆいところに手が届く便利サイト！ Font-familyメーカー：標準フォント一覧からサクッと指定 2. 画像の縦横比計算「web計。」 昔からお世話になってる縦横比を計算してくれるWebサービス。サムネイルのサイズを計算する時など、本当に時短になって助かってます。黄金比や白銀比、
うわっ、日本のWebデザイナーの年収、低すぎ…？
以前、Webクリエイターボックスの「世界のWebデザイナーのお給料はいかほど？」という記事が話題になっていました。 記事そのものではなく、記事に対する Twitter や、はてなブックマークのコメントでの反応を見ていて個人的に気になったことがありましたのでここにまとめました。 「他の国とくらべて日本のWebデザイナーの年収は低すぎる」とか「海外に脱出するしかない」と嘆いている方がかなりいらっしゃったようですが、こういう見方もありますよ、ということで… ※この記事は、2013年に公開したものを2019年にリライトしたものです。 Webデザイナーは、海外に移住すれば給料が上がる？ 特定の方を晒しあげるつもりはないのでツイートを埋め込むのはやめておきますが、Twitter では「世界のWebデザイナーのお給料はいかほど？」という記事をツイートするときに、以下のようなコメントをつけている方が何名か
コーディングをするときに鼻血がでるほど便利なwebツールリスト - Qiita
普段お世話になっているwebツール達の紹介です。 以下のサイトはすべて 無料 & 登録不要 です。 正規表現 regexper 正規表現を可視化してくれます。 複雑な正規表現を書くときやコードリーディングのお供に重宝します。 Rubular Rubyの正規表現をテストできます。 JSON JSON FORMATTER & VALIDATOR JSON系のツールが集まったサイト。 それぞれ、サイト名とドメインが違うのでリンクはそのうちの１つになっています。 (画像クリックでそれぞれのツールに飛べます。) ひとつずつ紹介します。 JSONをフォーマットしてくれます。 出力結果は折りたたむことができるので、長いJSONを読むときにも便利です。 JSONを含めた様々なデータ形式を変換できます。 Inputの以下に対応。 CSV INI JSON XML YAML Outputは以下に対応。 JSO
『コーディングを支える技術』の西尾泰和と考える、エンジニアが学ぶべき技術の原理原則｜ハイクラス転職・求人情報サイト AMBI（アンビ）
『コーディングを支える技術』の西尾泰和と考える、エンジニアが学ぶべき技術の原理原則 名著として知られる『コーディングを支える技術』を著者の西尾泰和さんと、現役エンジニアの池田惇さんが読み解きます。成長を続けるために必要な「インプットの深度」を探ると、エンジニアとしての生存戦略が見えてきました。 数多くの開発者から支持を受け、読み継がれてきた名著。そこには読み継がれる理由があります。名著には、内容・ボリュームともに充実した書籍が多く、概要に目を通しただけで本を読んだつもりになっていたり、腰を据えて読む時間がなく「積ん読」してしまいがち。「エンジニアが絶対読むべき書籍●選」といった記事をブックマークするだけで読んだつもりになっていないでしょうか。ポイントを押さえつつ内容を深掘りし、名著の根底に流れるエッセンスを開発に活かしましょう。 エンジニア向け名著を読み解いていく当企画。第5回に取り上げる
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
無料コーディング練習所 | 未経験からWebデザイナーへ！【2024年版】
Chrome デベロッパーツールの隠し機能が便利！CSSのセレクタ・プロパティ・値を1クリックで見つける方法
