タグ

コーディングに関するkurocraft7522のブックマーク (6)

  • word-break-スタイルシートリファレンス

    word-breakプロパティは、W3Cで審議中の仕様をInternet Explorerが独自に採用したもので、 表示範囲に合わせて改行するか、単語の切れ目で改行するかなど、文の改行の仕方について指定する際に使用します。 単語の途中で改行するかどうかを指定するword-wrapプロパティとの使い分けについてですが、 word-wrapプロパティは、文の改行というより、 長い英単語を途中で改行させたくない場合に使用するもののようです。また、日語の単語に対しては無効なようです。 word-breakプロパティは、CSS3で標準採用されるかもしれません。 ■値 normal 英語等は単語の途中では改行せず、単語の切れ目で改行されます。日語・中国語・韓国語等は表示範囲に合わせて改行されます。このため単語の途中で改行されることもあります。 break-all 言語に関係なく表示範囲に合わせて改

    kurocraft7522
    kurocraft7522 2019/07/26
    文字がはみ出てWEBデザインが崩れてしまう原因
  • Photoshopのデザインカンプからコーディングに必要な画像や値を取得する方法 | HPcode

    Photoshopから各種値を取得する 続いてはPhotoshopから色々な値を取得していく方法です。正確なコーディングをするには正確な値を取得しないといけません。 文字テキスト自体を取得 画像と対になるくらい基的なものだと思います。「文字ツール」を選択してテキストエリアをクリックしてCtrl + A → Ctrl + Cしてコピペしていく感じでやっています。 文字ツールはTのアイコンのものです。Tのショートカットで切り替えることもできます。 コピーしてる様子はこんな感じです。 文字に関する値を取得 ウインドウ → 文字 を選択して「文字パネル」を開きます。 文字パネルからは、CSSプロパティで表現すると以下の情報が得られます。 font-familyfont-weightfont-sizeline-heightletter-spacingcolor 選択ツール or 文字ツールで知りた

    Photoshopのデザインカンプからコーディングに必要な画像や値を取得する方法 | HPcode
    kurocraft7522
    kurocraft7522 2018/10/31
    Photoshop単体からコーディングする値取得は、こうやるのか…とても参考になりました。ありがとうございます!
  • Online StyleSheet Generator | OneClickCSS

    What's this? HTMLソースをもとに、id,class名CSS、子孫セレクタCSS、子セレクタCSS、LESS、SASS、SCSSを自動生成するオンラインサービスです。 従来のHTMLコーディグを強力にサポートします。 What's LESS/SASS/SCSS? LESS / SASS / SCSSCSSを効率的にコーディングできるCSSメタ言語です。 従来のCSSに比べ子孫セレクタ・子セレクタを簡単に管理することができ、高速にコーディングすることができます。 LESS OFFICIAL SASS/SCSS OFFICIAL 関連サービス 高画質サムネイル生成サービス HTTPクエリデコード SQLフォーマッター Insert文フォーマッター スペースフォーマッター JSONフォーマッター HTML/XMLフォーマッター Emmet toolkit for <textare

    Online StyleSheet Generator | OneClickCSS
    kurocraft7522
    kurocraft7522 2018/06/07
    HTMLコードからCSSを自動生成するWebサービス
  • 完璧に分かる!コーディング一連の流れと知識(HTML5+レスポンシブ+WordPress)

    作成:2014/01/27 更新:2015/08/07 Web制作 > 前回、Web制作の一連の流れを書きましたが、今回は少し掘り下げて「コーディング」についてのフローをまとめます(HTML5+レスポンシブ+WordPress)。会社によって違うと思いますが、ざっくりとしたコーディングの流れと気をつけておきたいことをメモしています。 エンジニア速報は Twitter の@commteで配信しています。 もくじ コーディング前の準備 1.仕様書の確認 2.入稿データの確認・スケジューリング HTML5 マークアップ 3.テンプレート作成 4.条件付きコメント 5.GCF+キャッシュクリア 6.OGP記述 7.ファビコン 8.アウトライン作成 9.バリデーターをチェック CSS の設定 10.ノーマライズスタイル レスポンシブデザイン設計 11.モバイルファーストを基準に設計 12.プログレッ

    完璧に分かる!コーディング一連の流れと知識(HTML5+レスポンシブ+WordPress)
    kurocraft7522
    kurocraft7522 2018/04/20
    一通りの流れ
  • デザイナーもコード書けなきゃダメ?ポートフォリオのどこを見てる?イケてる企業にホンネを聞いてきた! | 株式会社LIG(リグ)|DX支援・システム開発・Web制作

    突然ですが、デザイナーのみなさん、ポートフォリオ更新してますか? デザイナーたるもの、転職の予定がなくても、年に1度くらいはポートフォリオを更新しておきたいもの。 ですが、企業がどんなポートフォリオに魅力を感じるのかいまいちわからない、という方も多いと思います。 そこで、Webデザイナー、ゲームクリエイター向けの転職サービス「デザイナードラフト」に参加しているBASE株式会社、株式会社オハコ、freee株式会社の方々に、魅力を感じるポートフォリオはどんなものなのか?率直なご意見を聞いてきました! 今回話を聞いた3社がどんな人材を求めているかにも触れていますので、「転職したい!」と考えているデザイナーの方は要チェックです! BASE株式会社 早川 宗亮さん 専門的なWebサイト構築の知識や技術がなくても簡単にネットショップが作成できる、「お母さんも使える」ネットショップ作成サービス「BA

    デザイナーもコード書けなきゃダメ?ポートフォリオのどこを見てる?イケてる企業にホンネを聞いてきた! | 株式会社LIG(リグ)|DX支援・システム開発・Web制作
  • 複数行をいっぺんにインデント - MyTechNote

    これ知らなかったんだけども。 やり方は簡単。 以下手順。 1.Shiftキーをおしながらインデントしたい行を1行もしくは複数行選択。 2.Tabキーを押すとあらびっくりで複数行がいっぺんにタブインデントされます。 3.複数行を選択した状態でShiftキーをおしながらTabキーをおすと複数行 がいっぺんにマイナスインデントされます。

    複数行をいっぺんにインデント - MyTechNote
    kurocraft7522
    kurocraft7522 2018/01/08
    インデント一括操作
  • 1