【暫定】コーダー歴3年で辿り着いた保守しやすいコーディング手法
未経験からコーダーとして仕事をし始めて2年が経過しました。 最初の頃はとにかくスピードややりやすさ、デザインの再現などを重視し、保守性は特に考えていませんでしたが、ページが多くなってきたり自分以外の人と一緒にコーディングする機会が増えるにつれ、当初とはまるで違う意識で書くようになった気がします。 自分のコーディング手法もまだまだ発展途上だとは思いますが、自分なりに保守しやすいであろうコーディング手法が確立されつつあるので、コーディングルールも兼ねて記事に残しておこうと思いました。 デザインが再現できればOKというコーディングから一歩進んだコーディングを目指す方の参考になれたら嬉しいです。 この記事の前提 コーディングに付随するいろんな用語が出てくるかと思いますが、詳しくは説明していません...。なので、今コーディングを勉強中であったり仕事でコーディングしたことない人にとっては、理解しづらい
レスポンシブデザインの最適ブレイクポイントとは？メディアクエリの書き方も解説
Webサイト制作では、どのデバイスでもレイアウトを崩さずに表示させるように、レスポンシブデザインを考慮する必要があります。 レスポンシブデザインを考える際に、どの画面でも見やすい「最適なブレイクポイントは何pxなのか？」に頭を抱える方も多いでしょう。 本記事では、最適なレスポンシブデザインのブレイクポイントやメディアクエリの書き方を解説します。デバイス別のレスポンシブデザインのブレイクポイントの設定方法を理解しましょう。 レスポンシブデザインの最適ブレイクポイントは600px・834px結論から言うと、最適なブレイクポイントは600px・834pxです。 以前までは、iPad10.2のSplit View （535px）に合わせて、520px・920pxが推奨されていましたが、サイズ幅768～834pxの機種がシェア約56％を占めているため、ブレイクポイントは768~834pxに設定すれば
HTMLでレスポンシブやRetinaディスプレイ、ファイル形式など画像の読み込みを最適化する | Free Style
Webサイトのコンテンツとして、とても重要な写真やイラストなどの画像。 綺麗な写真をどのように見せて、写真コンテンツとして情報を伝えるか。 写真もデザインの1つです。 アイコンやイラストなどの画像もそうですが、写真の画像も綺麗な画質でWebに載せていきたいところです。 しかし、画像も高解像度であればファイルサイズが大きくなり、Webサイトにも影響を与えてしまします。 Retinaディスプレイでは、高画素密度であるため利用する画像を2倍にしないと、画質が悪くて少しぼやけて見えてしまいます。 スマートフォンでは、そこまで大きいサイズの画像を読み込む必要はないので、ファイルサイズの小さい画像を読み込むようにしたりと、いろいろとコントロールする必要はあります。 Webサイトに最適化していこうとなると、意外といろんな問題が見えてきます。 ただ、これらの問題はHTMLで対応可能です。 今回は、デバイス
VSCodeにコードスニペットを登録して効率的にコーディング！ | HPcode（えいちぴーこーど）
VSCodeでは各拡張子ごとにスニペットを登録しておくことが可能です。スニペットとは、単語登録のように、何かの文字をキーにコード一式を登録しておいて、簡単に使い回しできる機能のことです。 プログラミングをしていると、「これ何回同じ入力繰り返してるんだ・・・」ってコードがいくつかあるはずです。そういったコードを都度入力するのは無駄な時間以外のなにものでもありません。 スニペットとして登録して、3文字入力すれば100文字分のコードが出力されるみたいな登録をしておき、コーディングの効率化を図りましょう！
HTMLコーディングの人気のスタイルは？ アンケート結果から分析するイマドキのウェブ制作事情 - ICS MEDIA
ウェブ業界の当たり前だと思っていることでも、同業他社の人には違う常識があるかもしれません。自分が業界多数の傾向と違うところはどこなのか・・・ この連載ではアンケートデータから国内のウェブ業界の傾向を分析します。 連載第3回目となる本記事ではウェブ業界の「HTMLコーディング」や「フロントエンド」を中心にアンケート結果を紹介します。アンケートは筆者のTwitterから実施していたものです。 CSSのレイアウトに使うのはFlexboxが多い ウェブサイトの大枠レイアウトを組むときに一番使っているCSSの種類を質問しました。 727票の回答があり「float」が32%、「Flexbox」が51%、「Grid Layout」が11%、「table」が6%でした。 Flexboxが最多となったのは、未対応ブラウザ（例：IE9）が無視できるシェアまで下がったことや、floatよりFlexboxのほうが
コーディングの品質UPと時短ツール7選 | design Edge
コーディングの品質アップと負担軽減・時間短縮に役立つオンラインツール。様々なツールがありますが、よく使うものは自然と決まってくるものです。今回は、普段よく利用するツールをいくつかご紹介したいと思います。もちろん、どれも無料で利用できるものばかりです！ PrimerCSS HTMLソースを貼付けてボタンを押すだけで、CSSセレクタの一式を出力してくれるツールです。わざわざセレクタを入力していかないといけないところが、コピー＆ペーストで済むのでとても便利です。 類似のサービスとして、高機能な「CSS Selector Generator」もおすすめですが、個人的にはシンプルな「PrimerCSS」がよりおすすめです。 PrimerCSS ajaxload.info LightboxなどjQueryで画像を読み込む機会は多いですが、「ajaxload.info」はロード中を示すアニメーションを生
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
