世界一初心者に優しいブログ

時間・場所に縛られず働きたいなら、それ相応の能力と責任が伴います。

セカヤサブログは、プログラミング初心者が案件をこなせるようになるために
真に必要な技術や考え方を発信しています。

また教材では学べないような、他のコーダーに差をつけるための知識を
zennさんの本という形で出しているので合わせてご覧ください。

zennの本を見る
スポンサーリンク
プログラミング/Web制作の考え方

プログラミングを学びたい全ての人へ

こんにちは。最後にブログを更新してから、早1年。仕事が忙しくなったというのはもちろん、気づけば日に日に発信しづらくなっていた。大きめの規模のアプリケーション開発に携わってから、見える範囲も広がったし、技術的な知見もずいぶん増えた。一方で、自...
HTML/CSS

imgタグとbackground-imageの使い分け:画像表示のベストプラクティス

こんにちは。Webサイトに画像を埋め込み、表示させるには、HTMLのimgタグでマークアップするCSSのbackground-imageを使うの2つが思い浮かぶと思います。この2つ、結局のところどう使い分ければいいでしょう。それについて解説...
HTML/CSS

サイドバーにasideタグを使ってはいけない?その真実を暴く

こんにちは。Webページのマークアップにおいて、HTMLのセマンティックタグは出来るだけ適切に使いたいところです。これはページの構造を明確にし、検索エンジンやスクリーンリーダーがページの内容を理解しやすくするためです。SEOにも大きな影響を...
HTML/CSS

【徹底解説】imgタグのloading属性はほぼ絶対に指定した方が良い

こんにちは。今回はimgタグのloading属性の適切な指定方法とその効果について解説していきます。概要loading属性は、いわゆる非同期読み込みを指定することができる属性です。参考:これの値を"lazy"に指定すると、近くまでスクロール...
HTML/CSS

【徹底解説】imgタグのdecoding属性は絶対に指定した方が良い

こんにちは。今回はimgタグのdecoding属性の適切な指定方法とその効果について解説していきます。概要画像のデコード(後述)方法を制御する属性です。この属性は以下の3つの値を取ることができます。結論だけ言えば、とにかくasyncを指定し...
HTML/CSS

【徹底解説】imgタグのwidth/height属性は絶対に指定した方が良い

こんにちは。今回はimgタグのwidth/height属性の適切な指定方法とその効果について解説していきます。概要width/height属性は、画像サイズを定義するものです。書き方は次の通り。例<img width="800" he...
HTML/CSS

【徹底解説】imgタグのalt属性はほぼ絶対に指定した方が良い

こんにちは。今回はimgタグのalt属性の適切な指定方法とその効果について解説していきます。概要alt属性は「画像が何を表しているか」をテキスト形式で説明するためのものです。参考:例えば次の画像には「水面から顔を出す2頭のイルカ」というよう...
HTML/CSS

【コピペ可】imgタグの正しい指定方法【2023年最新版】

こんにちは。サイト制作において、使わないことはほぼないであろうimgタグ。近年はHTMLの発展によって実は記述すべき属性がいくつかあります。具体的な記述と、それぞれが何のためのものでどんな効果があるかを解説していきます。結論理屈はさておき、...
プログラミング/Web制作の考え方

【ChatGPTにも有効】世界一上手な質問の仕方

こんにちは。Twitterなどで時々発信はしていたのですが、僕が思う上手な質問の仕方を記事としても残しておこうと思います。基本的にはプログラミングの質問時の形式ですが、それ以外の場面でも応用できると思います。結論僕が質問する時、あるいはされ...
HTML/CSS

【超簡単】たった2行のCSSでチェックボックス/ラジオボタンをカスタマイズする

こんにちは。今回はチェックボックスやラジオボタンの簡易的なカスタマイズについてです。ボタン全体の形状やマークの形を変えるには擬似要素を使っていじる必要があり、複雑になりがちです(詳しくは後述)。しかし、色とサイズだけなら簡単に変更することが...
HTML/CSS

HTML要素の順番を自由に操る!CSS flexboxのorderプロパティを徹底解説

今回はdisplay: flex;の時に使えるorderプロパティを使って要素の順番を入れ替える方法を紹介します。例えば、PC版では横に「コンテンツ→画像」と並ぶSP版は縦に「画像→コンテンツ」と並ぶようなケースです(下画像参照)。今回の方...
HTML/CSS

imgタグとbackground-imageの使い分け:画像表示のベストプラクティス

こんにちは。Webサイトに画像を埋め込み、表示させるには、HTMLのimgタグでマークアップするCSSのbackground-imageを使うの2つが思い浮かぶと思います。この2つ、結局のところどう使い分ければいいでしょう。それについて解説...
HTML/CSS

サイドバーにasideタグを使ってはいけない?その真実を暴く

こんにちは。Webページのマークアップにおいて、HTMLのセマンティックタグは出来るだけ適切に使いたいところです。これはページの構造を明確にし、検索エンジンやスクリーンリーダーがページの内容を理解しやすくするためです。SEOにも大きな影響を...
HTML/CSS

【徹底解説】imgタグのloading属性はほぼ絶対に指定した方が良い

こんにちは。今回はimgタグのloading属性の適切な指定方法とその効果について解説していきます。概要loading属性は、いわゆる非同期読み込みを指定することができる属性です。参考:これの値を"lazy"に指定すると、近くまでスクロール...
HTML/CSS

【徹底解説】imgタグのdecoding属性は絶対に指定した方が良い

こんにちは。今回はimgタグのdecoding属性の適切な指定方法とその効果について解説していきます。概要画像のデコード(後述)方法を制御する属性です。この属性は以下の3つの値を取ることができます。結論だけ言えば、とにかくasyncを指定し...
HTML/CSS

【徹底解説】imgタグのwidth/height属性は絶対に指定した方が良い

こんにちは。今回はimgタグのwidth/height属性の適切な指定方法とその効果について解説していきます。概要width/height属性は、画像サイズを定義するものです。書き方は次の通り。例<img width="800" he...
HTML/CSS

【徹底解説】imgタグのalt属性はほぼ絶対に指定した方が良い

こんにちは。今回はimgタグのalt属性の適切な指定方法とその効果について解説していきます。概要alt属性は「画像が何を表しているか」をテキスト形式で説明するためのものです。参考:例えば次の画像には「水面から顔を出す2頭のイルカ」というよう...
HTML/CSS

【コピペ可】imgタグの正しい指定方法【2023年最新版】

こんにちは。サイト制作において、使わないことはほぼないであろうimgタグ。近年はHTMLの発展によって実は記述すべき属性がいくつかあります。具体的な記述と、それぞれが何のためのものでどんな効果があるかを解説していきます。結論理屈はさておき、...
HTML/CSS

【超簡単】たった2行のCSSでチェックボックス/ラジオボタンをカスタマイズする

こんにちは。今回はチェックボックスやラジオボタンの簡易的なカスタマイズについてです。ボタン全体の形状やマークの形を変えるには擬似要素を使っていじる必要があり、複雑になりがちです(詳しくは後述)。しかし、色とサイズだけなら簡単に変更することが...
HTML/CSS

HTML要素の順番を自由に操る!CSS flexboxのorderプロパティを徹底解説

今回はdisplay: flex;の時に使えるorderプロパティを使って要素の順番を入れ替える方法を紹介します。例えば、PC版では横に「コンテンツ→画像」と並ぶSP版は縦に「画像→コンテンツ」と並ぶようなケースです(下画像参照)。今回の方...
HTML/CSS

Markuplintを導入してHTMLの品質を上げる

こんにちは。今回はMarkuplintというHTMLリンターについて紹介します。入れるだけで自分のコードの間違いや改善できるところを指摘してくれて、かつ改善方法まで教えてくれる素晴らしいツールです。存在を知ったのは去年の後半でしたが、しばら...
プログラミング/Web制作の考え方

【ChatGPTにも有効】世界一上手な質問の仕方

こんにちは。Twitterなどで時々発信はしていたのですが、僕が思う上手な質問の仕方を記事としても残しておこうと思います。基本的にはプログラミングの質問時の形式ですが、それ以外の場面でも応用できると思います。結論僕が質問する時、あるいはされ...
プログラミング/Web制作の考え方

AIがWebの開発現場にもたらす変革

こんにちは。先日Twitterのスペースで、最近のAIの発達がWeb業界にどう影響するかを考えてみました。そのまとめというか、改めてテキストとして残そうと思います。一応録音が残っていますのでリンクを貼っておきます。テキストからUIを作るAI...
プログラミング/Web制作の考え方

なぜWeb制作とWeb開発は似て非なるのか

はじめにこんにちは。以前Web制作とWeb開発は似ているが違うものであるという記事を書きました。どう違うかはかなり詳しく書いたのですが、なぜそのような違いになるのかを本記事にて解説していこうと思います。目的が違うWeb制作とWeb開発は、そ...
プログラミング/Web制作の考え方

駆け出しエンジニアを自称する諸君。プログラミングを学ぶ前に、そのナメた根性を叩き直しなさい。あと日本語も勉強して。

はい、今回はタイトルの通りです。炎上しようが何を言われようが、この際そんなものは知ったこっちゃありません。最近あった出来事と、そこから推察されるTwitterの駆け出しエンジニア界隈の現状をまとめていきます。(今回はWebのフロントエンドコ...
プログラミング/Web制作の考え方

プログラミングを学ぶからって仕事は辞めるな

はい。今回はタイトルの通りです。「プログラミングで年収1000万!」みたいな誇大広告が流行り出した時から、仕事を辞めて勉強し出す人を時々見かけます。しかし、はっきり言って余程の覚悟や事情がなければそんなことをするのはただの馬鹿です。そこまで...
プログラミング/Web制作の考え方

最近のプログラミング教育界隈に思うこと

こんにちは。今回は、最近僕がプログラミング教育界隈に思っていることを書いていこうと思います。内容は個人的な悩みです。※あくまで僕の観測範囲の話です。エンジニアとして優秀な人が全員Twitterをやっていたり勉強会を開いたり、初心者と接する場...
プログラミング/Web制作の考え方

【違いを徹底比較】Web制作とWeb開発は似て非なるものである

こんにちは。皆さんはWeb制作とWeb開発の違いをきちんと理解していますか?この2つは非常に似た言葉ですが、全く違うものを指しています。これらを混同してしまうと、間違ったものを学んでしまう可能性があります。そこで今回はこの2つの言葉が具体的...
プログラミング/Web制作の考え方

プログラミングを学びたい全ての人へ

こんにちは。最後にブログを更新してから、早1年。仕事が忙しくなったというのはもちろん、気づけば日に日に発信しづらくなっていた。大きめの規模のアプリケーション開発に携わってから、見える範囲も広がったし、技術的な知見もずいぶん増えた。一方で、自...
プログラミング/Web制作の考え方

【独学】初心者が3ヶ月でプログラミングをマスターする方法!【大公開】

はじめにみなさんこんにちは、小林です。昨今、プログラミングという言葉が身近になってきました。様々な学習サービスやスクールがどんどん出現しています。しかし逆に選択肢が過剰な感もあり、なかなか選びにくいと感じている方も多いのではないでしょうか。...
プログラミング/Web制作の考え方

フリーランスになりたければプログラミングなんかよりコミュニケーションを学べ

こんにちは。先日はtwitterでとあるツイートをしました。ちょっと感情的になった部分もありますが、やはり思うところがありました。こちらについて、もう少し付け加えたいことがあるので記事を書いています。フリーランスを目指す上で必要なものフリー...
スポンサーリンク